I have found a lot of conflicting information about this on the internet. Some sites say that Wordpress automatically loads jquery, and others say you have to load it in functions.php
I want to enqueue a script in functions.php that is dependant on jquery. I read that you have to specificy jquery as the $deps parameter
My code is:
wp_enqueue_script( 'my-file', get_stylesheet_directory_uri() . '/js/my-file.js', array('jquery'), null, false);
is specifying jquery in the $deps parameter enough? Will wordpress then automatically load jquery too? Or do I actually have to enqueue jquery as a script as well?
My code above loads "my-file.js" but the script isn't working which tells me that either jquery isn't being loaded or there is sitll a dependency issue.
Wordpress by default register jquery for you
In your jquery script file, you have to use jQuery instead of $ to avoid confliction and you can enqueue your script
dependencies: An array of handles to assets which your script or style depends on. These will be loaded before your enqueued script.
wp_enqueue_script( 'my-file', get_stylesheet_directory_uri() . '/js/my-file.js', array('jquery'), null, false);
Before your script jquery will load.
array('jquery')
You can use this condition before enqueueing the script
if( ! wp_script_is( 'jquery', 'enqueued' ) ) {
wp_enqueue_script('jquery');
}
wp_enqueue_script( 'my-file', get_stylesheet_directory_uri() . '/js/my-file.js', array('jquery'), null, false);
Related
When I add the js file by html command, it loads but when I add it by wp command, it doesnt load.
<!-- <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> -->
<?php
wp_register_script( 'foo-stylesa1-slick-jquery', 'https://code.jquery.com/jquery-2.2.0.min.js' );
wp_enqueue_script( 'foo-stylesa1-slick-jquery' );
?>
I use above code snippet in my 2 plugin at the same time.
What is the problem?
You have to use complete register script function, since many times wordpress loads script above jquery and due to this scripts not work.
wp_register_script( 'someScript-js', '/someScript.js' , '', '', true );
Here true is used for loading scripts to the footer section after jquery enqueued.
Or you can directly use jquery enqueue function without loading its from external.
wp_register_script('jquery');
This will directly include jquery for your website.
I'm fairly new to wordpress and custom templates.
I'm trying to add parallax to a site I'm working on and want to use 'skrollr'.
I've downloaded it and have the skrollr.min.js file, which I've placed in my projects js/vendors/ directory.
What I'm trying to figure out in Wordpress is the proper way to add this to your project.
How do you typically add Jquery and other js libraries?
you can include your js and jquery files into your wordpress by simply adding the code
function wpdocs_theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/assets/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
Just simply put your jquery file inside the assets/js folder. from there on use the path that your jquery file makes.
Enter the above code in your functions.php
That should include your above file in the wordpress.
If you further have any issues or problems let me know
I've enqueued a style sheet using
wp_enqueue_style( 'home-custom-style', get_stylesheet_directory_uri() .
'/css/style.css');
in my child theme
then when I tried to modify it, I've realised that wordpress gave it an automatic version, which now I can't change.
I have tried modifying the enqueue code adding a version,
wp_enqueue_style( 'home-custom-style', get_stylesheet_directory_uri() .
'/css/style.css' , array(), '30140222');
also tried dequeuing it and enqueuing it again, and deleting the file and readding it in the folder but nothing is working.
except null.
For now I made a hard refresh (bypassing my cache) pressing Ctrl + F5 in the browser, cause I'm on the local host, but still need an answer to use it on the server.
heads-up the following applies to scripts too, just replace style with script and you're good to go
The problem is that you're trying to modify an already registered style. See, when you call wp_enqueue_style(), the style is registered and enqueued at the same time(vs calling wp_register_style() and then wp_enqueue_style() which I recommend).
However, if a style has already been registered, when you try to enqueue it the extra parameters are not used, they're just ignored.
What you need to do is the following( make sure to fill in the correct parameters in the wp_register_style() below):
wp_deregister_style( 'my-style' );
wp_register_style( 'my-style', ... );
wp_enqueue_style( 'my-style' );
This first deregisters the still you want to modify and then registers it again with the modified parameters. This will work with styles that are used as a dependency or have dependencies of their own, because dependencies are resolved at the time the style is being loaded on the page and not when it's registered/enqueued.
For what you're trying to achieve though, I would personally just register whatever scripts and styles I want to override in the child theme before the parent theme does it. That way you won't have to deregisters and register them. Here's an example(part of it is the sample parent theme's code):
function parent_theme_enqueue_scripts(){
wp_enqueue_style( 'example-style', get_bloginfo( 'template_directory' ) . '/css/example.css', array(), 'v1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'parent_theme_enqueue_scripts', 10 );
function child_theme_enqueue_scripts(){
wp_register_style( 'example-style', get_bloginfo( 'stylesheet_directory' ) . '/css/example.css', array(),'v1.2.0' );
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_scripts', 5 );
The important thing to notice here is the priority on child_theme_enqueue_scripts - it's lower than that of parent_theme_enqueue_scripts. Also note that we're not directly enqueue-ing the style, but instead we're just registering it. That's in order to not mess up the loading order of styles(in case the parent theme enqueues multiple styles but doesn't use dependencies to do that).
Just add this function in function.php
function wpa() {
wp_enqueue_style( 'home-custom-style', get_stylesheet_directory_uri() . '/css/style.css' , array(), '30140222' );
}
add_action('wp_enqueue_scripts', 'wpa');
You should try to search your themes & plugins folders for functions that modify your enqueued styles and scripts.
I was looking for lines containing style_loader_src or ver= and discovered a plugin called "Child Theme Configuratior" that was the culprit.
Turned that plugin off and everything started to work as expected.
I'm having issues loading jQuery via wp_enqueue_script - I just discovered this is the correct way to pull in jQuery to avoid posible JS conflicts but I can't get it work. I'm using this example:
function my_init() {
if (!is_admin()) {
// comment out the next two lines to load the local copy of jQuery
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
wp_enqueue_script('jquery');
}
}
add_action('init', 'my_init');
I'm getting nothing when I check my source files. From what I can see the syntax is correct, I'm attempting to do this on a local WP install using XAMPP if that matters. Has anyone run into a similar issue? I've seen several questions about this but the fix usually comes down to a syntax error. I'm not seeing one. Any help would be much appreciated. Thanks!
Add the code below to your theme's functions.php in place of what you have.
The version of jQuery you were trying to load was outdated by the way.
Is this a custom theme you're building? If so are you using the wp_head and wp_footer tags?
By de-registering the built in version of jQuery and loading jQuery from the Google CDN you're reducing the time it takes to download the file but it isn't necessary. You could just load jQuery with wp_enqueue_script( 'jquery' );
function my_enqueue_jquery() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js', false, '2.0.3' );
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_jquery' );
Wordpress 3.8 has jQuery.1.10.3.
wp_deregister_script('jquery') is not good for site.
So, you'd rather upgrade wordpress and use higher version of jQuery included in wordpress.
Please review this Wordpress Theme.
It's much easier to customize and has lots of features. Also easy to learn code tips.
Regards. HanaTheme.
I am currently developing a theme and i am having issues when it comes to wp_enqueue. This is what i got but it isn't working.
function theme_name_styles() {
wp_enqueue_script( 'style-name',get_template_directory_uri() . '/css/dropdown.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_styles' );
secondly i am trying to tell if the toolbar is active on the frontend of wordpress or not and using conditions to display something if it is not active.
wp_enqueue_script is used to enqueue script , use wp_enqueue_style instead
other thing is its better to register script or style first before using
wp_register_script // to register script
wp_register_style // To register style
then enqueue using wp_enqueue_script wp_enqueue_style // learn more about it on codex
Try this :
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );
function register_plugin_styles() {
wp_register_style( 'style-name', get_template_directory_uri() . '/css/dropdown.css' );
wp_enqueue_style( 'style-name' );
}
More info : http://codex.wordpress.org/Function_Reference/wp_register_style
For the toolbar, maybe you can find something here: http://digwp.com/2011/04/admin-bar-tricks/
There are specific functions to enqueue scripts and styles in wordpress. wp_enqueue_script is used to enqueue scripts only and wp_enque_style is used to enqueue stylesheets. These enqueued files will be attached at the point where you called the wordpress function wp_head. Note that these functions check for MIME type so that if you trying to enqueue a script using the wp_enqueue_style then it'll assume your stylesheet as a script and vice versa. You can see the type and explanation of the error if you use a debugger tool. The developers tool in google chrome is quite awsome. You can use this.
There is a function is_admin_bar_showing which can tell explicitly whether the admin bar is showing in the front end or not. http://codex.wordpress.org/Function_Reference/is_admin_bar_showing