f w h

WordPress Development Environment Scripts

It is useful to have certain items or scripts available to you while developing that you may not want present in production. Forgetting to remove these items before you go to production can be dangerous.

When developing with WordPress, a short script in your functions.php can add these tools when you’re developing locally, but hide them when live.

Create your scripts in a separate file in the js directory of your theme. I called mine dev.js. Then, add the following to your functions.php file:


function add_dev_class( $classes ) {
 
    $classes[] = 'dev';
     
    return $classes;
     
}

function enqueue_dev(){

    wp_register_script( 'Dev', get_stylesheet_directory_uri() . '/js/dev.js', [ 'jquery' ], NULL, true );
    wp_enqueue_script( 'Dev' );

}

// Here comes the magic
if( $_SERVER[ 'SERVER_NAME' ] == "localhost" ){

    add_filter( 'body_class', 'add_dev_class' );
    add_action( 'wp_enqueue_scripts', 'enqueue_dev' );

}

The first function will add a class called “dev” to the body tag, so you can hook it with JavaScript or add development-centric CSS styles.

The second function will enqueque the dev.js script file.

Finally, the conditional at the end will check what the current base address is and if it matches, will execute the functions. I’ve used localhost here, but you can use whatever your development domain is.

I use this to load a variation of my viewport size bookmarklet that sits at the bottom of the window with a plethora of information to help inform my decisions when designing for responsiveness.