Want to have a header image that changes on different pages…

  • I don’t know if this is possible or extremely difficult to do, but on my page I wanted to try and have the picture in the header change for each different section on the site.
    Here’s my site:
    https://www.chicagoeb5.com

    So for instance, the Home page would have the current image, then any page within the “About” section would have a different one, then any page in the “FAQ” section would have another, and so forth.
    Since the header section is a consistent element on each page, is it even possible to customize it this way (using certain themes, CSS, PHP, Flash, etc)? Or is that an inherent limitation of WordPress?

Viewing 2 replies - 1 through 2 (of 2 total)

  • https://codex.www.ads-software.com/User:Esmi/_Changing_Headers_with_body_class%28%29

    this snippet could do this semi-automatic;
    add it to header.php before the </head>, but after the <link rel="stylesheet" ... lines:

    <?php if(is_page()) { ?>
<style type="text/css">
<?php $page_slug=$post->post_name;
$image='Header-'.$page_slug.'.jpg';
if(!file_exists(TEMPLATEPATH.'/images/'.$image)) { $image='Header.jpg'; }
echo 'div.art-Header-jpeg { background-image: url(images/'.$image.'); }'; ?>
</style>
<?php } ?>

    all you need to do is to make a Header-page-slug.jpg image (where ‘page-slug’ stands for the wordpress sanitized name of your page – lowercase, no special character, linked by dash) for the pages you want to have a diferent header image, and save it to the images folder of your theme.

    example: make ‘Header-services-for-businesses.jpg’ as header image for your page ‘Services for Businesses’

    alternative version using the page id:

    <?php if(is_page()) { ?>
<style type="text/css">
<?php $page_id=$post->ID;
$image='Header-'.$page_id.'.jpg';
if(!file_exists(TEMPLATEPATH.'/images/'.$image)) { $image='Header.jpg'; }
echo 'div.art-Header-jpeg { background-image: url(images/'.$image.'); }'; ?>
</style>
<?php } ?>

    you would then need a Header-74.jpg for a page with the ID of 74.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Want to have a header image that changes on different pages…’ is closed to new replies.