How to Add (External) JavaScript and CSS to the Head via functions.php in WordPress

JavaScript is an important part of modern web development, allowing developers to add interactivity and dynamic behavior to their websites. WordPress provides several ways to add JavaScript to your website, and in this tutorial, we will focus on adding external JavaScript to the head of your website via functions.php.

Here are a few examples of when you might need to add external JavaScript to the head section of a WordPress website:

• If you want to add custom JavaScript code to your website
• If you want to add a third-party JavaScript library to your website
• If you want to add Google Analytics tracking code to your website

functions.php

The first step to adding external JavaScript and/or CSS to the head section of a WordPress website is to open to the functions.php file. Navigate to your WordPress dashboard, click on Appearance, then Theme Editor. The Theme Editor page will appear, and you will see a list of files on the right-hand side. Click on functions.php. Make sure you are working in your child theme.

Add the code

Once you have located the functions.php file, it’s time to add the code that will add the external JavaScript and CSS to the head section. You can do this by adding the following code to the functions.php file:

function add_my_script() {
//
	wp_enqueue_script( 'my-script', 'https://example.com/my-script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );
Code language: PHP (php)

The code snippet above is a PHP function that uses the wp_enqueue_script() function to add an external JavaScript and CSS file to the head section of a WordPress website.

Let’s take a closer look at the function and its parameters:

• function hoolite_enqueue_scripts_and_styles(): This is a custom function that enqueues the scripts and styles. You can name this function anything you like, but it’s important to choose a name that accurately describes what the function does.
• wp_enqueue_script( 'my-script', 'https://example.com/my-script.js', array(), '1.0', true ): This line of code enqueues a JavaScript file called “my-script” from the URL “https://example.com/my-script.js“. The second parameter is the URL of the script, the third parameter is an array of dependencies that the script relies on (in this case, there are no dependencies), the fourth parameter is the version number of the script, and the fifth parameter is a boolean that determines whether the script should be loaded in the footer of the page.
• wp_enqueue_style( 'my-style', 'https://example.com/my-style.css', array(), '1.0', 'all' ): This line of code enqueues a stylesheet called “my-style” from the URL “https://example.com/my-style.css“. The second parameter is the URL of the stylesheet, the third parameter is an array of dependencies that the stylesheet relies on (in this case, there are no dependencies), the fourth parameter is the version number of the stylesheet, and the fifth parameter is the media type (in this case, “all”).
• add_action( 'wp_enqueue_scripts', 'hoolite_enqueue_scripts_and_styles' ): This line of code adds an action hook that tells WordPress to enqueue the scripts and styles when the wp_enqueue_scripts action is fired. The second parameter is the name of the function that should be called when the action is fired (in this case, hoolite_enqueue_scripts_and_styles).

Here’s an example that demonstrates different ways to enqueue frontend scripts and styles in WordPress:

/**
 * Enqueue frontend scripts/styles.
 *
 * @return void
 */
function hoolite_enqueue_scripts_and_styles() {
    $stylesheet_dir_uri = get_stylesheet_directory_uri(); // https://example.com/wp-content/themes/mytheme-child.
    $stylesheet_dir     = get_stylesheet_directory(); // /home/user/var/www/wordpress/wp-content/themes/mytheme-child.

    // Enqueue styles.
    // Example 1: Default usage.
    wp_enqueue_style( 'example-style', "{$stylesheet_dir_uri}/assets/css/example-style.css", array(), '1.0.0' );

    // Example 2: Use last modified file time as version.
    wp_enqueue_style( 'example-style-filemtime', "{$stylesheet_dir_uri}/assets/css/example-style-filemtime.css", array(), filemtime( "{$stylesheet_dir}/assets/css/example-style-filemtime.css" ) );

    // Example 3: Enqueue Google font.
    wp_enqueue_style( 'example-font', 'https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:wght@400;700&display=swap', array(), null ); // phpcs:ignore

    // Enqueue scripts.
    // Example 1: Default usage.
    wp_enqueue_script( 'example-script', "{$stylesheet_dir_uri}/assets/js/example-script.js", array(), '1.0.0', true );

    // Example 2: Enqueue with a dependency.
    wp_enqueue_script( 'example-script-with-dependency', "{$stylesheet_dir_uri}/assets/js/example-script-with-dependency.js", array( 'jquery' ), '1.0.0', true );

    // Example 3: Use last modified file time as version.
    wp_enqueue_script( 'example-script-filemtime', "{$stylesheet_dir_uri}/assets/js/example-script-filemtime.js", array(), filemtime( "{$stylesheet_dir}/assets/js/example-script-filemtime.js" ), true );

    // Example 4: External script.
    wp_enqueue_script( 'example-script-external', 'https://maps.googleapis.com/maps/api/js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'hoolite_enqueue_scripts_and_styles' );
Code language: PHP (php)

Let’s take a closer look at the code:

The code snippet provided shows a WordPress function called hoolite_enqueue_scripts_and_styles(). This function is hooked into the wp_enqueue_scripts action using the add_action() function. This means that the function will be executed when the wp_enqueue_scripts action is triggered, which happens when WordPress is preparing to output the scripts and styles for a particular page.

Within the hoolite_enqueue_scripts_and_styles() function, we first retrieve the URL and directory path of the current child theme using the get_stylesheet_directory_uri() and get_stylesheet_directory() functions, respectively. These functions allow us to create a relative or absolute URL and file path for the child theme directory, which can then be used to enqueue styles and scripts.

• Example 1, we enqueue a stylesheet called example-style.css with a version number of 1.0.0.
• Example 2, we used the filemtime() function to get the last modified time of the stylesheet file. This is useful to ensure that the latest version of the file is always loaded by the browser, even if the file has been updated since the last time it was cached. We passed the last modified time as the version parameter to the wp_enqueue_style() function.
• Example 3, we used the wp_enqueue_style() function to enqueue a Google font. We passed the font URL as the source parameter and null as the version parameter, since we don’t need to specify a version for an external file.
• Example 4, we used the wp_enqueue_script() function to enqueue an external JavaScript file from the Google Maps API. We passed the external file URL as the source parameter, and array() as the dependency parameter, since this file doesn’t depend on any other scripts.

By using the wp_enqueue_script() and wp_enqueue_style() functions, we can easily add external scripts and stylesheets to our WordPress website and ensure that they are loaded correctly.

That’s it! You now know how to add external JavaScript to the head of your WordPress website via functions.php. By following the steps and examples provided in this tutorial, you can confidently enqueue external scripts and stylesheets in your WordPress theme. Happy coding!