Theme Development in WordPress: Enqueuing Scripts and Styles

When developing a WordPress theme, one of the first tasks is to ensure that our site’s scripts and styles are properly loaded. This is where the process of enqueuing comes in. In this blog, We’ll walk through why and how to enqueue styles and scripts in WordPress theme development.

What is Enqueueing?

Enqueueing can be thought as managing the loading of our scripts and stylesheets from one central place: the functions.php file. Instead of manually adding <link> and <script> tags to every HTML file, WordPress generates them for us based on simple instructions we provide.

Enqueueing helps us in two key ways:

Managing dependencies and order: The order in which stylesheets and scripts load matters. For example, if we need to make sure some third-party JavaScript library / CSS loads before some main.js file, we can ensure this using enquequing.
Conditional loading: Not every page needs every script or stylesheet. The enqueue system lets us conditionally load resources only on specific pages.

Enqueuing Scripts and Styles

WordPress gives us two action hooks and two functions to work with the Enqueue System:

wp_enqueue_scripts: This action hook lets us enqueue stylesheets and scripts on the front-end of our WordPress site (homepage, blog posts, etc.). This is what we’ll focus on.
admin_enqueue_scripts: This action hook lets us enqueue stylesheets and scripts on the back-end (the WordPress admin dashboard). It’s useful if we need to customize the WordPress admin area.
wp_enqueue_style(): This function registers and enqueues stylesheets. It generates the necessary <link> tag.
wp_enqueue_script(): This function registers and enqueues scripts. It generates the necessary <script> tag.

Using wp_enqueue_style()

The wp_enqueue_scripts action hook relies on the wp_head action hook.

wp_enqueue_style( $handle, $source, $dependencies, $version, $media );

$handle: A unique name for the stylesheet.
$source: The URL or path to the stylesheet file.
$dependencies: An array of other stylesheets that must be loaded before this one.
$version: The version number of the stylesheet
$media: Specifies the media type for the stylesheet

To create a correct URL to our theme’s directory, We use the get_stylesheet_directory_uri() function. This returns the full URL of the active theme directory.

<?php trailingslashit(get_stylesheet_directory_uri()) . 'assets/css/mystyles.css'; ?>

To enque this file we can do:

wp_enqueue_style(
   'mystyles',
   get_stylesheet_directory_uri() . '/assets/css/mystyles.css',
   array(),
   false,
   'all'
);

Using wp_enqueue_script()

Similar to the styles we have the wp_enqueue_script() function to enqueue scripts.

wp_enqueue_script( $handle, $source, $dependencies, $version, $in_footer );

$handle: A unique name for the script.
$source: The URL or path to the script file.
$dependencies: An array of other scripts that must be loaded before this one.
$version: The version number of the script.
$in_footer: A boolean (true or false) to specify whether the script should be loaded in the footer (true) or the header (false).

wp_enqueue_script(
        'main-js',
        get_stylesheet_directory_uri() . '/assets/js/main.js',
        array(),
        '1.0.0',
        true
    );

Putting these together and using wp_enqueue_scripts hook:

function enqueue_styles_and_scripts() {
    wp_enqueue_style(
   'mystyles',
   get_stylesheet_directory_uri() . '/assets/css/mystyles.css',
   array(),
   false,
   'all'
);

wp_enqueue_script(
        'main-js',
        get_stylesheet_directory_uri() . '/assets/js/main.js',
        array(),
        '1.0.0',
        true
    );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles_and_scripts' );

Conclusion

In conclusion, properly enqueuing scripts and styles in our WordPress theme is crucial for both performance and compatibility. By using wp_enqueue_style() and wp_enqueue_script(), we ensure that our resources are loaded efficiently, without conflicts, and with proper version control. This practice not only helps optimize our site but also keeps it scalable and maintainable in the long run.

Lakshyajeet.