WordPress.org

Ready to get started?Download WordPress

Forums

Header per category / page / home (15 posts)

  1. Mark (podz)
    Support Maven
    Posted 9 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 9 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. Mark (podz)
    Support Maven
    Posted 9 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 9 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. Mark (podz)
    Support Maven
    Posted 9 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. Michael Bishop

    Posted 9 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 9 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. Mark (podz)
    Support Maven
    Posted 9 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. Mark (podz)
    Support Maven
    Posted 9 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. Michael Bishop

    Posted 9 years ago #

    Yes

  11. Mark (podz)
    Support Maven
    Posted 9 years ago #

    Brilliant !

    Thanks heaps :D

  12. Ajay
    Member
    Posted 9 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 9 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 9 years ago #

  15. SileesWorkshop
    Member
    Posted 7 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.

About this Topic