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', plugins_url( 'new-script.js', __FILE__ ), array( 'jquery' ), '', true ); wp_enqueue_style( 'clip-new-style', plugins_url( 'new-style.css', __FILE__ ), array(), '' ); }
The above code assumes that the new files are added direct to the 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', plugins_url( 'js/responsive-menu-copy.js', __FILE__ ), array( 'jquery' ), '', true ); wp_dequeue_style( 'responsive-menu-style' ); wp_enqueue_style( 'clip-new-styles', plugins_url( 'css/responsive-menu-style.css', __FILE__ ), 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 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.
Leave a Reply