The Correct Way to Enqueue JavaScript and CSS Files in WordPress

2020-04-08 · Ryan · Post Comment

When developing WordPress themes, you often need to add CSS and JavaScript files. WordPress provides a robust script and style queuing system for developers, which helps prevent conflicts between plugins. This article introduces the correct method for adding JavaScript and CSS files in WordPress, which is especially useful for users just starting with theme and plugin development.

Many people are accustomed to directly writing <link> and <script> tags into the HTML. In practice, WordPress has built-in functions and methods for enqueuing scripts and styles that are more robust.

Using WordPress's built-in methods is more professional and offers better extensibility.

Correct Method for Enqueuing JS and CSS

Below is a standard example code to add to your theme's functions.php file to correctly enqueue scripts and styles on non-admin pages.

// WordPress correct method for enqueuing JS and CSS
function my_theme_scripts() {
    $theme_assets = get_template_directory_uri() . '/static';
    if (!is_admin()) {
        // 1. Enqueue CSS files
        wp_enqueue_style('main-style', get_stylesheet_uri(), array(), null, 'all');
        wp_enqueue_style('uikit-css', $theme_assets . '/css/uikit.css', array(), null, 'all');

        // 2. Enqueue JS files
        // First deregister any old version of jQuery (use with caution)
        wp_deregister_script('jquery');
        // Register and enqueue a custom jQuery version
        wp_enqueue_script('jquery', $theme_assets . '/js/jquery.min.js', array(), null, true);
        // Enqueue other JS files, set dependencies and load location (footer)
        wp_enqueue_script('uikit-js', $theme_assets . '/js/uikit.min.js', array('jquery'), null, true);
        wp_enqueue_script('clipboard-js', $theme_assets . '/js/clipboard.min.js', array(), null, true);
        wp_enqueue_script('theme-main-js', $theme_assets . '/js/index.js', array('jquery'), null, true);
    }
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

Code Explanation and Best Practices

1. Function Hook: Use the wp_enqueue_scripts action hook to load resources on the front end. This is the standard, recommended WordPress practice.

2. Core Functions:

wp_enqueue_style(): Used to load CSS files.
wp_enqueue_script(): Used to load JavaScript files.

3. Function Parameters Explained (using wp_enqueue_script as an example):

First parameter (handle): A unique name for the script, e.g., 'jquery'.
Second parameter (path): The full URL to the script file.
Third parameter (dependencies): An array defining other script handles this script depends on. For example, array('jquery') means this script requires jQuery to load first.
Fourth parameter (version): Optionally specify a file version, often used for cache control. Passing null uses the WordPress version; false adds no version.
Fifth parameter (in_footer): true loads the script just before </body> (in the footer); false loads it in the <head>. JS files are typically loaded in the footer to improve page load speed.

4. Important Notes:

Use wp_deregister_script('jquery') with caution. Only do this if you are certain you need to replace the core jQuery version, as it may break plugins that depend on it.
Assign unique handle names to your scripts and styles to avoid conflicts with other plugins.
Use get_template_directory_uri() to get the parent theme directory URL and get_stylesheet_directory_uri() for the child theme directory URL.
The last parameter for CSS files is the media query, e.g., 'all', 'screen'.

Using the method above, you can standardize and safely enqueue CSS and JavaScript files in your WordPress theme, taking full advantage of WordPress's dependency management and queuing system.

Correct Method for Enqueuing JS and CSS

Code Explanation and Best Practices

Post a Comment Cancel reply