Add or Customize / Replace JS and CSS Files with WP Clips

Aug 13 2016 ·Written by Jon Barratt

The custom Clip installed with WP Clips contains three custom files for adding functions, styles and jQuery. But, what if you want to add a new JS or CSS file, or customize / replace a theme or plugin’s existing file (e.g. responsive-menu.js or responsive-menu.css)?

Note: You can easily override individual class selectors within the Clip‘s custom-style.css file. However, when applying significant customization to small or accessory stylesheets, it is better practice to replace the file.

Adding a New JS or CSS File

Create a new file within the Clip and enqueue it via the Clip‘s custom-functions.php file. For example, if including both new-script.js and new-style.css files, you would add the following –

add_action( 'wp_enqueue_scripts', 'clip_new_scripts_styles' );
function clip_new_scripts_styles() {
    wp_enqueue_script( 'clip-new-script', content_url( 'clips/clip-custom/new-script.js' ), array( 'jquery' ), '', true );
    wp_enqueue_style( 'clip-new-style', content_url( 'clips/clip-custom/new-style.css' ), array(), '' );
}

The above code assumes that the new files are added direct to the custom Clip’s root folder.

Customizing / Replacing an Existing JS or CSS File

Copy the original file to the Clip folder and apply the required customizations, then dequeue the original file (via its $handle) and enqueue the new file via custom-functions.php. For example, if customizing a theme’s responsive-menu.js and responsive-menu.css files, you would add the following –

add_action( 'wp_enqueue_scripts', 'clip_new_scripts_styles' );
function clip_new_scripts_styles() {
    wp_dequeue_script( 'responsive-menu-script' );
    wp_enqueue_script( 'clip-new-scripts', content_url( 'clips/clip-custom/js/responsive-menu-copy.js' ), array( 'jquery' ), '', true );
    wp_dequeue_style( 'responsive-menu-style' );
    wp_enqueue_style( 'clip-new-styles', content_url( 'clips/clip-custom/css/responsive-menu-style.css' ), array(), '' );
}

The above code assumes the $handles for the original theme files are responsive-menu-script and responsive-menu-style; and that the new files are added to new or existing /js and /css folders within the custom Clip.

Refer to the links below for  wp_enqueue_script() and wp_enqueue_style() function parameters and syntax –

https://developer.wordpress.org/reference/functions/wp_enqueue_script/
https://developer.wordpress.org/reference/functions/wp_enqueue_style/

Note: If you are building a Precoded Clip, use the clip-functions.php file instead of custom-functions.php and adjust file paths accordingly.