A Fresh Start

I was chatting to young Daisy and the subject of banners raised its head.

She’s understandably attached to her doggie but has a couple of other banners she’d like to use.

I suggested having a different banner for single post pages, for pages, for search results, etc. and this is how you’d do this.

Daisy’s original header.php file has a line:

<div id=”top”><a href=”/index.php”><img src=”<?php bloginfo(’template_directory’); ?>/images/blank.gif” alt=”home” title=”home” width=”864″ height=”185″ /></a></div>

while her stylesheet had a section:

#top { background: transparent url(images/top.jpg) no-repeat top center; height: 185px; }

WordPress has some useful functions such as is_home(), is_page(), is_single(), is_search(), etc. Let’s assume you have a suitably amusing banner that you’d like to use on your search results page and a different one for static pages (as opposed to the normal blog posts) and a third suitable for single posts.

This is the code you’d need in the header.php file:
<div id=”<?php if (is_search()) echo “single”; if (is_page()) echo “page”; if (is_search()) echo “search”; ?>top”><a href=”/index.php”><img src=”<?php bloginfo(’template_directory’); ?>/images/blank.gif” alt=”home” title=”home” width=”864″ height=”185″ /></a></div>

The new bit replaces the original <div id="top"> and adds “single”, “page” or “search” to the ID name as and when appropriate.

Let’s space it out to make it slightly easier to follow:

… <div id=”
<?php
   if (is_single()) echo “single”;
      else if (is_page()) echo “page”;
         else if (is_search()) echo “search”;
?>top”> …

The PHP code simply checks whether it’s going to display a web page with a single post and, if so, will print
<div id="singletop"></div>.
If not, it then checks whether it’s a (WordPress) page that’s been requested. If so, it will print
<div id="pagetop"></div>.
Finally it checks to see whether it’s a search results page that’s being displayed, in which case it’ll print
<div id="searchtop"></div>.

Simple.

Now it’s just a case of adding a few more styles beneath the original #top:

#singletop { background: transparent url(images/singletop.jpg) no-repeat top center; height: 185px; },
#pagetop { background: transparent url(images/pagetop.jpg) no-repeat top center; height: 185px; }
and
#searchtop { background: transparent url(images/searchtop.jpg) no-repeat top center; height: 185px; }
and then saving singletop.jpg, pagetop.jpg and searchtop.jpg in the images folder of your theme.