Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm using the 'Bones' theme in my latest WordPress site, and when I run the site through Google PageSpeed, I receive the following error:

Eliminate render-blocking JavaScript and CSS in above-the-fold content:

https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js/ https://www.default.com/…includes/js/jquery/jquery-migrate.min.js https://ajax.googleapis.com/…ax/libs/jqueryui/1.10.3/jquery-ui.min.js https://www.default.com/…lugins/node.tmp/js/jquery.transit.min.js https://www.default.com/…gins/node.tmp/js/jquery.touchwipe.min.js https://www.default.com/…ntent/plugins/node.tmp/js/jquery.sidr.js https://www.default.com/…ugins/node.tmp/js/mobile.nav.frontend.js https://www.default.com/…/library/js/libs/modernizr.custom.min.js

How can I load these scripts in the footer instead of the header as the theme is currently doing?

The following is included in bones.php, which initializes the theme:

/*********************
SCRIPTS & ENQUEUEING
*********************/

// loading modernizr and jquery, and reply script
function bones_scripts_and_styles() {
  global $wp_styles; // call global $wp_styles variable to add conditional wrapper around ie stylesheet the WordPress way
  if (!is_admin()) {

    // modernizr (without media query polyfill)
    wp_register_script( 'bones-modernizr', get_stylesheet_directory_uri() . '/library/js/libs/modernizr.custom.min.js', array(), '2.5.3', false );

    // register main stylesheet
    wp_register_style( 'bones-stylesheet', get_stylesheet_directory_uri() . '/library/css/style.css', array(), '', 'all' );

    // ie-only style sheet
    wp_register_style( 'bones-ie-only', get_stylesheet_directory_uri() . '/library/css/ie.css', array(), '' );

    // comment reply script for threaded comments
    if ( is_singular() AND comments_open() AND (get_option('thread_comments') == 1)) {
        wp_enqueue_script( 'comment-reply' );
    }

    //adding scripts file in the footer
    wp_register_script( 'bones-js', get_stylesheet_directory_uri() . '/library/js/scripts.js', array( 'jquery' ), '', true );

    // enqueue styles and scripts
    wp_enqueue_script( 'bones-modernizr' );
    wp_enqueue_style( 'bones-stylesheet' );
    wp_enqueue_style( 'bones-ie-only' );

    $wp_styles->add_data( 'bones-ie-only', 'conditional', 'lt IE 9' ); // add conditional wrapper around ie stylesheet

    /*
    I recommend using a plugin to call jQuery
    using the google cdn. That way it stays cached
    and your site will load faster.
    */
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'bones-js' );

  }
}
share|improve this question

1 Answer 1

up vote 1 down vote accepted

Most of the JavaScript listed looks like it belongs to the nodes.tmp plugin and not the actual Bones theme. There's not much you can do about that unless you use wp_deregister_script to disable the scripts and then load them again in footer. This can get messy fast and can cause issues when the plugin is updated. If you're interested in doing it still, there's a good article about how to disable plugin scripts and styles.

The Bones theme looks like it is already loading it's scripts in the footer:

//adding scripts file in the footer
wp_register_script( 'bones-js', get_stylesheet_directory_uri() . '/library/js/scripts.js', array( 'jquery' ), '', true );

The true argument at the end is saying to load the script in the footer. Have a look at the codex page for wp_register_script for more info.

The following will move jQuery to your website footer. However you need to be mindful that this will most likely break plugins if they load scripts in the website header. There's a check in the code to ensure that jQuery isn't moved in the admin and theme customizer.

function themename_print_jquery_in_footer( &$scripts ) {
    // Return if the website is being requested via the admin or theme customizer
    global $wp_customize;
    if ( is_admin() || isset( $wp_customize ) ) {
      return;
    }

    $scripts->add_data( 'jquery-core', 'group', 1 );
    $scripts->add_data( 'jquery-migrate', 'group', 1 );
}
add_action( 'wp_default_scripts', 'themename_print_jquery_in_footer' );
share|improve this answer
    
Thank you for the detailed answer Dylan. 4 of the 8 scripts are indeed from the node.tmp plugin, the other 4 seem to be loaded by the Use Google Libraries plugin or WordPress itself. Is it true that WordPress requires jQuery core to be loaded in the header? –  eclipsis Mar 7 at 17:55
    
No problem! Wordpress loads jQuery in the header by default. If you change this behaviour you need to use your discretion. It should be okay if it's a custom theme and you control the plugins that are installed. It's not something you should do if you're going to distribute your theme. –  Dylan Mar 8 at 6:21

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.