Custom header images for WordPress Pages

18 Aug, 2008 MarkB Header, Page, Single, Styling

I’ve had a recent request regarding a popular tweak for WordPress – that is, to add custom page header images to any page in WordPress. There are one or two plugins that do this, but with a bit of creativity you can accomplish this very easily using WordPress custom fields and it’s built in image uploader. Here’s how:

The basics

You’re basically going to setup a number of if/else statements in your template where you want your header image to appear. The final statement will be an else statement so that if none of the above rules apply, it’ll degrade so that you’ll always have a header image on your page.

You’re going to create a custom field that has the name of the image that you want to use as a header image. You don’t have to add the full path to the image. Since you’re uploading your custom image in the WordPress uploader, it’ll always end up in the same folder and so the path to the image will be entered in the template.

The how-to

So firstly create your image, and upload it to your page.

Then add a custom field called “header” and put the name of the file as the value of the field.

Then open up your template where you want your image to appear and add the following PHP – tailored to work as you need it to…

<? if (get_post_meta($post->ID, 'header', true)) { ?>
	<img src="<? bloginfo('url'); ?>/wp-content/uploads/<? echo get_post_meta($post->ID, 'header', true) ?>" alt="<? bloginfo('name'); ?>" />
<? } else { ?>
	<img src="<? bloginfo('template_directory'); ?>/images/header.jpg" />
<? } ?>

So what you’ve now done, is tell the template to check if the custom field “header” has a value. If it does, then use that value to display your image. However, if the custom field is empty, then it’ll degrade to the second default image that you specify.

And presto: you can now use your WP admin to control header images on each page. This is also a good way to do it because now your client can update/add his header images on his own without having to bug you.

Changing the WordPress admin logo
21 Apr, 2010 MarkB 1 Comment
Using jQuery to liven up your WordPress login
23 Apr, 2008 MarkB 52 Comments

Share This Post!

14 Comments

Jan Schäfer
November 28, 2008 • 5:03 pm

THANK YOU SO MUCH!
Jan Schäfer
November 28, 2008 • 5:04 pm

this is one of the best tweaks I have ever seen for Worpress!
Lily Chen
November 29, 2008 • 2:44 am

Sorry this is a newbie question: How would you make this work if you have the option “Organize my uploads into month- and year-based folders” box checked? The URL then would need the year/month added. Thanks for your help!
Thorsten
January 14, 2009 • 9:06 pm

this is a GREAT tweak! Thank you.
BUT…
I am using K2 1.0-RC7 and WP 2.7 and
I cannot find out were to put the code in K2.

Can you give me a hint?
Cheers anyway!
Elizabeth Richardson
April 8, 2009 • 3:20 pm

Thank you, Thank you, Thank you. This is so simple and it works – I could kiss you!
Dmitry Smirnoff
April 12, 2009 • 11:12 pm

Cool! Works like a charrm, with minor changes required for my theme. Thank you!
Florian Robardet
July 9, 2009 • 11:57 pm

This is a very good tweak and works very well with Panorama theme from Themocracy. Thank you for this nice tweak !
Rick
August 7, 2009 • 4:00 pm

Lily,

You can publish the whole directory structure of the image in the custom field and remove the directory structure out of the call in the template. That would fix it.

Anyone know how this could be done with a background image in the header?
@nomadone
January 9, 2010 • 5:14 pm

Nice one, anyone know if this works with multiple if statements?

I’ve been using this for so many different purposes but I find that at certain points when the amount of queries in my templates and the amount of conditional custom field statements is high enough then some of the if statements just don’t work anymore, really bizzarre and I haven’t found a thing on line which helps.

anyone have similar problems?
black and white wedding cakes
February 4, 2010 • 11:35 am

Hi, good day. Wonderful post. You have gained a new subscriber. Pleasee continue this great work and I look forward to more of your great blog posts.