Include different CSS and JS files based on WP_DEBUG

It is always a good idea to minimize the HTTP Requests for your website. One way to achieve this is to concatenate your asset files. There are numerous tools to concatenate your CSS and JavaScript files. If you want to do that for yourself, you can use a JavaScript task runner or you can simply use a plugin to do that.

Wasting other's time

If you are developing a website and you are working with a team loading the concatenated files during the development process of the project might not be a good idea. There are times when you need help or you just want ask somebody's opinion. Sometimes a quick look at the CSS or JavaScript file is enough for your teammate to figure something out or to share his/her view; other times they might need to set up the project.

You are wasting other people's time if you make them to do some extra work to view the readable version of your code.

On the other hand, we are forgetful. If you don't have or you are not using a deployment checklist you might forget to load the concatenated files for the live website. This kinds of small mistakes happen all the time. To avoid this including from the beginning the concatenated files might seem a plausible idea.

Conditionaly loading based on a variable

There is no good reason for not turning the debug mode on for WordPress when you are developing a website. WP_DEBUG can be used to trigger the "debug" mode in WordPress. The WP_DEBUG constant is already defined in the wp-config.php file since WordPress 2.3.1., it means you only have to set it to true.

By simply checking the value of WP_DEBUG you can decide if you want to enqueue the concatenated and minified version of your assets or load the development version.

if ( ! defined( 'WP_DEBUG' ) || false === WP_DEBUG ) {

    // If for some reason WP_DEBUG is missing or it is set to false

} else {

    // If WP_DEBUG is set and the value of it is true

}

A full example might look like this:

add_action( 'wp_enqueue_scripts', 'enqueue_theme_css_javascript' );

function enqueue_theme_css_javascript() {

    /*
     * CSS and JavaScript files for the development version of the website
     */

    // CSS files

    wp_register_style( 'normalize', get_theme_file_uri( '/assets/css/normalize.css' ), [], '5.0' );

    wp_register_style( 'fancybox', get_theme_file_uri( '/assets/css/fancybox.css' ), [], '2.1.5' );

    // other CSS files …

    wp_register_style(
        'theme',
        get_theme_file_uri( 'assets/css/main.css' ),
        array(
            'normalize',
            'fancybox',
        )
    );

    // JavaScript files

    wp_register_script( 'html5', get_theme_file_uri( '/assets/js/html5.js' ), [], '3.7.3' );

    wp_register_script( 'skip-link-focus-fix', get_theme_file_uri( '/assets/js/skip-link-focus-fix.js' ), [], '1.0' );

    // other JavaScript files …

    wp_register_script(
        'theme',
        get_theme_file_uri( '/assets/js/main.js' ),
        array(
            'jquery',
            'html5',
            'skip-link-focus-fix',
        )
    );

    /*
     * Concatenated and minified version of CSS and JavaScript files for the live version of the website
     */

    wp_register_style( 'theme-dist', get_theme_file_uri( '/dist/css/theme.css' ) );

    wp_register_script(
        'theme-dist',
        get_theme_file_uri( '/dist/js/theme.js' ),
        [
            'jquery',
        ]
    );

    /*
     * Enqueue CSS and JS files based on WP_DEBUG constant
     */

    if ( ! defined( 'WP_DEBUG' ) || false === WP_DEBUG ) {

        wp_enqueue_style( 'theme-dist' );
        wp_enqueue_script( 'theme-dist' );

    } else {

        wp_enqueue_style( 'theme' );
        wp_enqueue_script( 'theme' );

    }

}

Did you find this article useful, interesting or you want to chat about this topic? Send me a mail and let me know. In case you found some spelling or grammar mistakes let me know that too.