WordPress.org

1. captainsparkle
   Member
   Posted 2 years ago #

   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:
   http://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?

2. esmi
   Theme Diva & Forum Moderator
   Posted 2 years ago #

   http://codex.wordpress.org/User:Esmi/_Changing_Headers_with_body_class%28%29

3. alchymyth
   The Sweeper
   Posted 2 years ago #

   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.

Topic Closed

This topic has been closed to new replies.