WordPress.org

1. podz
   Support Maven
   Posted 4 years ago #

   Goal: To display a different header image depending on if what is being display is Home or a Category or a Page.

   This page - http://codex.wordpress.org/Template_Tags/get_the_category#Show_Category_Images - has this code:
   <?php foreach((get_the_category()) as $cat)
{ echo '<img src="http://example.com/images/' . $cat->cat_ID . '.jpg"
alt="' . $cat->cat_name . '" />'; } ?>

   I have no idea at all how I would write the If / Else parts.

   If (Home) then (header-1)
   Else
   If (Cat) then (header-for-that-cat)
   Else
   If (Page) then (header-2)

   Is this possible ? If it is, would anyone be so kind to write it for me ? (If it is doable then when I get it working I will write it up for Codex)

2. Ajay
   Member
   Posted 4 years ago #

   I'm not sure about code but how about using CSS to have different header classes?

   Then based on the category you use the corresponding class?

3. podz
   Support Maven
   Posted 4 years ago #

   Then I would have to have a different header.php where I set which class to display... I think... and this choosing stuff needs to be in the loop I think .... could well be wrong though. I never did like if/else statements :)

4. Ajay
   Member
   Posted 4 years ago #

   I dont think you would need seperate header files, what you could do is this:

   In the header.php

   I assume you want to change the image in the div id="header" right?

   An algorithm for this would be something like:

   <div id="header" class="<?php if(is_home) echo('header1') elseif(is_category) echo('header2'); ?>">
   and so on

5. podz
   Support Maven
   Posted 4 years ago #

   It's the "and so on" bit that completely throws me :)

   `<div id="header"
   is page = home ?
   or
   (get_the_category()) as $cat)
   or
   is this page=page ?
   then
   class="<?php if(is_home) echo('header1')
   elseif
   { echo '<img src="http://example.com/images/' . $cat->cat_ID . '.jpg"
   alt="' . $cat->cat_name . '" />'; }
   elseif
   (display the general page header)
   ">

   (Remember, even php 101 would be waaay over my head :) )

6. miklb
   Forum Concierge
   Posted 4 years ago #

   I think what he's saying is <div id="header" class="<?php if(is_home) echo('header1') elseif(is_category) echo('header2'); ?>elseif(is_page)echo('header3'); ?>">
   Then in your style sheet you'd have:

   .header1 { background: url(etc)}

   .header2 {background: url(etc)}

   .header3 { background: url(etc)}

7. Ajay
   Member
   Posted 4 years ago #

   Thanks for making this clear miklb :)

   Corrected code:
   <div id="header" class="<?php if(is_home) echo('header1') elseif(is_category) echo('header2') elseif(is_page)echo('header3'); ?>">

   What I meant by so on is in place of is_page you can add is_single etc. as defined at http://codex.wordpress.org/Conditional_Tags

8. podz
   Support Maven
   Posted 4 years ago #

   Can I complicate this a bit more ?

   If I had 3 categories and wanted a header per category, how would I do that ?

9. podz
   Support Maven
   Posted 4 years ago #

   `<div id="header"
   class="<?php if(is_home) echo('header1')
   elseif(is_category('Cheeses') ) echo('header2')
   elseif(is_category('Carrots') ) echo('header3')
   elseif(is_category('Oranges') ) echo('header4')
   elseif(is_page)echo('header5'); ?>">

   That look good ?

10. miklb
    Forum Concierge
    Posted 4 years ago #

    Yes

11. podz
    Support Maven
    Posted 4 years ago #

    Brilliant !

    Thanks heaps :D

12. Ajay
    Member
    Posted 4 years ago #

    Remember to add the class details in your CSS file.

    Also remember not to put a background image for the #header

    It could result in overlapping images.

    Also the code above adds a class for the id="header"
    You can do the same on other ids to get your desired result.

13. Syni
    Member
    Posted 4 years ago #

    Now, could you also do this with pages? Like if I wanted a certain page I created to have a certain header image could I just do:

    elseif(is_page('journal')) echo('headerx')

    Would that work? And if so, journal in this example would be the slug of the page, right?

14. Ajay
    Member
    Posted 4 years ago #

    It should work.

    See an e.g. http://codex.wordpress.org/Dynamic_Menu_Highlighting

15. SileesWorkshop
    Member
    Posted 3 years ago #

    This post has been helpfull to me sofar, but i didn't get my site to work proparly yet.
    I've put the code underneed in the header.php, and it work, but the allignment of the image isn't right. The main headerimage shows underneed as well.

    <!--
<div id="header"
onclick="location.href='<?php echo get_settings('home'); ?>/';" style="cursor: pointer;">
<?php if ( is_page(7) ) : ?><img src="<?php bloginfo('stylesheet_directory'); ?>/images/tdvheader01.jpg">
<?php endif; ?>
-->

    So i've been trying to put the code in a different place in the header.php, like this:

    <!--
#header {
<?php if(is_home) background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickheader.jpg") no-repeat bottom center;
elseif(is_page(7)) background: url("<?php bloginfo('stylesheet_directory'); ?>/images/tdvheader02.jpg") no-repeat bottom center;
elseif(is_page) background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickheader.jpg") no-repeat bottom center;
?>"> }
-->

    I get parse errors with this, so my knowledge of code and php isn't good enough.
    Can someone help me out here with this code, or could someone spell out where to put the code discussed in this thread previously. I've tried the code Podz stated, and made the .header1, etc in my style.css, but no result, and parse errors.

    NB. My site needs a header on the home and the same one on most pages, but some pages need a customheader.
    Thanks already.

Topic Closed

This topic has been closed to new replies.