WordPress adds lot of codes in the header section between <head> and </head> tags. These codes are not required for most WordPress blogs but still loads on each page load if not removed. Feeds are the best example which you may not need in the header. From version 5.9, WordPress also adds global styles inline and classic theme styles inline CSS. This is a big junk if you are not using and here is how you can remove them from your site’s header.
Finding Classic Theme Styles and Global Styles Inline CSS
By default, you do not have any option to remove these style codes as they come from /wp-includes/ folder. Classic theme inline style will be with few classes as given below but the global style inline is huge.
<style id='classic-theme-styles-inline-css'>
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
</style>Follow the below steps to view and find the CSS ID from your site’s source code:
- Open any page of your site in a browser tab.
- Right-click and select “View Page Source” or “Show Page Source” or similar option from the context menu.
- Check in the header section where you can find these styles in your site’s source code.
Another confusing aspect is that the classic theme styles will show a comment like /*! This file is auto-generated */ which may confuse you. Note down the CSS ID for both inline styles which should be like below:
- classic-theme-styles-inline-css
- global-styles-inline-css
Removing Global Styles Inline CSS
First, let us remove the global inline CSS.
- Login to your WordPress admin panel and navigate to “Appearance > Theme File Editor” section.
- Ensure your current active theme is selected and select functions.php from the files list.
- Copy and paste the following code at the bottom of file’s existing content.
/** Remove global inline styles */
add_action( 'wp_enqueue_scripts', function() {
wp_dequeue_style( 'global-styles-inline' );
}, 20 );- Click “Update File” button to save the changes.
Now, check the source code and you will see the global-styles-inline-css section is removed.
Removing Classic Theme Styles Inline CSS
The process is same as removing global styles from WordPress header.
- Go to WordPress admin panel and navigate to “Appearance > Theme File Editor” section.
- Select your active theme and then the functions.php file.
- Paste the following code snippet at the end of the file.
/** Remove classic inline style */
add_action( 'wp_enqueue_scripts', function() {
wp_dequeue_style( 'classic-theme-styles' );
}, 20 );- Click “Update File” button to save the changes.
Now, check the source code to confirm the classic theme inline style CSS section is removed.
Note: Instead of editing file from “Theme File Editor”, you can also use File Manager app from hosting account or remotely access server through FTP. You can find functions.php file under /public_html/wp-content/themes/<your-theme-name>/” section. You may also need to use File Manager or FTP if you have disabled file editing feature in admin panel for security reason.
Using Code Snippet Plugin or Child Theme
Whatsoever is the method you use to edit functions.php file, the changes will be wiped off when you update the theme. You have two options to avoid this.
- Use child theme and add code in its functions.php file.
- Use plugins like Code Snippets to insert PHP snippets without directly editing functions.php.
Using Perfmatters to Remove Global Styles Inline CSS
Perfmatters is the optimization plugin that helps to remove bloated content from WordPress header in addition to many other options. If you are already using this plugin, follow the below steps to remove the global styles.
- When you are in WordPress admin panel, go to “Settings > Perfmatters” section.
- Go to “General” section and turn off “Remove Global Styles” option.
- Click “Save Changes” button to remove the global CSS added by WordPress.
Through it works, it only helps to remove global inline styles and not the classic theme inline styles. Learn more about the complete features offered by Perfmatters plugin.
Caution Before Removing Global and Classic Theme Inline Styles
Whether you use Perfmatters plugin or use the code snippet, removing global/classic theme styles will cause the following problems:
- Button alignment will not work. For example, if you justify the content to center, the button will be always showing in left. Similarly social icon buttons may not work properly.
- Block’s background color will not work.
- Some blocks like pull quote, quote and gallery may not work as expected.
- Full site editing features may be affected.
- Duo tone filter function may not work.
If you are not using any of these features, then it is safe to remove global and classic theme inline styles. However, test the site layout thoroughly after removing the CSS. For example, below is the block having a background color but not showing on the published site due to the removal of global/classic theme styles.
Final Words
Adding inline CSS in the header section is not a good practice. You need to ideally use CSS file and insert it in header section using link tag with rel=”stylesheet” attribute. However, nowadays it is common to dump CSS in header using <style>…</style> tags to avoid render blocking and remove unused CSS warnings in Google PageSpeed Insights. But there should be an option in the admin panel to disable these stuffs inserted by core WordPress. Without that, you need to add code snippet in functions.php file or use plugins like Perfmatters to remove global styles inline CSS and classic theme styles inline CSS from WordPress site’s header.
Hi I have tried your solution, but I think there is a mistake removing global-styles.
The code what worked for me was this:
/** Remove global inline styles */
add_action( ‘wp_enqueue_scripts’, function() {
wp_dequeue_style( ‘global-styles’ );
}, 20 );
Note, that I have removed -inlinein style name.
Thanks very much.