This article will begin a series of articles showing practical and real world examples on how to use conditional tags within WordPress.

So for starters let’s review what exactly a “conditional tag” is. According to the WordPress Codex:

Conditional Tags can be used in your template files to change what content is displayed and how that content is displayed on a particular page depending on what conditions that page matches. For example, you might want to display a snippet of text above the series of posts, but only on the main page of your blog.

So basically WordPress has built in a system of tags that checks your code for specific conditions. If a condition come back as “true” one thing happens, if it comes back as “false” something else happens.

In today’s article we are going to work on a site to allow the home page to have a unique header from the rest of the pages. You can see the article in action on the Pressing Pixels demo site.

The demo site we’ll be working with is using the theme “The Morning After” which is a brilliant free magazine style theme from Arun Kale. You can download it here.

In you look at the Morning After theme on Arun’s site you’ll notice that the theme has a standard sized header logo and image header for every page. I would like to have a larger and unique logo on my home page that is different than all the rest of the pages.

I won’t go into great detail but I had to do some work initially in the template styles and layout to make my images fit. This will obviously be different for each theme you are working with and is not critical to fulfill the purpose of this article.

• I removed the “top banner” div from the home page and page templates
• I moved the “page title template tag” into the body of the page template
• I floated the right column right and the left column left. I also had to move the right column div in front of the left in the home page template so that it would flow correctly

With that done all that was left was to add in the conditions that would determine which logo went to which page.

Here is the code in its entirety (If you’re looking at the source code on the demo page you’ll notice I’ve removed a few of the custom style classes here to make the example cleaner). We’ll break it down in second.

<?php if (is_home() ) { ?>

<div id="logo_home">
     <a href="<?php bloginfo('url'); ?>">
      <img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" /></a>
</div>

<?php } else { ?>

<div id="logo_other">
     <a href="<?php bloginfo('url'); ?>">
      <img src="<?php bloginfo('template_url'); ?>/images/logo2.png" /></a>
</div>

<?php } ?>

Okay, lets break it down.

In the header.php file I started out with the simple conditional tag “is_home”.

<?php if(is_home() ) { ?>

This particular tag checks to see if the page is the “home” page.

The home page can be defined in a few different ways. If you have a standard installation and have not changed any settings. The home page is your blog address (URL) as defined in your WordPress general settings. You can change this in the reading settings to set the “front” or “home page” to be something different.

Whatever your particular case, the “is_home” tag refers to this page.

Notice that the tag includes “if”. This is the piece that tells WordPress to look out, because it has some options to choose from.
Also notice that the code ends with an opening brace.

 {

The conditions fit inside of these braces. Every condition you create (and you can create multiple which we’ll discuss in a later article) must be inside opening and closing braces.

So once we’ve checked to see if this is the home page we can enter the code for what we want to happen if that condition is true. In this case, if our user is on the home page I want them to see a little larger logo. So lets stick that in the code.

<div id="logo_home">
     <a href="<?php bloginfo('url'); ?>">
      <img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" /></a>
</div>

Now since we’ve checked to see if the condition is true (whether or not we’re on the home page) we need to define what happens if the condition is false. We do that by using “else”. Here is the code and notice the closing and opening of the braces.

<?php } else { ?>

The next step is to put in the code for what we want to happen if we are not on the home page. And since we have not defined any additional conditions this next snippet of code will appear on every page that is not the home page.

<div id="logo_other">
     <a href="<?php bloginfo('url'); ?>">
      <img src="<?php bloginfo('template_url'); ?>/images/logo2.png" /></a>
</div>

The only differences are the id of the container div and the name of the logo file. I had to give them different div id’s because the heights of the respective logos were different and I wanted to define that in my style sheet.

The very last thing we need to do, and this is a step often forgotten is to close out our last condition with a closing curly brace.

<?php } ?>

And that’s it. This technique obviously does not just apply to header logos but with anything you would like to do uniquely on the home page.

The next article in the series will cover how to use multiple conditions.