Load jQuery Files In WordPress

There’s different ways you can load scripts in WordPress. It really depends on whether the script is for use in a theme, plugin or whether you want it to only load on specific pages.

Clearly, the easiest way to use JavaScript or jQuery in a theme like Genesis is to simply paste it into one of the custom meta boxes for scripts.

In Genesis, you’ll find 2 boxes which you can use to:

1. Load scripts globally – Site Wide
2. Load scripts conditionally on specific pages and posts

Load Scripts Globally – Site Wide

There’s at least 2 ways you can add javascript or any other script to your site so it can be used globally.

Here’s the Header and Footer Scripts box you’ll find in Genesis > Theme Settings

These boxes are generally used for adding scripts like Google Analytics or live chat scripts.

Note: Any jQuery or Javascript added to these boxes generally needs to be wrapped in opening and closing script tags.

2nd (Preferred Method) – Using wp_enqueue_scripts

If your theme doesn’t include boxes like these, you can add some code to your child themes functions.php file.

The above example loads a script which isn’t dependant on jQuery.

Load jQuery Dependant Scripts

Here’s an example which loads a script dependant on jQuery from a child themes functions file.

add_action( 'wp_enqueue_scripts', 'ambiance_load_scripts_styles' );
function ambiance_load_scripts_styles() {
    wp_enqueue_script( 'script-handle', get_bloginfo( 'stylesheet_directory' ) . '/js/effects.js', array( 'jquery' ), '1.0.0' );
}

Note the addition of array( 'jquery' ) which tells WordPress the script requires jQuery.

Once you have loaded your script correctly, you also need to make sure the script is added in the file correctly like this example:

jQuery(function( $ ){

// Your jQuery

});

Note the jQuery(function( $ ){ added to the start of the jQuery.

You can also use the following method :

( function() {

// Your jQuery

})( document, jQuery );

And this :

jQuery(document).ready(function($) { 

// Your jQuery

});

Once you have registered your script, you can also call it conditionally using the handle only so it only loads on the pages you need.

Another option is to enqueue your script directly in a template file like a front-page.php file rather then your functions file so it doesn’t load on every page.

Load Scripts Conditionally – Specific Pages & Posts

A theme framework like Genesis makes customizing WordPress easy by enabling you to load scripts on any specific page or post.

You’ll find a scripts box under every edit post/page screen where you can simply paste in your script.

If you can’t find the box for Scripts, click the Screen Options tab in the top right and check the box to enable the Scripts box to display.

If your theme doesn’t include a Scripts box, add this code to the end of your child themes functions.php file and replace the page i’d with the page-slug or i.d you want the script to work on.

You can also change the conditional tag to suit your needs.

Loading Scripts In Parent Theme

The only difference between loading scripts in your parent theme compared to your child theme is:

get_template_directory_uri() - Use this for parent themes.
get_stylesheet_directory_uri() - Use this for child themes.

This code should be used for loading scripts conditionally in a parent theme.

Loading Scripts Using Code

Simply create a new folder in your child themes root directory and place your.js file in there.

This code assumes your .js file is named your-script. If you change it, you will also need to change the names and file paths in the code.

Loading Scripts For Custom Background Image

Here’s the code used in the popular Metro theme by StudioPress.

You could use this code in other Genesis child themes for adding a responsive background image to your website.

Loading Scripts in Plugins Manually

Most plugins which include scripts, also include the code to load the script so you don’t need to do anything.

But what if you find a plugin which only includes the raw code or PHP script? In this case you may need to load it in WordPress so this tutorial will help you do that.

If you’re new to plugin Development, here’s the correct method to load jQuery scripts for plugins.

Loading scripts using best practice includes using the same method as loading style sheets which also include the wp_register and wp_enqueue functions to enqueue a style.css file correctly.

Simple Scripts Plugin

If your theme doesn’t offer a field to add scripts, you can simply install this plugin name Simple Scripts.

Do You Know The Answer To This Question

Is wp_enqueue_scripts a function or a hook?