Skip to content
Terra Docs

Hi Backend Developer

In WordPress, the best way to add custom scripts and styles is by using the wp_enqueue_script and wp_enqueue_style functions. These functions ensure that your scripts and styles are loaded properly and avoid conflicts with other plugins or themes.

Basic Example of Enqueuing Styles and Scripts

Here’s a simple example of how to enqueue both a stylesheet and a JavaScript file:

<?php
// Hook the enqueue function to the wp_enqueue_scripts action
function my_theme_enqueue_scripts() {
    // Enqueue a stylesheet
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );


    // Enqueue a custom stylesheet located in your theme's CSS folder
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' );


    // Enqueue a custom JavaScript file located in your theme's JS folder
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

Webpack or Vite config

In our project, we utilize modern toolbundlers like Webpack or Vite to manage our assets. The configuration dynamically differentiates between development and production environments, ensuring that resources are correctly loaded depending on the context.

In the development environment, Vite’s Hot Module Replacement (HMR) is used to inject live-reloading scripts. In production, minified and hashed assets are loaded from the build directory, You can check it here

Here’s an example of how we handle scripts and styles based on the environment:

<?php


/**
 * Enqueue scripts and styles based on the environment
 *
 * This code snippet is responsible for enqueuing the project's JavaScript and CSS files,
 * with different behaviors depending on whether the environment is in development or production mode.
 *
 * 1. If `IS_VITE_DEVELOPMENT` is set to `true` in local-variable.php, the function assumes the environment is in development mode.
 *    - It injects a script tag into the `<head>` of the document for Vite's Hot Module Replacement (HMR) feature,
 *      which enables live reloading during development. The script points to the local Vite development server.
 *
 * 2. If `IS_VITE_DEVELOPMENT` is `false` in local-variable.php, indicating a production environment:
 *    - It enqueues the minified and hashed JavaScript file from the `dist` directory. The `hash` in the filename
 *      is replaced by the actual hash generated during the build process, ensuring cache busting.
 *    - A filter is applied to modify the script tag, setting its `type` attribute to `module` for ES module compatibility.
 *    - The corresponding CSS file is also enqueued, with a similar hash in its filename for cache busting.
 *
 * @hook wp_enqueue_scripts  This hook runs when scripts and styles are enqueued in WordPress.
 */


add_action( 'wp_enqueue_scripts', function() {


    if (defined('IS_VITE_DEVELOPMENT') && IS_VITE_DEVELOPMENT === true) {
        function vite_head_module_hook() {
            echo '<script type="module" crossorigin src="http://localhost:9090/src/js/Project.js"></script>';
        }
        add_action('wp_head', 'vite_head_module_hook');
    } else {
        wp_enqueue_script('project-build', get_template_directory_uri() . '/dist/Project.'.hash.'.js', [], null, true);
        add_filter('script_loader_tag', function ($tag, $handle, $src) {
            if ($handle === 'project-build') {
                $tag = '<script type="module" src="' . esc_url($src) . '"></script>';
            }
            return $tag;
        }, 10, 3);
        wp_enqueue_style('project-build',  get_template_directory_uri() . '/dist/Project.'.hash.'.css' );
    }
});


?>