jQuery : modern best practices in custom themes

  • Hello-

    I am a WordPress developer specializing in custom themes on a project specific basis. I’ve recently switched to Paul Irish’s HTML5Bulletproof as the framework for my themes.

    It seems modern best practice is to load jQuery at the bottom of the page for faster loading.

    I’m wondering how I should integrate this into my WordPress Themes? Also, how should I be loading page-specific documentReady events (such as initializing a slideshow that only appears on the home page).

    Currently, I enqueue jquery in my functions.php. In my footer.php I have a few documentReady events that are only called if(page).

    1. Should all of these be moved to functions.php, use enqueue_script and called on if(page)? Or should the documentReady events be called within my page template files?
    2. What about plugins that are only required on certain pages?
    3. Other tips?

    Thank you!

    [Moved to WP Advanced – you should get a better discussion there.]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Regarding loading jQuery in the footer, I think you might be able to use the add_data() method on the global $wp_scripts object. Based on the way the wp_register_script() function uses it, it looks like that should be something like:

    <?php
add_action( 'wp_enqueue_scripts', 'move_jquery_to_footer' );
function move_jquery_to_footer() {
    global $wp_scripts;
    $wp_scripts->add_data( 'jquery', 'group', 1 );
}
?>

    Regarding queuing scripts only on certain pages; if those scripts are all in separate JavaScript files, that’s simple. If not, it gets a little more difficult.

    Maybe you could use wp_localize_script() to send some data to your JS file; then check those variables before actually trying to fire any of your $(document).ready() actions.

    Thread Starter Nate Zander

    (@mtnporcupine)

    Thanks for the ideas Curtiss. I will investigate those methods (they are new to me).

    For dev, all scripts were written out, but I am currently in the process of moving them in to their own separate files.

    Thanks.. I got it.

    1. I think you improve page speed moving javascript to the footer. There is a parameter for that in the enqueue call:
    function wp_enqueue_script( $handle, $src = false, $deps = array(), $ver = false, $in_footer = false )

    2. You can make a template function to use in your template pages that enqueues the script and puts out the code for the document.ready functions. Then it is only done on those pages that need it.

    As a technical note, moving the jQuery to the footer doesn’t improve actual page loading speed, it improves the perceived page loading speed.

    When a browser loads a page, it can generally open about 4 connections at a time to the same domain to download files. It starts loading the files at the top of the page first, as the jQuery generally isn’t needed until most of the other parts of the page are loaded, this allows the base HTML and images, CSS etc to load quicker and the browser to begin to render the page quicker. This is also why putting JS for Google Analytics, Disqus, Twitter, Facebook, etc at the bottom of the page is also a good idea. The bottom line is however, the entirety of the page will load at the same speed, the user will just think it’s loading faster.

    Actually, the browser has to wait for the javascript to load before continuing, so it does slow the page load down.

    Here’s an in depth article on registering and loading javascript in WP
    https://wp.smashingmagazine.com/2011/10/12/developers-guide-conflict-free-javascript-css-wordpress/

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘jQuery : modern best practices in custom themes’ is closed to new replies.