Skip to Content
Menu

move_jquery_to_footer()

Move the jQuery JavaScript call to the footer to prevent blocking DOM render.

PHP February 26, 2018

Usage

This function runs automatically, so it is not called manually. Is this incorrect?

Examples

Force jQuery to load in the head on all pages (without using Nebula Options)

PHP
add_filter('nebula_prevent_jquery_footer', '__return_true');

Allow jQuery to load in the head on page ID 123

PHP
add_filter('nebula_prevent_jquery_footer', function(){
    if ( is_page(123) ){
        return true;
    }
    
    return false;
});

Additional Notes

This function wouldn’t be called directly, but becomes important when squeezing every millisecond out of performance. The Nebula Option for jQuery allows for it to be moved to the footer. Doing so will cause an error for any embedded <script> tags in page templates that are placed before the footer. When this happens, Nebula will output a console error indicating what has occurred along with two ways to fix it (either by moving jQuery back to the head in Nebula Options or by moving the embedded script tag to the footer).

There are other ways to alleviate this problem and minutely control when jQuery is loaded in the footer using the nebula_prevent_jquery_footer filter. See the examples for how this filter works. Remember, returning true for this filter forces jQuery to load in the head and returning false (or not using the filter at all) keeps it in the footer only when the Nebula Option is set to load it from the footer. Any other time it is always loaded in the head.

Some plugins may override this and move jQuery back into the head.

If there is any worry that functionality may break by moving jQuery to the footer please consider leaving the Nebula Option set to “WordPress (Head)” or “Latest (Head)” which will leave the jQuery script in the head!

Was this page helpful? Yes No


    A feedback message is required to submit this form.


    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!

    Source File

    Located in /libs/Optimization.php on line 769.

    1 Hook

    Find these filters and actions in the source code below to hook into them. Use do_action() and add_filter() in your functions file or plugin.

    Filters
    "nebula_prevent_jquery_footer"
    Need a new filter hook? Request one here.

    Actions
    This function has no action hooks available. Request one?

    PHP
            public function move_jquery_to_footer(){
                //Let other plugins/themes add to list of pages/posts/whatever when to load jQuery in the <head>
                //Return true to load jQuery from the <head>
                if ( apply_filters('nebula_prevent_jquery_footer', false) ){
                    return;
                }
    
                if ( !$this->is_admin_page(true) && !is_admin_bar_showing() && $this->get_option('jquery_location') === 'footer' ){
                    //Group 1 is how WordPress designates scripts to load from the footer
                    wp_script_add_data('jquery', 'group', 1);
                    wp_script_add_data('jquery-core', 'group', 1);
                }
            }
    

    Override

    This function can not be short-circuited with an override filter. Request one?