How to remove embedded CSS code in WordPress

Posted in Tutorials

The default Twenty Thirteen WordPress themes outputs some embedded css to your WordPress pages. In this tutorial, we will remove these embedded CSS and move them into the theme’s style.css.  While we are working with the Twenty Thirteen theme in this tutorial, the technique can be applicable to other themes as well.

Some reason to move embedded CSS to style.css is performance and SEO.  The style.css is often cache and therefore we don’t have to load the embedded styles for each page.  By moving the CSS out of the page code and into style.css, you de-clutter the page code making less code and more text content giving a better text-to-code ratio that search engine sometimes prefer.

However, moving the CSS there is a price to pay.  There CSS are embedded in order to enable customization of the theme.  If you move it, you no longer can customize it.

Remove Embedded CSS Generated By Theme

Let’s start with the Twenty Thirteen theme.

1. Make a backup of your files in case something goes wrong

2. Go to your front page
3. View the page source (Right Click->View Page Source)
4. At the top of the code (~line 38+) you will find…

5. Copy those four lines (without the <style> tags) from the source of your front page.

6. Go to your Admin Panel

7. Navigate to Appearance -> Editor
8. Select (from the right side column) Stylesheet (style.css)
9. Scroll to the bottom of the file and paste the 4 lines you previously copied
10. When you’re done, click Update File
11. Now, to remove the generated inline code…   Doing a bit of debugging, we find that the embedded CSS is generated by the theme. Go to Appearance -> Customize -> Header Image

12. Click Remove Image

13. Click Save and Publish.

14. Check that the front page looks unchanged and the inline style is gone.

We have just “hard-coded” the header image into the style.css.  The drawback is that you can not customize the header image via the “Customize Theme” in the Dashboard -> Appearances anymore.

Remove Embedded Styles Generated by WordPress Core

This following section may be a bit complex technically.  Feel free to skip if you like.

You might find another embedded styles generated by the Recent Comments Widget.  That the embedded CSS here…

1. Go to your front page

2. View the page source (Right Click->View Page Source)

3. At the top of the code you will find the style
4. Copy that line from the source of your front page
5. Go to your Admin Panel
6. Navigate to Appearance -> Editor
7. Select (from the right side column) Stylesheet (style.css)
8. Scroll to the bottom of the file and paste the styles you previously copied:

.recentcomments a { display:inline !important; padding: 0 !important; margin: 0 !important; }

9. When you’re done, click Update File

10. To remove the embedded style code is a bit more difficult because we have to figure out which piece of code is generating this CSS.  Search all files in wp-content folder for “.recentcomments”.  Nope, not in there.  So search all of wp-include folder and we find this code in /wp-include/default-widgets.php …

This function recent_commetns_style() is generating the embedded CSS.  The problem is that this is in file default-widgets.php that is in wp-include, which is part of WordPress core.  The general rule is to not touch WordPress core otherwise your customization will be lost in the new WordPress update.

So we have to figure out another way to remove this code.   Searching more, we find that recent_comments_style() is called only in one place.  Here i the same default-widgets.php file in the constructor of the class WP_Widget_Recent_Comments.

We see that recent_comments_style() function is invoked in the wp_head event as called by the constructor of the WP_Widget_Recent_Comment class.  We need to do a remove_action to reverse this add_action.

Do this remove_action after the add_action is register, but before the recent_comments_style() function is triggered.  Experimenting with debug exit() messages at various points in the code and looking at the Action Order reference, we find that putting …

add_action('wp_enqueue_scripts', 'remove_embedded_style');

at the bottom of the functions.php file will do the trick.  Now we need to define the remove_embedded_style function with the remove_action call.  Place this at the bottom of functions.php

function remove_embedded_style() {
 remove_action('wp_head', array($this, 'recent_comments_style'));
}

We made the remove_action parameter the same as the add_action parameters.  However, the $this will not work when in the functions.php.  We need to find out what $this is.  Placing a print_r($this) before the add_action line will reveal that to us.  $this is a WP_Widget_Recent_Comments object …

WP_Widget_Recent_Comments Object
(
    [id_base] => recent-comments
    [name] => Recent Comments
    [widget_options] => Array
        (
            [classname] => widget_recent_comments
            [description] => The most recent comments
        )

    [control_options] => Array
        (
            [id_base] => recent-comments
        )

    [number] => 
    [id] => 
    [updated] => 
    [option_name] => widget_recent-comments
    [alt_option_name] => widget_recent_comments
)

Search wp-include for “WP_Widget_Recent_Comments” and we find …

register_widget('WP_Widget_Recent_Comments');

Search for “register_widget” and we find …

function register_widget($widget_class) {
  global $wp_widget_factory;

  $wp_widget_factory->register($widget_class);
}

Searching “function register(“, we found the method …

class WP_Widget_Factory {
 var $widgets = array();

function WP_Widget_Factory() {
 add_action( 'widgets_init', array( $this, '_register_widgets' ), 100 );
 }

function register($widget_class) {
 $this->widgets[$widget_class] = new $widget_class();
 }
...
}

This means that the global $wp_widget_factory has something like

$this->widgets[$widget_class]

The solution is to replace $this with …

add_action('wp_enqueue_scripts', 'remove_embedded_style');
function remove_embedded_style() {
 global $wp_widget_factory;
 remove_action('wp_head', array($wp_widget_factory->widgets['WP_Widget_Recent_Comments'], 'recent_comments_style'));
}

Confirm that the embedded CSS is no longer outputted.  Whew…  that was a tough one.

---