Remove wordpress style.css from wp_head
The wp_head always adds many scripts including unused stylesheets. The wp_head is very essential because it is used by plug-ins to include the libraries and plug-in script.
So, you can’t remove the function but the unrequired stylesheet can be removed.
One of the styles you may want to get rid of it is style.css.
A wp_dequeue_style is able to remove the style.css from wp_head. The wp_dequeue receives the id sometimes it is known as a slug or handle.
The slug is the string of the first parameter that was passed in wp_enqueue_style.
I will show how to find the id of style.css.
But the question is how to use wp_dequeue_style to delete the default stylesheet?
This below is the answer for it.
How wp_dequeue_style removes style.css
I assume the stylesheet to be removed was created by the plugins.
If the plug-ins are enqueued in wp_enqueue_style, wp_head will output the link tag of style.css with the id attribute.
The id value is known as a handler, its format is id=mystyle-css
like this.
<link rel=’stylesheet’ id=’mystyle-css‘ href=”https://webappguides.com/wp-content/themes/webappguides/style.css”>
So, mystyle is a handler needed by a wp_dequeue_style to remove style.css
And to do that, perform the following steps.
Open the functions.php file
Add a function, the function is going to use wp_dequeue_style to delete the stylesheet.
This what I’m talking about.
1.function remove-style{
2.wp_dequeue_style(“mystyle”);
3.}
4.add_action(‘wp_enqueue_style’,’remove-style’,50);
Let me explain the codes above.
I call this function a remove-style.
1.function remove-style{
Call a wp_dequeue_style and passes a string, which is a handle that was used to register the style.css
2.wp_dequeue_style(“mystyle”);
Lastly, use add_action to activate the function.
add_action receives three parameters which are action hook, a function name to be executed and an integer.
Hence, the values of the add_action parameters are
- wp_enqueue_style
- remove-style
- 50
3.}add_action(‘wp_enqueue_style’,’remove-style’,50);
Requirements before trying to unregister style.css
The stylesheet must have been enqueued using wp_enqueued_style which will include style.css to wp_head.
To know if the style.css was added to wp_head the Html source is required to be checked.
So, check CSS scripts links tags in the head section.
If the stylesheet tag has an id with a format starting with the name(handler) then dash and followed by css the stylesheet would have been created by wp_head.
For example,
<link rel=’stylesheet’ id=’mystyle-css’ href=”https://webappguides.com/wp-content/themes/webappguides/style.css”> has an id with mystyle-css, this indicates the style.css was enqueued by wp_enqueued_style.
Removing all styles from wp_head
Sometimes, some stylesheets are not supposed to be loaded in some pages or categories.
So, you will have to exclude all styles from the page.
wp_enqueue_style and wp_deregister_style remove a specific css, just a single stylesheet.
But the global variable $wp_styles can access all the registered styles.
For example, I want to remove all stylesheet tags from page number two.
To unload the styles, another function has to be created in the functions.php file.
The function checks the specific page that you don’t want the styles to appear.
is_page function will check a required page to remove CSS styles.
Let me summarize this in the codes that exclude stylesheets from page 2.
1.function remove-every-css(){
2.if(is_page(2)){
3.global $wp_styles;
4.foreach($wp_styles->queue as $style){
5.wp_dequeue_style($wp_styles -> registered[$style] -> handler);
6.}
7.}
8.}
9.add_action( ‘wp_enqueue_scripts’, ‘remove-every-css’, 50 );
Line-1 checks if the current page is page number two.
If it is true line-3 declares glovbal variable $wp_styles. $wp_styles accesses all CSS available.
This means $wp_styles can retrieve any stylesheet enqueued by plugins.
Line-4 iterates queue objects using foreach loop. A queue object is required to retrieve the registered style.
Hence Line-5 wp_dequeue_style receives a handler object, this brings the id of each stylesheet.
The value of each stylesheet is obtained by the registered object. In order to fetch every handler value registered object has to be an array.
Line-9 executes remove-every-css function. add_action performs the task. It takes three parameters.
The first parameter is the wp_enqueue_scripts action hook, the second parameter is the name of a function to be executed.
The last parameter is the maximum number.
So, the function removes all stylesheets include style.css
Why some stylesheets have to be removed from wp_head?
wp_head automatically returns a bunch of scripts. A page may not use all javascript or CSS scripts.
So, removing stylesheets by dequeue is necessary rather than doing manually.
This is due to the following reasons.
Page speed optimization.
Unused stylesheets can cause a slow page loading that it is not good for the user experience.
It is important to exclude the unnecessary css scripts from a specific page if you care about the speed.
In reality, a page tries to load the scripts and stylesheets included. It takes time to complete the loading.
Removing duplicated styles.
Some plugins add a style hosted in a content delivery network like a bootstrap framework.
It happens when a theme has already included the stylesheet in some specific pages.
So, if you install a plugin it creates a duplicated style tag. This is not the best practice.
Hence, you will have to call wp_dequeue_style to delete the CSS from wp_head.
Avoiding page breaks
It happens when a plugin includes a stylesheet with the same name as the template stylesheet.
It is common for a developer to name a CSS file as a style.css.
A WordPress plugin can output the stylesheet with file name style.css.
This can cause an unintended change of the page appearance.
Plug-ins use wp_head to add scripts
Many wordpress plugins add the scripts by wp_enqueue_style or wp_register_style.
wp_enqueue_style includes the stylesheet to wp_head
It is hard to delete such a stylesheet because it is a WordPress plugin that includes the CSS scripts automatically
Therefore, you must use the WordPress function which is able to access wp_head.
That is wp_dequeue_style or wp_deregister_style.
Wrap-up
To remove a specific style, a wp_dequeue_style function is required to receive a handler parameter. The function won’t work if a style to be removed was never enqueued.
