I'm trying to create a wordpress theme and start learning the best way to include javascript and css files using wp_enqueue. After couple hours, I still can't load the files. Here is the code I use
function compro_scripts() {
wp_register_style( 'style', get_template_directory_uri() . '/css/materialize.css', array(), '20150208', 'all');
wp_enqueue_script( 'style' );
}
add_action( 'wp_enqueue_scripts', 'compro_scripts' );
It looked simple on every tutorial I've read, but it still not work for me. Would anyone mind helping me solve this ?
This very basic knowledge of Wordpress, but as a newbie I found out this is pretty confusing. If you want to use the best practice to include javascript and css files make sure to add wp_head() and wp_footer(). The rest of it is described clearly here How to Load Javascript like Wordpress Master
You've registered the "style" handle with wp_register_style() and you're enqueuing it by using wp_enqueue_script() which is incorrect. wp_enqueue_script() in your code needs to be replaced by wp_enqueue_style(), since it's a style that you are including, not a script.
Alternatively, you can simply enqueue scripts and styles directly without the need to register them separately - like this
function compro_scripts() {
$template_dir = get_template_directory_uri();
//enqueue a style
wp_enqueue_style( 'style', $template_dir . '/css/materialize.css', array(), '20150208', 'all');
//enqueue a script
wp_enqueue_script( 'custom', $template_dir . '/js/custom.js', array( 'jquery' ), false, false );
}
add_action( 'wp_enqueue_scripts', 'compro_scripts' );
Related
Here's My first post!
I am a bit of a newb to coding, I know enough html and css, mixed with using frameworks such as bootstrap, to develop a basic website and have started learning how to build themes in wordpress using php.
My goal was to build a theme using bootstrap and javascript but I am having trouble with the simplest of tasks such as getting the scripts to work in functions.php. I have been following some tutorials online which just didn't work and after a lot of experimenting and researching I cant seem to get anything to work.
My functions.php code is:
<?php
function styles() {
wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
$dependencies = array('bootstrap');
wp_enqueue_style( 'bootstrapstarter-style', get_stylesheet_uri(), $dependencies );
wp_register_style('style', get_template_directory_uri() . 'style.css');
$dependencies = array('style');
wp_enqueue_style('style', get_stylesheet_uri(), $dependencies);
}
add_action( 'wp_enqueue_scripts', 'styles' );
function scripts() {
wp_deregister_script('jquery3.4.1');
wp_enqueue_script('jquery3.4.1', get_template_directory_uri() . 'jquery-3.4.1.min.js', '', 1, true);
$dependencies = array('jquery');
wp_enqueue_script('bootstrap', get_template_directory_uri() .'/bootstrap/js/bootstrap.min.js', $dependencies, '3.3.6', true );
wp_enqueue_script('customjs', get_template_directory_uri() . 'scripts.js', '', 1, true);
}
add_action( 'wp_enqueue_scripts', 'scripts' );
function title(){
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'title' );
?>
and I have a test piece of code which displays a pop-up alert in the scripts.js (and the footer is calling the ?php wp_footer();? ):
$(document).ready(function(){
alert('test');
})
I have also experimented with the load order thinking that bootstrap js may be interfering with my own js but which ever way I position them I cannot get them to work.
Apologies if this is a dumb one and if this has been asked before but nothing I have looked up seems to work and any help would be greatly appreciated.
Many thanks!
You may have to replace your $ in your javascript with jQuery. jQuery is in compatibility mode by default in WP. That means that the typical $ shortcut for jQuery doesn't work.
jQuery(document).ready(function(){
alert('test');
})
Ok found the issue...
Using console I could see that it couldn't find the path to the files but I couldn't work out why as it was pulling through the styling but not the scripts.
I then went back to my code and realised there was no root on the files I was linking to.
Using atom as my text editor I was right clicking on the project path and copying the project path which didn't pull over the root of the path (I.E only pulling over scripts.js instead of /scripts.js).
Once I put the forward slash in on all linked files everything fixed.
Such a simple fix that a newbie like me will not now forget!
Here's the final working code for anyone who is interested:
<?php
function styles() {
wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
$dependencies = array('bootstrap');
wp_enqueue_style( 'bootstrapstarter-style', get_stylesheet_uri(), $dependencies );
wp_register_style('style', get_template_directory_uri() . '/style.css');
$dependencies = array('style');
wp_enqueue_style('style', get_stylesheet_uri(), $dependencies);
}
add_action( 'wp_enqueue_scripts', 'styles' );
function scripts() {
wp_deregister_script('jquery3.4.1');
wp_enqueue_script('jquery3.4.1', get_template_directory_uri() . '/jquery-3.4.1.min.js', '', 1, true);
$dependencies = array('jquery');
wp_enqueue_script('bootstrap', get_template_directory_uri() .'/bootstrap/js/bootstrap.min.js', $dependencies, '3.3.6', true );
wp_enqueue_script('customjs', get_template_directory_uri() . '/scripts.js', '', 1, true);
}
add_action( 'wp_enqueue_scripts', 'scripts' );
function title(){
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'title' );
?>
I am newbie of wordpress.
There are always some JS and Css from CDN in Wordpress, theme or plugins, like:
https://ajax.googleapis.com/ajax/libs/webfont/1.5.0/webfont.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css
Unfortunately, those external CDNs resource are quite slow in our country, and will caused our site serious delay.
Is there anyway to replace it with a local server copy please?
How should I do it please?
Thanks in advance.
One solution you got in comments that how to load jQuery locally and in case you have any other scripts or styles which are not available locally by default from WordPress so you can use wp_enqueue_script.
/**
* Proper way to enqueue scripts and styles.
*/
function wpdocs_theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );`
Well you can always override your current themeto enqueue your css and js. Basically go to :
wordpress/wp-content/themes/(the theme your using)/functions.php
You will need to modify the "functions.php" file and add an action in order to enqueue your new scripes and styles.
function mynew_scripts() {
wp_enqueue_script('webfont', 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.0/webfont.js');
wp_enqueue_style('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css');
//And for local file use get_template_directory_uri() to get the path
wp_enqueue_script('yourjsfile',get_template_directory_uri().'/yourthemedir/assets/js/yourjsfile.js');
wp_enqueue_style('yourcssfile',get_template_directory_uri().'/yourthemedir/assets/js/yourcssfile.css');
}
add_action('wp_enqueue_scripts', 'mynew_scripts');
check up these functions wp_enqueue_script , wp_enqueue_style
I have a wordpress website and I know that to run scripts on a wordpress page, you need to enqueue the script in the functions.php file. I am not sure how to do this proccess?
my Javascript is called boosting.js
Can someone give me an example code of how to do this?
Thank you very much! (I am a bit new to all this)
You need to add this to functions.php.
script-name - is the name you want to give the script
get_template_directory_uri() . '/js/boosting.js' - is path to where the script is located. If you're using a child theme then change this to get_stylesheet_directory_uri() . '/js/boosting.js'
array() - this is for dependencies. If your script needs jQuery to work than use array('jquery')
1.0.0 - version of the script. Useful for caching
true - means that the script will be loaded in the footer, use false if you needed in the header
/**
* Proper way to enqueue scripts and styles.
*/
function wp_theme_enque_scripts() {
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/boosting.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wp_theme_enque_scripts' );
You can read more here https://developer.wordpress.org/reference/functions/wp_enqueue_script/
Been having a hard time getting this to work... I'm trying to use animation for some transitions on a website I'm working on but when I include the files the average way it breaks the theme... A lot of reading has brought me knowing I need to use functions.php to enqueue the scripts and CSS but I tried and no dice.
I am using a child theme
The CSS I need to load is located in a folder my child-theme's directory called "css", the custom js and plugin js I need to load is located in a folder in my child-themes directory called "js".
1-The CSS needs to be in the header
2-jQuery needs to load
3-The plugin then needs to load
4-My scripts.js file needs to load, it manipulates the plugin's settings.
If you still don't understand this then basically I want to use http://git.blivesta.com/animsition/ within a wordpress child-theme. Thanks.
Try reading https://codex.wordpress.org/Child_Themes , it will help you a lot.
Regarding your question, you have to place the following code in your child's theme functions.php file:
function animsition_enqueue_styles_and_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
wp_enqueue_style( 'animsition-style', get_stylesheet_directory_uri() . '/css/animsition.min.css' );
wp_enqueue_script( 'animsition-js', get_stylesheet_directory_uri() . '/js/jquery.animsition.min.js', array('jquery'), '20150628', false );
wp_enqueue_script( 'custom-animsition-js', get_stylesheet_directory_uri() . '/js/scripts.js', array('animsition-js','jquery'), '20150628', false );
}
add_action( 'wp_enqueue_scripts', 'animsition_enqueue_styles_and_styles' );
I'm trying to get unlider.js working on Wordpress. My guess is that the registration of the script is not working properly.
I am using a child theme, and this is the code I put in functions.php to register the script (taken from WP guide).
Clearly, I am doing something wrong, perhaps the script is being inserted before jQuery.
What is the best way to attach a script from a child theme, after jQuery?
One I have so far is this:
<?php
add_action( 'wp_enqueue_scripts', 'child_add_scripts' );
function child_add_scripts() {
wp_register_script(
'google-analytics',
get_stylesheet_directory_uri() . '/unslider.js',
array( 'jquery' ),
false,
'1.0',
true
);
wp_enqueue_script( 'google-analytics' );
}
?>