Support » Themes and Templates » Dynamic header image using custom fields…

  • I’d like to set up my pages to display a unique header image on based on their page ID.

    Is it possible to use the “get_post_meta” call within my header.php file?

    If so, seems like I could set up my pages custom fields to specify their own image. Will this work?

Viewing 6 replies - 1 through 6 (of 6 total)
  • I think you’d be better off using the queried object’s slug and then using a set of if statements (or better, switch statements) to check the slug and return the correct header image.

    Place the code below in your header and it will print out the slug name for each page. It’s just for testing, once you are satisfied that its returning the right slug names remove the echo $slug; line.

        $post_obj = $wp_query->get_queried_object();
        $slug = $post_obj->post_name;
        echo $slug;

    then you can set a series of checks to return the right image

    if($slug == "about"){
            echo "<img src=\"about-header.jpg\">";
        else if($slug == "contact"){
            echo "<img src=\"contact-header.jpg\">";
        else if($slug == "news"){
            echo "<img src=\"news-header.jpg\">";
            echo "<img src=\"default-header.jpg\">";

    You can output to an <img> tag like shown above or to a css background property.

    Hope that helps.

    Wow. This is the first thorough, logical answer to this question I’ve found to date.

    Given that displaying a different header graphic for different WP categories would seem to be a perfectly sensible, useful thing for many WP bloggers, it’s amazing that no one appears to have implemented this as a plugin to date.

    Or have they? If there’s a plugin to do this, please advise who/what/where? Thanks.


    I tried using the code below and uploaded some images with the relevant file names into the themes image folder …

    $post_obj = $wp_query->get_queried_object();
    $slug = $post_obj->post_name;
    if($slug == “about”){
    echo “<img src=\”about-header.jpg\”>”;
    else if($slug == “contact”){
    echo “<img src=\”contact-header.jpg\”>”;
    else if($slug == “news”){
    echo “<img src=\”news-header.jpg\”>”;
    echo “<img src=\”default-header.jpg\”>”;

    It didn’t work in WordPress 2.7 so I guess you have to disable the following file somehow?


    I tried deleting this file and you get a blank white header.

    Is there anyway you can put some code in the header-image.php to disable it and allow the dynamic header code to work?

    it’s likely that you need to write it like this:

    <img src="<?php bloginfo('template_url'); ?>/img_name.jpg" />

    I also wanted to use the custom fields to do this. I didn’t find anything pre-made, so I came up with this.

    <?php $page_header_image = "path/to/images/folder/".get_post_meta($post->ID, 'header_img', 1);
    if( strlen($page_header_image) < strlen(path/to/images/folder/))
    {$page_header_image = "path/to/images/folder/default.jpg";}
    <img src="<?php echo $page_header_image;?>">

    I have a bit more to do to clean this up, but it is basically working for me.

    For this to work, you have to add a custom field with a key of header_img and the value for that key can be set to the name of the image you would like to use.

    I included the path in the code instead of the meta tag simply because that was what worked best for me on this specific project. I plan on updating that later, but wanted to get this up.

    I also have a test to basically make sure there is an image of some sort to display. If the meta tag comes back empty then a default image is shown.

    Hope that helps anyone else searching like I was.



    We have developed plugin that accomplished some of this functionality.

    While it doesn’t allow you to set a header image for each category (yet), it does allow you to set a different header image for each page/post, as well as a default header.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Dynamic header image using custom fields…’ is closed to new replies.