Adding External Stylesheets & Scripts to WordPress Sites

Introduction

As developers at Classic City, maintaining a consistent and organized approach when incorporating external stylesheets and scripts into WordPress sites is crucial for optimal performance, maintainability, and scalability of our projects. This article outlines the recommended approach for enqueuing external assets and why our standard is to follow this practice.

The Recommended Approach: wp_register_style and wp_enqueue_style

Why Register First?

When adding external stylesheets to a WordPress site, it’s best practice to use the wp_register_style function before enqueuing them. Registration allows us to define the details of the asset, such as dependencies, versioning, and other attributes, separately from the actual enqueuing process. This separation enhances code organization and provides a centralized location to manage asset details.

The Role of wp_enqueue_style

Once a style has been registered, we use the wp_enqueue_style function to actually load it onto the site. Enqueuing ensures that the stylesheet is included only if it hasn’t been loaded before, preventing duplicate loading and potential conflicts.

Now, let’s apply this principle to a practical example:

add_action('wp_enqueue_scripts', 'ccc_enqueue_styles');

function ccc_enqueue_styles() {
     // Register and enqueue WEB.CSS - Main stylesheet for front-end styles
     wp_register_style('classic-city-web', get_template_directory_uri() . '/css/web.css', false, filemtime(get_template_directory() . '/css/web.css'));
    wp_enqueue_style('classic-city-web');

     // Register and enqueue GOOGLE FONTS
     wp_register_style('classic-city-google-fonts', 'https://fonts.googleapis.com/css2?family=Castoro:ital@0;1&family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Montserrat:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap', false);
    wp_enqueue_style('classic-city-google-fonts');
}

This example demonstrates how we register and enqueue external stylesheets using the wp_register_style and wp_enqueue_style functions. Notice the clear separation of registration and enqueuing for each stylesheet.

The Role of wp_enqueue_script

When dealing with external scripts in WordPress, a similar approach is recommended. Register the script using wp_register_script before enqueuing it with wp_enqueue_script. This practice ensures a clean and organized workflow, enhancing code maintainability and preventing conflicts.

add_action('wp_enqueue_scripts', 'ccc_enqueue_scripts');

function ccc_enqueue_scripts() {
    // Register and enqueue FONTAWESOME - Font Awesome kit
    wp_register_script('classic-city-fontawesome', 'https://kit.fontawesome.com/2d253b2e1c.js', array(), null, true);
    wp_enqueue_script('classic-city-fontawesome');

    // Register and enqueue MAIN.JS - Main JavaScript file
    wp_register_script('classic-city-main', get_template_directory_uri() . '/js/main.js', array('jquery'), filemtime(get_template_directory() . '/js/main.js'), true);
    wp_enqueue_script('classic-city-main');
}

This snippet demonstrates how we apply the same principle to scripts, using wp_register_script and wp_enqueue_script functions for a well-organized and maintainable codebase.

---

Applying the Approach in Practice

Let’s put that together to take a look at a practical example of how we apply this approach in our WordPress projects at Classic City.

add_action('wp_enqueue_scripts', 'ccc_enqueue');

function ccc_enqueue() {
    // WEB.CSS - Main stylesheet for front-end styles
    wp_register_style('classic-city-web', get_template_directory_uri() . '/css/web.css', false, filemtime(get_template_directory() . '/css/web.css'));
    wp_enqueue_style('classic-city-web');

    // GOOGLE FONTS
    wp_register_style('classic-city-google-fonts', 'https://fonts.googleapis.com/css2?family=Castoro:ital@0;1&family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Montserrat:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap', false);
    wp_enqueue_style('classic-city-google-fonts');

    // FONTAWESOME - Font Awesome kit
    wp_register_script('classic-city-fontawesome', 'https://kit.fontawesome.com/2d253b2e1c.js', array(), null, true);
    wp_enqueue_script('classic-city-fontawesome');

    // MAIN.JS - Main JavaScript file
    wp_register_script('classic-city-main', get_template_directory_uri() . '/js/main.js', array('jquery'), filemtime(get_template_directory() . '/js/main.js'), true);
    wp_enqueue_script('classic-city-main');
}

This snippet demonstrates how we register and enqueue external stylesheets and scripts using the wp_register_* and wp_enqueue_* functions, following the Classic City naming convention. Notice the separation of registration and enqueuing for each asset, providing a clear and maintainable structure.

---

Conclusion

By adhering to the wp_register_* and wp_enqueue_* approach, we ensure a standardized and efficient way of handling external assets in our WordPress projects at Classic City. This approach not only enhances code organization but also streamlines asset management, making our development workflow more robust and scalable. Developers at Classic City are expected to follow this practice consistently for a cohesive and maintainable codebase across all projects.