How to Enqueue Custom Scripts and Style Sheets in WordPress

Enqueueing scripts and styles in WordPress is a pretty fundamental skill for any developer if they want to improve their website functionality and appearance. This involves efficiently adding JavaScript files and CSS stylesheets without conflicting them.

With the WordPress built-in functions available, you can properly use the wp_enqueue_script() and wp_enqueue_style() to manage your assets quite easily and effectively.

In this blog, we will walk through the steps to properly enqueue scripts and styles, making it easy for even beginners to follow all the instructions.

Let’s get started!

How Enqueueing Works in WordPress?

Enqueueing is WordPress’s effective method for loading styles and scripts in a properly aligned manner. Instead of directly inserting them into your theme files, you use functions designed to allow WordPress to manage those assets in the best possible way.

It makes sure that these scripts are loaded when they need to and in the right order for the best-optimized performance.

If you want to learn more about how to speed up your WordPress site, check out our separate guide and our listing of the best WordPress performance plugins.

Ready to take control of your WordPress site?

With Cloudways, you can easily manage your hosting needs—whether you’re optimizing it or looking for a reliable host for your site. Join the Cloudways family today and experience hassle-free WordPress hosting that puts you in charge.

Get Started Now!

Enqueueing and WordPress Hooks

To enqueue scripts and styles, you usually hook your functions into two main actions, as stated below:

• wp_enqueue_scripts: It is used for frontend assets.
• admin_enqueue_scripts: It is used for backend (admin area) assets.

These hooks ensure that your scripts and styles are loaded at the appropriate time during the page’s lifecycle. Before we get into the main topic, let’s first understand what enqueueing and WordPress hooks are.

Enqueuing involves using the wp_enqueue_script and wp_enqueue_style functions, as we mentioned above. These functions let WordPress know when and where to load your custom scripts and styles. This approach helps you maintain your code by loading it only when needed instead of dumping everything in one place.

Now, this could slow down your site, and that’s problematic. Essentially, enqueueing tells WordPress how to handle your custom code files and their dependencies.

WordPress hooks, on the other hand, allow developers to add custom code to themes and plugins without altering the WordPress Core files. This means you can change how WordPress works without directly modifying its core system.

Hooks also lets you decide when your custom code will run during WordPress’s PHP processing. To use a hook, you first write a custom function, often called a callback or hooked function.

There are two types of hooks: actions and filters.

Action hooks let you add new functionality, while filter hooks are used to modify existing content. Filters work by editing the data passed to them and must return a value.

Actions, on the other hand, don’t always get input arguments and don’t need to return anything.

Understanding wp_enqueue_script

Enqueuing in WordPress uses the wp_enqueue_scripts hook and specific functions for adding stylesheets and scripts to your site. The function of wp_enqueue_script is really important when adding JavaScript files to your WordPress website.

It offers so much in terms of control over dependencies, the order in which files are loaded, and the inclusion or exclusion of version numbers. It is an action hook used in a theme’s functions.php file or plugin files to load stylesheets and JavaScript. It’s the recommended way to add scripts because it ensures proper loading order and prevents conflicts.

Adding Stylesheets

To add stylesheets, you can use two functions:

• wp_register_style(): Registers the stylesheet for later use.
• wp_enqueue_style(): Loads the stylesheet onto the site.

Key Parameters

• $handle: A unique name to identify the stylesheet.
• $src: The file path or URL of the stylesheet. This can be optional if already set in wp_register_style().

You can either register and enqueue the stylesheet separately:

function add_styles() {
  wp_register_style( 'custom-style', plugins_url( '/css/style.css' ) );
  wp_enqueue_style( 'custom-style' );
}
add_action( 'wp_enqueue_scripts', 'add_styles' );

Or do it in one step:

function add_styles() {
  wp_enqueue_style( 'custom-style', plugins_url( '/css/style.css' ) );
}
add_action( 'wp_enqueue_scripts', 'add_styles' );

Adding Scripts

Similarly, you can use these functions for JavaScript:

• wp_register_script(): Registers the script.
• wp_enqueue_script(): Loads the script onto the site.

Key Parameters

• $handle: A unique script name.
• $src: The file path or URL of the script.

Optional Parameters

• $deps: Dependencies the script needs (e.g., jQuery).
• $ver: The script version.
• $in_footer: Whether to load the script in the footer (default is <head>).

You can register and enqueue scripts together:

function add_scripts() {
  wp_register_script( 'custom-script', plugins_url( '/js/script.js' ) );
  wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'add_scripts' );

Or do it in one step:

function add_scripts() {
  wp_enqueue_script( 'custom-script', plugins_url( '/js/script.js' ) );
}
add_action( 'wp_enqueue_scripts', 'add_scripts' );

How to Use wp_enqueue_script in WordPress

To apply the function wp_enqueue_script, you have to specify several parameters:

• $handle: Unique name for your script.
• $src: The URL of the script or its path relative to WordPress root.
• $deps: An array of handles your script depends on, say, jQuery.
• $ver: The optional version number for cache-busting.
• $in_footer: A boolean value indicating whether to load the script in the footer.

Example: Enqueue a Script

Here is a simple example of how to enqueue a script. First, you need to have a script to test the process. If you have a custom script, that’s ok you can use the concern path. If you don’t have a script and want to test the work, you can copy the following script to test the enqueue process.

To create a script, you will need to go to the js folder under the active theme’s directory. If you don’t have the folder, you can create a new folder, as shown in the screenshot below. Here, we verified that our theme is a child theme of Simple Nova.

Also, if you are using a child theme, you will need to create the js folder under the parent theme’s directory and modify the functions.php file of the active child theme.

Now that you have the js folder created, you will create the script file with the script code shared below in it. Here our script is named my-script.js you can name it as per your liking. Here is the sample script for testing:

// my-script.js
jQuery(document).ready(function($) {
    console.log("My script is loaded and running!");
    // You can add your custom JavaScript code here under this line!
});

Now save it and access your theme’s functions.php File. You can find your active theme directory, usually located under the following path:

public_html/wp-content/themes/your-theme-name/functions.php

public_html/wp-content/themes/your-theme-name/functions.php

Now create a function to Enqueue Scripts. In order to do it, open your functions.php file, then create a new function, as shared below, that will handle the enqueueing of your scripts at the end of the file:

function my_custom_scripts() {
    wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0', true);
}

Next, we will hook the function into wp_enqueue_scripts. To do this, add the following line below your function definition in the functions.php file:

add_action('wp_enqueue_scripts', 'my_custom_scripts');

This code registers a JavaScript file called “my-script” inside the theme’s “js” directory as a dependency on jQuery. After clearing all cache, you can check your site link in the browser to see if the console is reflecting the message “My script is loaded and running!” The queue process is working as expected.

How to Use wp_enqueue_script With jQuery

If your script needs jQuery, include it as a dependency like this, as shared below:

function my_jquery_scripts() {
    wp_enqueue_script('my-jquery-script', get_template_directory_uri() . '/js/my-jquery-script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_jquery_scripts');

How to Load Scripts in the Footer With wp_enqueue_script

Loading scripts in the footer can significantly speed up the loading time of your website, allowing HTML content to load before JavaScript runs. To achieve this, add true to the last argument of wp_enqueue_script. We will update the Script Enqueue Function. Here’s how we can modify the code from above:

function my_footer_scripts() {
    wp_enqueue_script('my-footer-script', get_template_directory_uri() . '/js/my-footer-script.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'my_footer_scripts');

 

In this example, “my-footer-script.js” will be loaded just before the closing </body> tag, ensuring that all HTML content is displayed first.

Adding Scripts and Stylesheets for the Frontend

Adding stylesheets and scripts to your WordPress site’s front end is essential for improving functionality and user experience. Here’s how to enqueue these assets efficiently.

Enqueue Scripts

To add scripts for the front end, use wp_enqueue_script, as shown above. This method ensures that scripts are loaded only when necessary.

Enqueue Stylesheets

You can also enqueue stylesheets using wp_enqueue_style:

add_action('wp_enqueue_scripts', 'my_custom_styles');

function my_custom_styles() {
    wp_enqueue_style('my-style', get_template_directory_uri() . '/css/my-style.css');
}

How to Use wp_enqueue_scripts to Specify Media for Styles

You can specify media types as shown below when enqueuing styles:

wp_enqueue_style('my-print_style', get_template_directory_uri() . '/css/print.css', array(), null, 'print');

Adding Scripts and Stylesheets for the Backend

Adding scripts and stylesheets, particularly for the WordPress admin area, is necessary to customize the backend experience.

Enqueuing Scripts and Styles in the Admin Area

Use the admin_enqueue_scripts hook for admin area scripts and styles. This is important for custom plugins or themes that need some functionality in the admin dashboard.

add_action('admin_enqueue_scripts', 'my_admin_styles');

function my_admin_styles() {
    wp_enqueue_style('my-admin-style', get_template_directory_uri() . '/css/admin-style.css');
}

Enqueueing Scripts and Styles for Specific Use Cases

You could need to approach differently based on the development context:

In Plugin Development

Always enqueue plugin-specific scripts/styles using relevant hooks when developing plugins

add_action('admin_enqueue_scripts', 'my_plugin_admin_styles');

function my_plugin_admin_styles() {
    wp_enqueue_style('plugin-admin-style', plugin_dir_url(__FILE__) . 'css/plugin-admin-style.css');
}

In Child Themes

Always ensure that child themes enqueue parent theme styles properly. You can add the following code block.

function my_child_theme_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}

add_action('wp_enqueue_scripts', 'my_child_theme_styles');

For External Libraries and CDNs

You can include external libraries directly by passing their URLs using the following code block:

function my_external_scripts() {
    wp_enqueue_script('external-library', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js', array(), null, true);
}

add_action('wp_enqueue_scripts', 'my_external_scripts');

In the WordPress Block Editor

Use specific hooks like enqueue_block_editor_assets for adding scripts/styles that are specific to the block editor only:

function my_block_editor_assets() {
    wp_enqueue_script('block-editor-script', get_template_directory_uri() . '/js/block-editor.js', array(), null, true);
}

add_action('enqueue_block_editor_assets', 'my_block_editor_assets');

In the WordPress Customizer

Use customize_controls_enqueue_scripts for customizer settings:

function my_customizer_assets() {
    wp_enqueue_style('customizer-style', get_template_directory_uri() . '/css/customizer.css');
}

add_action('customize_controls_enqueue_scripts', 'my_customizer_assets');

For the WordPress Login Form

Use login_enqueue_scripts to style login pages:

function my_login_styles() {
    wp_enqueue_style('login-style', get_template_directory_uri() . '/css/login.css');
}

add_action('login_enqueue_scripts', 'my_login_styles');

Conditional Enqueueing

Sometimes you will only want to add certain scripts or styles to specific pages. Use conditional tags like is_front_page() or is_single() inside your enqueue functions:

if (is_single()) {
    wp_enqueue_script('my-single-page-script');
}

Adding JS and CSS Code Inline

You can add inline scripts/styles using scripts with wp_add_inline_script.

Adding Scripts with wp_add_inline_script

This function lets you add inline JavaScript code after an enqueued script is added:

wp_add_inline_script('my-script', 'console.log("Hello World!");');

Adding Stylesheets with wp_add_inline_style

You can also add inline CSS styles this way

wp_add_inline_style('my-style', 'body { background-color: #f00; }');

Advanced Techniques

Now let’s look at some advanced techniques.

Using Dependencies and Translations

Managing dependencies is important to be sure that all scripts your custom script depends on have already loaded before they run. You can also pass PHP data along to the JavaScript file using wp_localize_script :

wp_localize_script('my-script', 'myData', array(
    'ajax_url' => admin_url('admin-ajax.php'),
));

Using Version Numbers

Including version numbers when enqueuing scripts and styles in WordPress is essential to control browser caching. If the file changes but the browser keeps using an older cached version, users might face issues with outdated functionality or styles. To prevent this, you can append a version number to your scripts and styles.

Here’s how to do it:

wp_enqueue_script(‘my-script’, get_template_directory_uri() . ‘/js/my-script.js’, array(), ‘1.0.0’, true); wp_enqueue_style(‘my-style’, get_template_directory_uri() . ‘/css/my-style.css’, array(), ‘1.0.0’);

Here’s what’s happening:

• ‘1.0.0’: This is the version number of the script or style. You can update it (e.g., to ‘1.1.0’) whenever the file changes to ensure browsers load the new version.
• Browser Caching: Including a version number appends it as a query string to the file URL (e.g., my-script.js?ver=1.0.0), forcing the browser to fetch the updated file instead of using a cached version.

Tips for Optimizing Your Enqueued Scripts and Styles

• Reduce HTTP Requests: Merge as many CSS or JS files as possible
• Load Asynchronously: Implement the async or defer attribute as needed
• Analyze Assets Periodically: Purge any orphaned or unneeded enqueued assets.

Final Thoughts

Proper enqueuing of scripts and styles is really important in running a high-performance WordPress site. Best practices such as these ensure that your website runs quite smoothly while properly supporting WordPress standards.

Cloudways hosting stands out as an excellent solution for whoever needs a reliable, high-performance hosting solution. Its cloud infrastructure is unique in that it offers multiple cloud providers such as DigitalOcean, Amazon AWS, and Google Cloud, thus allowing you to customize your environment to suit your needs without the complexities associated with typical hosting services.