I’ve created a plugin for Wordpress that will change the header background of a page based on a custom field for the first post on that page. This was requested by my buddy Walter Costinak and you can see it in action on his blog (click on individual entry titles to see the header change).
If the first post on a page has no head_image custom field set the additional CSS line won’t be written and you’ll get the theme’s default image. The default settings are for the Benevolence theme/stylesheet but should be easy to modify to work with any style you’re using.
The source is available here. Copy this into a fresh headimage.php file, and make changes to the two defined variables if needed. Then upload it in your wp-content/plugins directory and activate the plugin.
Upload a header image into your /images directory (or whichever directory you’ve defined if you changed the variable) and then add a custom field to your entry with the key “head_image” and the value being the name of the header image file.
Update: I’ve updated the plugin to version 1.0 and it now works with Wordpress 2.1!
wow !! walter costinak ? The one from 2design ? The one who designs Bluesnews’ logos ?? Me drools, gonna check his blog right now
That’s the one. He’s been a friend and mentor for ages, and has always hummed and hawed about making a blog and finally asked me to set one up for him. He’s enjoying it so far, I think.
Hi Puck.
Just two comments while the idea is so great, its a shame. I like your solution.
I’m looking for something you have build but then slightly different.
I also like to change the banner when clicking on a post and bound to the category. In my case when talking about planes I want planes as a banne, when talking about the old days I want the old days as a banner, You get the drift.
Then I do not find any reffernce to #masterhead in my theme, I have a theme installed that is doeing the header.jpg thur a CSS file. I’m not that familiar with CSS yet altough started to tweak with tryal and error.
Feel free to take a peek at my blog. Oh did I told you its in Dutch
Thanks.
Thanks for your (email) help it is working just great.
hello
i´d like to integrate your plugin into my wordpress 1.5 site with kubrick as the default theme but with no success. can you help somehow in how to make it with kubrick?
thanks.
Lars — Kubrick is a little tricky as the top image includes whitespace, so be sure to include some of that in your image. Or modify the layout so it doesn’t use the whitespace…
Kubrick also sets its images in the HTML of the Theme and not the CSS. He claims this is to accomodate differing install paths, but I don’t see any reason for this to be required.
That said, the CSS element you need to be setting is called “#headerimg” in Kubrick. Change the plugin’s $headerstyle = “#masthead” line to $headerstyle = “#headerimg” and it should work fine.
hello puck,
thank you for your help and the plugin, i tried it with kubrick and got it working besides some troubles in the admin area. now i have integrated it into another page and another theme without problems. thank you
Hello Joe,
I wanted to use the HeadImage plugin on my WordPress 2.0 install, but it appears that it is not compatible (it breaks the image upload functionality) any chance of an upgrade?
By the way, the download is broken, found the code using Google cache.
Sorry about this, but the plugin *does work* on WordPress 2.0. I just made a copy/paste mistake that broke the code…
The download link is still broken b.t.w.
Download link reactivated. Sorry, I removed it when upgrading to WP2 and forgot to put it back.
Hi!
First of all thank you for this plug-in….but I got some problems:
In my css-style the header is:
#header {
height: 295px;
background: url(images/header.jpg) no-repeat;
position: relative;
top: 0px;
margin: 0px;
margin-top: 0px;
}
So I changed $headerstyle = “#header” in the headimage.php.
For testing reasons I wanted to change my header in my category webdesign, so I added the key “head_image” and the value “header2.jpg”…The link to this image is http://www.florian24.com/blog/wp-content/themes/flopsycho/images/header2.jpg
The Problem is now, if I open the category “webdesign” no header image at all is shown, if i go back to the main page, the standard header is shown.
I don´t know what´s wrong !!??
I managed it another way
Does this plugin also change the header for pages and subpages? (I looked at Walter’s site but don’t see any pages).
Thanks, Garrett
I haven’t tried it but it should, as long as you add the same Custom Field to the page.
Hi there,
I would like to use the plugin in the Theme “Wococo” (http://themes.wordpress.net/columns/3-columns/791/wucoco-three-column-0100/) but I can’t get it working.
Please help me. I can’t figure out how to modify the code.
Thanx
Marcus
Change the line:
$headerstyle = “#masthead”;
to read:
$headerstyle = “#header”;
and it should work.
Please! I need help!
How I can modify the script in order that instead of getting the first post of the page, script gets the first post of a determined category?
I only need to know how to indicate this on $post = $posts[0];
Thank you in advance!
Hey!
I use the “Freshy”-Theme and I changed the variable to “#header”. Then I added a custom field to my entry with the key “head_image” and the name of the header image file. But when I open the category nothing changes…there is still the standard header. Can u help me? :-3