Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Nathan F.
Nathan F.
30,773 Points
Posted by Nathan F.
Nathan F.
30,773 Points

Enqueueing Wordpress-included/default scripts

Hey all,

I need something cleared up, and think I have the answer, but want to make sure I understand it correctly. I'm using a child theme of Twenty Twelve, and I have added a functions.php file to the root of the child theme. All I want to do is include jQuery in my theme and HoverIntent for jQuery. This is the code within the child theme's functions.php:

<?php
 function ready_jquery(){
   if (!is_admin()){
       wp_enqueue_script('jquery');
       wp_enqueue_script('hoverIntent');
    }
  }

   add_action('wp_enqueue_scripts', 'ready_jquery');

  ?>

As I understand it, it's bad form to deregister the Wordpress versions of jQuery and substitute the Google-supplied one, though I see it everywhere in example code.

But my question is: in a theme that doesn't by default enable jQuery, like Twenty Twelve, all I should need to do to get jQuery functionality in my theme is to do as I did above, right? I don't need to register the scripts to use the Wordpress included defaults?

I only ask because it doesn't appear as if jQuery is being loaded into the header or footer after adding this code to my functions. I tried clearing my cache, in case that was the issue. It doesn't appear to have made a difference. Have I missed a step?

Cheers!

2 Answers

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

You can just enqueue them if you want them included on every page you have the files on your server, but in the code above you did not direct WP to where the JS files are.

This is how I did mine. I decided to pull Jquery from Google's CDN since many visitors will probably already have my version of JQuery in their cache.

http://css-tricks.com/snippets/wordpress/include-jquery-in-wordpress-theme/

This is how my resulting function for loading all of my JS looked like :

//Load the theme JS
function theme_js() {
    //Adds JQuery from Google's CDN. Code pulled from www.http://css-tricks.com/snippets/wordpress/include-jquery-in-wordpress-theme/
    if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
    function my_jquery_enqueue() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js", false, null);
    wp_enqueue_script('jquery');
}
    wp_enqueue_script( 'bootstrapjs', get_template_directory_uri() . '/js/bootstrap.js', array('jquery'), '', true );
    wp_register_script( 'textfill', get_template_directory_uri() . '/js/jquery.textfill.min.js', array('jquery'), '', true );
    if( is_front_page( 'machines' ) ) {
    wp_enqueue_script( 'textfill' );
    }
    wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery'), '', true );

}
add_action( 'wp_enqueue_scripts', 'theme_js' );
Nathan F.
Nathan F.
30,773 Points
Nathan F.
Nathan F.
30,773 Points

So pulling Google CDN's jQuery isn't bad practice for use with Wordpress themes? I got the impression it was, hence why I opted to use Wordpress's. From reading the Codex, it sounded like the included APIs/libraries already had filepaths registed (usually to wp-includes/.../js), which would mean I wouldn't need to point Wordpress to them.

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

I don't think it is, however I'm not confident enough to say for sure. I can't see it being a huge issue. Yes, Wordpress has a lot of libraries that depend on JQuery, but as long as you pull Jquery onto the page, you should be just fine. It shouldn't matter if JQuery comes from your WP install or from Google. I'd image it's going to load faster from Google, and if it's already cache in your visitors browsers even better yet.

Chris Coyier writes CSS-Tricks, he also is a friend of Treehouse, and from watching his screencasts he is one really sharp dude. If he says it's the best way to go around adding JQuery to WP, than I heavily rely on that being true.

Thats what I did, and had zero issues with it.

Nathan F.
Nathan F.
30,773 Points
Nathan F.
Nathan F.
30,773 Points

You make a good point. I did that and it does look like it's working, or was working, afterall. It was just getting bunched up in a minified JS file with some other JS script that I assume comes with the theme (some JS about addComment etc etc.) Then there's a code comment below with the jQuery version and a bunch of definitions. I, as a test, disabled my functions.php, cleared caches, cleared my W3 Cache, and the jQuery stuff disappeared.

And now the real work begins. :)

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

There's a good jquery updater plugin. It'll make sure that your WordPress install always loads the most recent version of jQuery. Much like what's happening here but easier. I'm just lazy, batch upload plugins and batch activate.

Nathan F.
Nathan F.
30,773 Points
Nathan F.
Nathan F.
30,773 Points

For future reference, what's the name of the plugin?