WordPress.org

Ready to get started?Download WordPress

Forums

Roating Header Image Based On Category (9 posts)

  1. war59312
    Member
    Posted 7 years ago #

    Hey,

    I am trying to show a different custom header image for every category.

    Here is what I currently use:

    <!-- Start Custom Header Images - Shows Background Image Based on Category -->
    <div id="header" <?php if ( in_category(3) ) { echo 'style="background: #fff url(/wp-content/themes/connections/img/header_99updates.gif) no-repeat bottom;"'; } else if (in_category (5) ) {echo 'style="background: #fff url(/wp-content/themes/connections/img/header_01updates.gif) no-repeat bottom;"'; } else if (in_category (7) ) {echo 'style="background: #fff url(/wp-content/themes/connections/img/header_03updates.gif) no-repeat bottom;"'; } else if (in_category (4) ) {echo 'style="background: #fff url(/wp-content/themes/connections/img/header_00updates.gif) no-repeat bottom;"'; } else if (in_category (6) ) {echo 'style="background: #fff url(/wp-content/themes/connections/img/header_02updates.gif) no-repeat bottom;"'; } else if (in_category (8) ) {echo 'style="background: #fff url(/wp-content/themes/connections/img/header_04updates.gif) no-repeat bottom;"'; } else if (in_category (9) ) {echo 'style="background: #fff url(/wp-content/themes/connections/img/header_05updates.gif) no-repeat bottom;"'; } else if (in_category (10) ) {echo 'style="background: #fff url(/wp-content/themes/connections/img/header_06updates.gif) no-repeat bottom;"'; } else if (in_category (2) ) {echo 'style="background: #fff url(/wp-content/themes/connections/img/header_98updates.gif) no-repeat bottom;"'; } else if (in_category (11) ) {echo 'style="background: #fff url(/wp-content/themes/connections/img/header_newsletter.gif) no-repeat bottom;"'; } else {echo 'style="background: #fff url(/wp-content/themes/connections/img/header_main.gif) no-repeat bottom;"'; } ?>>
    <!-- End Custom Header Images -->

    I am sure there must be a cleaner and better way. Any ideas?

    Thanks a lot,

    Will

  2. Kafkaesqui

    Posted 7 years ago #

    My reply on your other thread covers the same solution:

    http://wordpress.org/support/topic/92430#post-465894

  3. war59312
    Member
    Posted 7 years ago #

    Hey,

    Thanks, but not sure how to use it this time?

    That is how to show a different header for each category?

    Sorry, not a php expert here, still learning.

    I mean it would still be like using if else statement but using $cat instead... Still seems redundant. I am probably just miss-understanding...

    Thanks again,

    Will

  4. Kafkaesqui

    Posted 7 years ago #

    You noted "I am sure there must be a cleaner and better way." That way would be to avoid multiple if tests through the use of the category ID in each of your header images (i.e. header_cat_1.gif). Then your PHP is pretty simple:

    <div id="header" style="background: #fff url(/wp-content/themes/connections/img/header_cat_<?php echo $cat; ?>.gif) no-repeat bottom;">

  5. war59312
    Member
    Posted 7 years ago #

    Hi,

    oh wow not sure why i did not think of that

    thanks again,

    Will

  6. Jardry
    Member
    Posted 7 years ago #

    I would like to implement something similar, but not necessarily create a header image for each category.

    div id="header" style="background: #fff url(/wp-content/themes/connections/img/header_cat_<?php echo $cat; ?>.gif) no-repeat bottom;"

    Could someone suggest a modification to the code so that if there is no header cat gif is found it defaults to using header_cat_1.gif.

    Jardry

  7. Kafkaesqui

    Posted 7 years ago #

    Jardry, try this (just make sure the paths provided to the two $header_image vars are correct):

    <?php
    $header_image = '/wp-content/themes/connections/img/header_cat_' . $cat . '.gif';

    if( !file_exists(ABSPATH . $header_image) ) {
    $header_image = '/wp-content/themes/connections/img/header_cat_1.gif';
    }
    ?>
    <div id="header" style="background: #fff url(<?php echo $header_image; ?>) no-repeat bottom;">

  8. Jardry
    Member
    Posted 7 years ago #

    Thanks for the code, I'll implement it when I do my next update and see how it goes.

    Much appreciated.

    Jardry

  9. crikeymedia
    Member
    Posted 7 years ago #

    I am yet to get into php code but could you not create pull the image from a database bsed on the page id... or append the page_id to select the filename... indexing.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags