'Bones' theme: Load stock scripts in footer instead of header?

Question

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' );

  }
}

Answer 1

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' );