I am trying to dequeue some scripts from non-relevant pages in wordpress. It is working fine with some (like contact-form-7) but not with other plugins. Is there any reasons these .js and .css files are still being loaded, despite being dequeued?
Code below is loaded via functions.php in child-theme. Relevant plugin is woo-variation-swatches.
add_action( 'wp_enqueue_scripts', 'custom_swatches_script_conditional_loading' );
function custom_swatches_script_conditional_loading(){
// Edit page IDs here
if(! is_page(39341) )
{
wp_dequeue_style('woo-variation-swatches'); // Dequeue CSS file.
wp_dequeue_style('woo-variation-swatches-theme-override'); // Dequeue CSS file.
wp_dequeue_style('woo-variation-swatches-tooltip'); // Dequeue CSS file.
wp_dequeue_script('woo-variation-swatches'); // Dequeue JS Script file.
}
}
You want to either hook it after wp_enqueue_scripts like wp_print_styles or simply try setting the priority of your add_action.
Looking at the plugin source code. It enqueue's the scripts with priority 15.
woo-variation-swatches.php line 103.
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ), 15 );
So really, anything priority higher than 15 should dequeue it like this :
add_action( 'wp_enqueue_scripts', 'custom_swatches_script_conditional_loading', 99 );
Related
I used a plugin to auto-generate a child theme and necessary files, and it did a good job...my new style.css loads after the parent and works great. the problem is that I have a plugin that requires heavy modification to it's injected divs, and it is a nightmare to overwrite anything because they !important the entire sheet, so I have to work around it.
I'm trying to enqueue my child-theme style.css after the plugin using a priority 99 thing I found on another thread here, and it isn't doing anything. All I did was append to the end of my child functions.php.
Potential issue 1: I did not remove the previous code to enquee this css file...do I need to do that? I thought maybe it would just re-enqueue it if it got to this new code at the end of the file. But maybe it does it once and ignores my code since it's already done.
Potential issue 2: Code error on my part. If my style.css is in the same folder as my functions.php I refer to the file as just 'style.css' right? I assume so because of relative locations because I was not sure if PHP required something that I am unaware of.
Here is my code that is not working.
wp_enqueue_style( 'child-css', get_template_directory_uri() . 'style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 99 );
I also saw this in my functions.php...it's weird because it looks like it's trying to enqueue a parent theme css file, but the relative location points to the child theme. Very confusing. it already had the same add_action priority thing in it from the thing I posted above, so I just change the number to 99, but it also didn't work. It was set to 10.
add_filter( 'locale_stylesheet_uri', 'chld_thm_cfg_locale_css' );
if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'font-awesome-5-free','saasland-dark-support','bootstrap','themify-icon','saasland-elementor','saasland-remove-animation','magnific-popup','eleganticons','saasland-wpd','saasland-main','saasland-elements','saasland-comments','saasland-footer','saasland-gutenberg' ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 99 );
Any tips? Thanks
get_template_directory_uri will always refer to the parent theme folder for assets.
get_stylesheet_directory_uri will refer to the "current" theme folder for assets (which could be the parent or the child, depending on where it is called).
If you are enqueueing style.css file for the child theme then,
wp_enqueue_style( 'child-css', get_stylesheet_directory_uri() . '/style.css' );
I use Elementor to build my website and there are a lot of functionalities that I'm not using but are none the less loaded on every page of my website. So I decided to dequeue the css files I'm not using in my child theme's functions.php and dequeue the css files which I'm only partially using, replacing them with a 'cleaned-up' version of the file.
This is how I wanted to start doing it:
function adg_dequeue_unnecessary_files() {
wp_dequeue_style( 'elementor-frontend' ); // remove Elementor's custom-frontend.min.css
wp_deregister_style( 'elementor-frontend' );
wp_register_style( 'new-elementor-frontend-css', get_stylesheet_directory_uri() . '/custom-frontend.min.css' ); // Purified replacement for Elementor's custom-frontend.min.css
wp_enqueue_style( 'new-elementor-frontend-css' );
}
add_action( 'wp_enqueue_scripts', 'adg_dequeue_unnecessary_files' );
But while the second part of my function adds my new custom css file nicely, the first part removes almost 10 other Elementor's css files along with the one I actually wanted to dequeue.
This is the list of files being dequeued:
custom-frontend.min.css
post-1501.css (this is the css file of the page I was looking at while making these changes)
frontend-legacy.min.css
post-1396.css (some global Elementor's css)
post-3556.css (this one and the 5 below are templates from a plugin I'm using across my website)
post-4473.css
post-5653.css
post-3489.css
post-3464.css
post-3458.css
I'm guessing it has something to do with the handler 'elementor-frontend' not being correct. The custom-frontend.min.css file had the 'elementor-frontend-css' ID in the link tag of the HTML code, so I was guessing the handler from there.
Does anyone know how I can dequeue only the custom-frontend.min.css file?
After that I wanted to dequeue these files as well:
animations.min.css
elementor-icons.min.css
global.css
frontend-legacy.min.css
swiper.min.js
I've been browsing this for a few days and I'm starting to feel lost, so any help will be much appreciated!
You can dequeue the Elementor CSS file with the use of wp_deregister_style and wp_dequeue_style. For this, you need to pass the CSS file handle name. You can use the below code to dequeue the Elementor plugin global.css file.
function dequeue_elementor_global__css() {
wp_dequeue_style('elementor-global');
wp_deregister_style('elementor-global');
}
add_action('wp_print_styles', 'dequeue_elementor_global__css', 9999);
Here elementor-global is the handle name of the global.css file. You can get any file handle name by stylesheet id. For example:
If any stylesheet id is the elementor-global-css then this file handle will be elementor-global
My understanding is that all Elementor frontend styles, e.g. your post-1234.css files, are children of 'elementor-frontend', which means if you unload it, none of them will load.
If you load your new, optimised frontend.min.css files with the same name, then it should work.
e.g.
function adg_dequeue_unnecessary_files() {
wp_dequeue_style( 'elementor-frontend' ); // remove Elementor's custom-frontend.min.css
wp_deregister_style( 'elementor-frontend' );
wp_register_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/custom-frontend.min.css' ); // Purified replacement for Elementor's custom-frontend.min.css
wp_enqueue_style( 'elementor-frontend' );
}
add_action( 'wp_enqueue_scripts', 'adg_dequeue_unnecessary_files' );
Also. Can you not just add your custom-frontend.min.css to the relevant location in your Child Theme and it will overwrite the Parent theme version by default?
This seems to work. Tested on a few pages and posts:
add_action( 'elementor/frontend/after_enqueue_styles', function() {
wp_deregister_style( 'elementor-frontend' );
wp_dequeue_style( 'elementor-frontend' );
wp_register_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/assets/css/custom-elementor-front-end.css' );
wp_enqueue_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/assets/css/custom-elementor-front-end.css' );
} );
We're using OceanWP but have problems with Simple-Line-Icons and other fonts loaded.
The fonts are loaded in OceanWPs Functions PHP. Example:
// Register simple line icons style
wp_enqueue_style( 'simple-line-icons', $dir .'third/simple-line-icons.min.css', false, '2.4.0' );
How can we de-enqueue/de-register them in our child theme so we keep it save from theme updates? Otherwise we'd have to bracket out the line on each update.
Thanks for any help in advance.
I've fixed it myself by adding custom function to deregister all unnessecary scripts in a snippet
/**
* Disable the Simple Line Icon scripts
*/
function my_enqueue_scripts() {
// Unregister JS files
wp_deregister_script( 'simple-line-icons' );
// Unregister CSS file
wp_deregister_style( 'simple-line-icons' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts', 99 );
This works for now, not sure though if this is the best route to take :-)
Here is a simple plugin. It use CSS code and importing it. The problem is that in the HTML file there are several external CSS files.
My goal is to compress them in one CSS file. Here's the code from the plugin, to my mind, it imports the CSS file.
I already copied the plugins CSS code and transferred it to main CSS file. But how to delete the code plugin so that it will never import its CSS file?
function addStylesAndScripts()
{
wp_enqueue_style('zvr-font', 'https://fonts.googleapis.com/css?family=Open+Sans');
wp_enqueue_style('zvr-style', trailingslashit(plugin_dir_url(__FILE__)) . 'assets/css/zvr-styles.css', array() , "1.0.3");
wp_enqueue_script('zvr-script', trailingslashit(plugin_dir_url(__FILE__)) . 'assets/js/zvr-script.js', array(
'jquery'
) , "1.0.3");
$localize = array(
'ajax_url' => admin_url('admin-ajax.php') ,
);
wp_localize_script('zvr-script', 'zvr_data', $localize);
}
}
To stop integrating the CSS file please write the following code in your functions.php :
function dequeueStyles() {
wp_dequeue_style('zvr-font');
wp_dequeue_style( 'zvr-style' );
}
add_action( 'wp_enqueue_scripts', 'dequeueStyles', 100 );
Hope this will help
You can dequeue those scripts, but you need to execute it after the plugin does it. For example, add this to your theme's functions.php
function dequeue_unneeded_css() {
wp_dequeue_style( 'zvr-style' );
}
add_action( 'wp_enqueue_scripts', 'dequeue_unneeded_css', 99999 );
I want to register a script using when my plugin is activated. So I placed:
register_activation_hook(__FILE__, 'register_script');
function register_script(){
wp_register_script('addjs','http://example.com/exmple.js');
}
Next I created a meta box and enqueue the script in the add_meta_boxes hook:
wp_enqueue_script('addjs');
Why that doesn't work? My JS file is just a simple alert function. However, why when I register my script using init hook, or other hook, my code works?
Registering the script doesn't actually enqueues the script. And that's what needs to be optimized.
register_activation_hook runs only once, registering your script there won't keep it registered in subsequent WordPress loads. Neither the action hook init is the place to do this. It's either wp_enqueue_scripts (frontend) or admin_print_scripts (backend), despite their names they're used to enqueue styles and scripts.
Loading your scripts only in specific places is a great practice. Once my admin area broke because a theme was loading its scripts/styles everywhere, not only on the frontend. Crappy code at its best.
The main difference is that if you register a script, you'll only need to call wp_enqueue_script($handle) in other places of your code. But if it's not the case, you can drop the register part and enqueue directly.
A small trick is to add your wp_enqueue_script and wp_enqueue_style inside your add_meta_box() callback, and it will only load together with the Meta Box. Works the same for Shortcodes.
Another option,
add_action( 'admin_menu', function()
{
$page = add_submenu_page( $args );
add_action( "admin_print_scripts-$page", 'your_callback' );
});
Or,
add_action( 'wp_enqueue_scripts', function() {
if( is_single() )
wp_enqueue_style( $args );
});
References:
- conditional-wp-enqueue-script-on-a-page
- when-to-use-add-actioninit-vs-add-actionwp-enqueue-scripts
- register-and-enqueue-conditional-browser-specific-javascript-files
- how-to-load-scripts-and-css-for-admins-only-when-editing-or-adding-posts