Intertwine Logo

The Right Way to Remove the Custom Image Header in a WordPress Child Theme

Posted in Coding HowToDeveloperWordpress
by Bryan Young on January 4, 2011

Many of the free WordPress themes available take advantage of WordPress’ custom header image feature, introduced in version 2.1.0.  The custom header image allows a site administrator to easily upload a custom image – a singing walrus, perhaps – to give the blog a personal, if blubbery, touch.

There’s only one problem: what happens if you don’t want the walrus?

A singing walrus

WordPress custom image headers: sure they're lovable, but counterintuitive to remove.

You should always use a child theme to make modifications to an existing WordPress theme. That way, if the parent theme changes, you don’t lose your modifications. If you leave the custom image header blank, as I did when trying to achieve the minimal new look for the Intertwine web site, your browser will complain about your formerly pristine code: “Resource interpreted as image but transferred with MIME type text/html.”

MIME warning from Safari 5 DOM Inspector

Safari Warning: "Resource interpreted as image but transferred with MIME type text/html." Annoying.

How Annoying.

Why the warning? Well after much fruitless Googling and a code review, I realized that my parent theme was putting inline css into my header; a call for a background-image URL.  My decision to shaft the walrus had left the custom image header blank; my browser was attempting to load the root document of my site (/index.php) as an image and not getting very far away with it.

[css highlight="8" title="The offending css: A blank background url at line 8!"]
<head>
<meta charset="utf-8">

<meta name="generator" content="WordPress 3.0.4" />
<style type="text/css">
#header {
height: 132px;
background: url();
}
#header a {
color: #21759B;
}
</style>
</head>
[/css]

Now you might ask, why even worry about an internal browser warning; it doesn’t break anything for the user, right?  Well yes, that’s true, but would you like the next poor schmo that happens onto your source code to be faced with a random hard-to-trace warning?  Of course you wouldn’t; it’s bad form, it could impact the speed of your page load, and after all–what would the walrus think?

With the proximate cause of my warning found, the question remained: how to get rid of it?  Tracing the code to my parent theme’s functions.php file, I hit another snag:

[php highlight="1,18,20" title="Walrus' Revenge: functions.php file from the parent theme"]

function modernist_header_style() {    ?>
<style type="text/css">
#header {
height: 132px;
background: url(<?php header_image(); ?>);
}
#header a {
<?php
if ( ‘blank’ == get_header_textcolor() ) { ?>
display: none;
<?php } else { ?>
color: #<?php header_textcolor(); ?>;
}
<?php } ?>
</style>
<?php}

if ( function_exists(‘add_custom_image_header’) ) {
add_custom_image_header(
‘modernist_header_style’,
‘modernist_admin_header_style’);
}

[/php]

The add_custom_image_header function adds the css into the header and calls a blank header image, but since WordPress (as of version 3.0.4) does not have a “remove_custom_image_header” method, there was no obvious way to get rid of the offending css in my header!

Well then, what is the Right Way to remove the custom image header?

The way you should override anything in a parent theme is to do it in your child theme’s functions.php file. The solution here, is to have the child theme remove the offending header callback before it gets loaded.  Here are the steps:

1. In your parent theme directory, view the functions.php file.

2. Find the add_custom_image_header function, and make a note of the first argument (in the example above, the first argument is “modernist_header_style”).

3. In your child theme directory, open the functions.php file or create one if it doesn’t exist.

4. Add the following code to the child theme’s functions.php file (be sure to replace ‘modernist_header_style’ with the name of your first argument function from step 2):

[php highlight="5" title="Add this code to your child theme's functions.php. Make sure to use your own argument name in line 5"]

<?php

function isi_remove_custom_image_header() {

remove_action(‘wp_head’, ‘modernist_header_style’);

}

add_action(‘init’, ‘isi_remove_custom_image_header’);

?>

[/php]

The isi_remove_custom_image_header function removes the function registered by your parent theme’s add_custom_header_image function from the wp_head queue. The add_action function places the isi_remove_custom_image_header function in the page’s init queue. It’s counterintuitive but it works.

5. Save the modified file and reload the page and voila, the custom header image, your browser warnings and yes, your walrus too, are history!

By the way, this is the first post of the new Intertwine blog; I hope to share tips and how-tos on programming, servers and maybe even talk about running a software company in this space. Thanks for reading!

Leave your comment

You must be logged in to post a comment.