mobile logo

Integrating javascript files in wordpress custom theme

Solution:1

The right way is to use wp_register_script and wp_enqueue_script. Using these will instruct WordPress to load your script after any dependent scripts.

So say your prettyPhoto.js file is in mytheme/js. In functions.php, add something like:

<?php
add_action('wp_enqueue_scripts', 'mytheme_load_scripts');
function mytheme_load_scripts() {
  // this only registers the script with WordPress
  wp_register_script('prettyPhoto', get_stylesheet_directory_uri().'/js/prettyPhoto.js');
  // this actually loads the script in `wp_head`
  wp_enqueue_script('prettyPhoto');
}
?>

If prettyPhoto.js is dependent on jQuery or something, then you specify this in wp_register_script. Doing the below will tell WordPress to ensure jQuery is loaded before your script is loaded.

<?php
wp_register_script('prettyPhoto', get_stylesheet_directory_uri().'/js/prettyPhoto.js', array('jquery'));
?>

See wp_register_script and wp_enqueue_script in the codex for more.

This article will probably help, too.

Solution:2

The WordPress Theme Handbook recommends the wp_enqueue_script() function to add custom scripts to your site. This built-in function respects WordPress’s loading sequence and enqueues your custom scripts in the proper order, so they won’t conflict with other scripts loaded by the WordPress core and plugins running on your site.

With wp_enqueue_script(), you can add your custom JavaScript both to the header and footer templates. By default, it enqueues the scripts in the <head> section of the page loaded by the header template.

If you want to add your script to the header, you only need to define a custom handle ('custom' in the example below) and the path to the script. As you can see below, I’ve also used the get_stylesheet_directory_uri() WordPress function to get the URI of the child theme directory. And the add_action() function adds the custom tutsplus_enqueue_custom_js() function to the wp_enqueue_scripts action hook, which lets you enqueue custom scripts you want to display on the front-end of your site.

1
2
3
4
5
/* Custom script with no dependencies, enqueued in the header */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js');
}

Beware that although the wp_enqueue_script() built-in WordPress function and the wp_enqueue_scripts action hook have almost the same name, they are different things.

Besides enqueuing scripts for the header, you can also use the wp_enqueue_script() function to add custom JavaScript to the footer template. However, in this case, you also need to define all the optional parameters, respectively:

  1. the dependencies: array() as we have no dependencies for now
  2. the version of the script: false as we don’t want to add version numbers
  3. whether this is for the header or footer template: true as we switch to the footer template, which is the non-default option
1
2
3
4
5
6
/* Custom script with no dependencies, enqueued in the footer */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js',
    array(), false, true);
}

If your custom script has dependencies, you need to add them to the array() parameter of the wp_enqueue_script() function. There are a couple of popular scripts and libraries, such as jQuery, that are already registered by the WordPress core, so you can add them using their registered handle ('jquery' in the example below).

1
2
3
4
5
6
/* Custom script with jQuery as a dependency, enqueued in the footer */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js',
    array('jquery'), false, true);
}

If you have a dependency that is not registered by WordPress, you need to register and enqueue it with another wp_enqueue_script() function, before you can add it as a dependency using its custom handle.

If you want to run your script in the admin area instead of the front-end of your site, you need to use the admin_enqueue_scripts action hook instead of wp_enqueue_scripts in the add_action() function. And for the login screen, you need to use the login_enqueue_scripts action hook, which enqueues custom scripts only for the login page.