Remove unwanted WordPress header elements

I was performing a bit of optimization on one of my WordPress blogs and wanted to clean up the header. The default installation of WordPress adds quite a bit up there and this bloat can be compounded by a theme’s own customizations. After quite a bit of searching around Google, I came up with a clean solution. Here is what I did to help de-clutter my theme’s header.

In addition to custom Javascript and CSS calls that may clutter your theme’s header.php file, you may find some other elements whose features you will never use or could do without. However, these elements usually only appear when viewing your pages through your browser, because activated plugins will automatically insert them via PHP. Take, for example, WP-PageNavi. This is a great plugin for placing numbered page links in your WordPress blog, but it inserts a call to its own stylesheet. Being the optimization junkie that I am, it would be better for me to just combine WP-PageNavi’s stylesheet with my theme’s stylesheet so a single CSS file loads all of the styles. The problem is getting rid of WP-PageNavi’s call to its own stylesheet without deactivating the plugin altogether.

Many of these header insertions are being called by the wp_head() hook. Look in your theme’s header.php file and you will see it there. If you think that simply removing the hook will eliminate these extra insertions, you are correct, but it doesn’t come without consequences. Doing so may completely cripple the functionality of your blog because there are other necessary insertions that are required to make your theme work properly. You can, however, disable individual insertions without removing the wp_head() hook, which gives you more control.

In order to achieve removal of plugins hooking into wp_head() you will need to look at that plugin’s main PHP file. Look for functions that look like this:

add_action('wp_head', 'plugin_function_here');

Adding the following line to your theme’s functions.php file and saving it will disable that insertion via wp_head():

remove_action('wp_head', 'plugin_function_here');

Reload a page in your web browser and view the source to see the changes. Quite self-explanatory and simple, isn’t it? Just be careful of what you remove.

There are unique cases where forcing a remove_action from wp_head() does not work. In the case of WP-PageNavi, there is no explicit action being added to wp_head(), but it will still load its own stylesheet. If you look at wp-pagenavi.php you will notice the ‘Enqueue PageNavi Stylesheets’ function that inserts the stylesheet via a wp_print_styles action:

add_action('wp_print_styles', 'pagenavi_stylesheets');

To stop WP-PageNavi’s stylesheet from being called in the header, all you need to do is add the following to your theme’s functions.php file:

remove_action('wp_print_styles', 'pagenavi_stylesheets');

By now you should be noticing a trend. Find the function, then remove the function. Here are some other elements that you can remove that are in direct reference to wp_head(). Note that you should only disable these features if you do not use them.

// Really Simple Discovery
remove_action('wp_head', 'rsd_link');
// Windows Live Writer
remove_action('wp_head', 'wlwmanifest_link');

You can take things a bit further as I have done. I noticed that my theme calls for jQuery Javascript through wp_head() plus a few other Javascript files outside of wp_head(). Again, I was looking at a way of possibly combining and compressing my theme’s Javascript, but how would I disable jQuery loading through wp_head()? I could not find a function reference that would allow me to remove it and trying remove_action('wp_head', 'jquery'); didn’t work. I did find that wp_deregister_script('jquery'); could work perfectly. However, if placed in your theme’s functions.php file, the WordPress Dashboard admin area would become seriously crippled! No longer would the fancy drop-down menus work and various other features stopped working properly all of a sudden. Obviously, the admin area requires jQuery (duh!), so I had to remove the entry from my theme’s functions.php file. Being inquisitive as I am, I placed wp_deregister_script('jquery'); in my theme’s header.php file instead and, to my surprise, doing this disabled jQuery from loading in the theme yet allowed the admin area to retain full functionality.

Be aware that my theme still utilizes jQuery. It is just that I have chosen to pack all of my Javascript together and call for it through a static URL within script tags.

I hope this post is helpful to persons who are interested in gaining more control over their theme’s header and reducing all of the clutter. Please be careful of what you edit and, of course, have fun with WordPress!