WordPress – Using wp_enqueue_scripts On A Simple Way

If you want to load a different stack of JavaScripts and Stylesheet for the development- and live environment, use this code snippet in your functions.php which is located in your active theme folder. At first, you begin to define the stack with a selection of JavaScripts and Stylesheets which are to be loaded in any case. Then you define the other JavaScripts and Stylesheets in the specified areas. These areas are distinguished constant we create in the wp-config.php which is located in your WordPress root directory.

Here we go…

// wp-config.php
...
define( 'IS_LIVE', ( strpos( $_SERVER['HTTP_HOST'], 'rschu.me' ) !== false )? true:false );
...

Here we determine whether the $_SERVER['HTTP_HOST'] contains my domain rschu.me and define the constant with true when the domain was found and false if not. Replace it with your own domain.

// functions.php
...
add_action( 'wp_enqueue_scripts', function()
{
    // Create a stack of JavaScripts and Stylesheets which are to be loaded in any case
    // INFO: Keep the order of the files in mind!
    $asset_array =
        array(
            array(
                'path'   => 'semantic.css',
            ),
            array(
                'path'   => 'semantic.min.js',
                'depth'  => array('jquery'),
            ),
            array(
                'path'    => 'main.js',
                'depth'   => array('jquery'),
                'globals' => true
            )
        );

    if( defined('IS_LIVE') AND IS_LIVE )
    {
        $asset_array = array_merge( $asset_array, array(
                array(
                    'path' => 'main.min.css',
                ),
            ));
    }else{
        $asset_array = array_merge( $asset_array, array(
                array(
                    'path'  => 'less-complete.js',
                    'depth' => array('jquery'),
                ),
                array(
                    'path' => 'main.min.less',
                )
            ));
    }

    foreach( $asset_array as $asset )
    {
        // Define default values if a key is missing
        extract(array_merge(array(
            'version' => null,
            'depth'   => null,
            'footer'  => false,
            'globals' => false
        ), $asset ));

        // The 'sanitize_title()' is only for Just in case...
        $slug = sanitize_title( basename( $path ) );

        // Extract the extension from the file
        $ext = pathinfo( $path, PATHINFO_EXTENSION );

        // Check if the file really exists. Otherwise skip it
        if( @file_exists( get_template_directory().'/'.$ext.'/'. $path ) )
        {
            if( $ext === 'js' )
            {
                // Register JavaScript files
                wp_register_script( $slug, get_template_directory_uri().'/'.$ext.'/'. $path, $depth, $version, $footer );
            }else{
                // Register StyleSheets (CSS/LESS...)
                wp_enqueue_style( $slug, get_template_directory_uri().'/'.$ext.'/'. $path, $depth, $version, $footer );
            }

            // If you need some global js-variables, define them here
            if( $globals and $ext === 'js' )
            {
                wp_localize_script( $slug, 'globals', array(
                    'site_url' => get_site_url(),
                    'theme_directory' => get_template_directory_uri()
                    ...
                ));
            }

            wp_enqueue_script(  $slug );
        }

    }

});
...
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn