When developing on WordPress one of the first things you need to learn about is how to add Javascript and Stylesheets to your page correctly. If you're new to WordPress you can find out more information about this in one of my previous articles. Add Stylesheets To WordPress Correctly This article goes over the different ways you can add stylesheets to the page and which one you should be using.
- You can add the stylesheet link tag directly on the page using the wp_head action
- You can add the stylesheet link tag directly to the page anywhere.
- You can use the wp_enqueue_scripts action to add a handle to the wp_enqueue_style.
Well the correct way and the way you should always add stylesheets to your WordPress site is to use the wp_enqueue_style function. There is another function in WordPress that does the opposite of this and will help clean up with site by removing Javascript or stylesheets added to your page by plugins or your theme. This is one of the problems I've found with using WordPress plugins, there are 10,000s of plugins on the plugin directory all do lots of different things to your site. If any of these plugin add Javascript or stylesheets to your web page it could be adding files that your website doesn't necessarily need. For example if you're loading jQuery from a CDN you could download a plugin that uses the WordPress built-in jQuery meaning your page will load 2 versions of jQuery. Depending on the amount of plugins you have installed on your site this could massively slow down your page loading speeds. For example if one of your plugins is loading a custom stylesheet that styles tables like the following.
add_action( 'wp_enqueue_scripts', 'add_custom_table_styles' );
/**
* Add stylesheet to the page
*/
function add_custom_table_styles() {
wp_enqueue_style( 'custom-table-css', plugins_url('table-style.css', __FILE__) );
}
This will override all of your styles for tables on your site and could conflict with the style of your theme. Or what if it adds a Javascript file to your page that adds an annoying pop-up to your page, when you install the plugin this will be added to your site. So you have to be be careful with what the plugins are exactly doing whenever you install a third party plugin. We can either disable these types of plugins but they might give you some functionality that's exactly what you need, so instead of disabling the plugin you could just dequeue these stylesheets or JavaScripts that you don't want loading on the site.
Dequeue JavaScript or Stylesheet
To dequeue Javascript or Stylesheets then you can do so using the following code. This will run on the wp_enqueue_scripts action with a priority of 100 which is after the assets have been queued to be display on the screen, we can come into this action and dequeue the styles.
/**
* Dequeue JavaScript or Stylesheet.
*/
function pu_dequeue_script()
{
// Run the dequeue script with the handle of the JavaScript file
wp_dequeue_script( $handle );
// Run the dequeue style with the handle of the CSS file
wp_dequeue_style( $handle );
}
add_action( 'wp_enqueue_scripts', 'pu_dequeue_style', 100 );
Discover The Handles
To be able to dequeue the scripts and styles you first need to know the handle used in WordPress which is assigned to a file to do this you need to look inside the wp_styles() object and the wp_scripts() object to discover what has been registered and what has been queued.
function discover_scripts()
{
// Registered styles
var_dump(wp_styles()->registered);
// Queued styles
var_dump(wp_styles()->queue);
// Registered scripts
var_dump(wp_scripts()->registered);
// Queued scripts
var_dump(wp_scripts()->queue);
}
add_action( 'wp_enqueue_scripts', 'discover_scripts', 100 );
The KEY of these handles will be the name of the handle you need to use to dequeue the styles or scripts now you can just select the handles from this list and dequeue the ones that you don't want to load on your site anymore.