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 8 Comments
Using jQuery to liven up your WordPress login
23 Apr, 2008 MarkB 130 Comments

Share This Post!

38 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.
Blogtek Media
August 19, 2010 • 12:54 pm

very informative and easy to follow. nice post!
herbata
December 5, 2010 • 1:31 pm

Thanks for sharing this! I wish there would be more info about that:)
dvd player screen
January 26, 2011 • 12:23 pm

Nice, you have actually given a big amount of thought to the other side of this argument. Perhaps I can do a guest post or a follow-up, just tell me.
rev
January 27, 2011 • 11:37 pm

Newbee Q: I too need to know where to put the code. Does it replace the name of the current .jpg in the header or the whole line of code that calls the .jpg?
Terry
May 19, 2011 • 10:57 pm

Which php file does the code go in? Where in the file should it be placed?
test blast
May 25, 2011 • 10:46 pm

my bom
Curtis F
June 9, 2011 • 8:18 am

Brilliantly done! While I wasn’t looking to use this info exactly the same way, this really helped me add some dynamic messages to my wordpress posts and pages with custom fields.

I’ll be posting a similar write up on my new blog soon, as to what I’ve done with this info.

Thank you so much!
Nguyetkim.com
July 13, 2011 • 1:55 pm

thank you…
Herby
May 2, 2012 • 9:09 am

Thank you so much! THat is exactly what I wanted to achieve.
Nopu
July 19, 2012 • 11:25 am

Hi there to all, the contents existing at this web page are truly remarkable for people experience, well, keep up the good work fellows.
casual suits
August 29, 2012 • 8:37 am

Can I simply just say what a relief to find someone who truly
understands what they’re discussing over the internet. You certainly realize how to bring an issue to light and make it important. More and more people ought to check this out and understand this side of the story. I was surprised you aren’t more popular since you most certainly possess the gift.
Tom Nguyen
September 14, 2012 • 1:47 am

What an awesome tutorial! I just used it on a client’s site and it worked like a charm! Thank you.
stress relief iphone app
April 9, 2013 • 7:53 am

Hello
Your write up on Custom header images for WordPress Pages is good and also well considered.

I must come back to review your articles..