HeadImage WordPress Plugin

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!

About Puck

Name: Joe Fulgham. Web designer, skeptic, gamer, geek. I live in Burnaby, BC, Canada with my wife Mel and Boston Terrier "Loki".
This entry was posted in Wordpress. Bookmark the permalink.

37 Responses to HeadImage WordPress Plugin

  1. Ozh says:

    wow !! walter costinak ? The one from 2design ? The one who designs Bluesnews’ logos ?? Me drools, gonna check his blog right now :)

  2. Puck says:

    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.

  3. Blips says:

    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.

  4. Pingback: Blips… » Weblog gezicht

  5. Blips says:

    Thanks for your (email) help it is working just great.

  6. lars says:

    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.

  7. Puck says:

    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.

  8. Pingback: empdesign » Blog Archive » Plugins Wp

  9. Pingback: Netlex News » Blog Archive » HeadImage Wordpress Plugin

  10. Lars Ehlers says:

    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

  11. Pingback: Northern-Web-Coders » HeadImage

  12. Johan says:

    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.

  13. Johan says:

    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.

  14. Puck says:

    Download link reactivated. Sorry, I removed it when upgrading to WP2 and forgot to put it back.

  15. florian says:

    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 !!??

  16. florian says:

    I managed it another way :-)

  17. Pingback: Der wilde Garten | Verschiedene Header

  18. Garrett says:

    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

  19. Puck says:

    I haven’t tried it but it should, as long as you add the same Custom Field to the page.

  20. Marcus says:

    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

  21. Puck says:

    Change the line:
    $headerstyle = “#masthead”;

    to read:
    $headerstyle = “#header”;

    and it should work.

  22. Vicent says:

    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!

  23. Pingback: Los Blog’s de la pagina de UiDoS » Plugins para WordPress

  24. Marc says:

    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

  25. Pingback: Profesor Blog » Los Mejores Plugins Para Worpress

  26. Pingback: » Enchula tu Blog,Plugins Para Worpress Información Tecnología Internet y Gadgets

  27. Pingback: La Mansion » Blog Archive » Plugins Wordpress

  28. Pingback: 282 plugins para WordPress (3ª parte de la F a la K) | Pichicola.com

  29. Pingback: Más plugin para Wordpress « El Cubanito Web

  30. Pingback: Inicio « mediasur.cl

  31. Pingback: Plugins para Wordpress. | Puydi Publicidad 100% efectiva

  32. Pingback: webmaster esmuy.com » Blog Archive » Plugins para Wordpress

  33. Pingback: Plugins para Wordpress para usar con blespot.com | Scorts Cd Juarez

  34. Pingback: Oloroko Blog – Lista de Plugins para Wordpress

  35. Pingback: WwW.UrbaNicaNo.Net || Tu Web De Reggaetón & Eventos Urbanos » Plugins para Wordpress

  36. Pingback: Plugins para Wordpress de la A a la Z. | La Fanega

  37. Pingback: Plugins para Wordpress «

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>