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.
Leave a Reply