The theory behind this is simple really. We’re just going to take some common WordPress logic and apply it to our scenario.

For example, if you were to happen to write a blog about developing with WordPress and most of your articles were focused on plugins and themes it would make sense that the majority of searches done on your site would be for content that related to those categories. So why not present the user with the results from those categories specifically at the top of the search results?

Now, as far as I can tell you can’t just use conditional tags like you would in your sidebar or header like I referenced in my previous article on custom headers.
In those example you get to choose what content to query and display. With search you don’t know what is specifically being queried, unless your name is Carnac the Magnificent…

So the solution is to use multiple loops. If you need to brush up on what the WordPress loop is you can read more here.

Back to our blog scenario. Here is what we want to do. When somebody searches my site I want to present my users with any results from the plugin and theme categories first and then give them the rest of the search results.

So start off with your normal loop.

<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>

Next we’ll check to see if the user’s search query returned anything from our plugin category. The number represents the plugin’s id. You can find this out by going to manage>categories in your WP admin, either hover over the category name in the list and look at the bottom of your browser or click to edit a category and look at the end of the url in your address bar – that is the category id.

<?php if ( in_category('7') ): ?>

At this point you can put in whatever you want to display to the user whether its the title or the post, the excerpt, or the full content. For simplicities sake I’m just going to display the title with a link to its permalink.

<a href="<?php the_permalink() ?>"><?php the_title() ?></a>

Now close out the if statement for your condition.

<?php endif; ?>

And close out the first loop.

<?php endwhile;  ?>
<?php endif; ?> 

Now lets check to see if there are posts returned from the search in the themes category.

We are going to use another loop but in order to get the same set of results from the user’s search query we need to “rewind the posts.” This function allows us to use the same query over again. Here is the code.

<?php rewind_posts(); ?>

And now we just enter the same code for our loop with the conditional category.

<?php while (have_posts()) : the_post(); ?>
    <?php if ( in_category('17') ): ?>
        <a href="<?php the_permalink() ?>"><?php the_title() ?></a>
    <?php endif; ?>
<?php endwhile; ?>

If you have additional categories you would like to feature just repeat.

<?php rewind_posts(); ?>

<?php while (have_posts()) : the_post(); ?>
    <?php if ( in_category('17') ): ?>
        <a href="<?php the_permalink() ?>"><?php the_title() ?></a>
    <?php endif; ?>
<?php endwhile; ?>

Once you are done featuring categories of search results you will probably want to give the user the results that do not fit into your organized categories. We’ll do this by once again rewinding our posts but don’t want to include the results we already have so we need to exclude the categories we featured. The condition we are using checks to see if any posts are in a category and if they are they are skipped the query continues. Here is what the code looks like.

<?php rewind_posts(); ?>

<?php while (have_posts()) : the_post(); ?>
   <?php if (in_category('7')) continue; ?>
   <?php if (in_category('17')) continue; ?>
        <a href="<?php the_permalink() ?>"><?php the_title() ?></a>
<?php endwhile; ?>

Here is the entire thing. I also put in some headings to seperate the content – though you don’t need to do that.

<h3>Plugins</h3>

    <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>
        <?php if ( in_category('7') ): ?>
            <a href="<?php the_permalink() ?>"><?php the_title() ?></a>
        <?php endif; ?>					

    <?php endwhile;  ?>
    <?php endif; ?>   

<h3>Themes</h3>

    <?php rewind_posts(); ?>
        <?php while (have_posts()) : the_post(); ?>
            <?php if ( in_category('17') ): ?>
                <a href="<?php the_permalink() ?>"><?php the_title() ?></a>
            <?php endif; ?>
        <?php endwhile; ?>

<h3>Other Results</h3>

    <?php rewind_posts(); ?>
        <?php while (have_posts()) : the_post(); ?>
            <?php if (in_category('7')) continue; ?>
            <?php if (in_category('17')) continue; ?>
                <a href="<?php the_permalink() ?>"><?php the_title() ?></a>
       <?php endwhile; ?>

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.

My end goal was to have a product page that would display thumbnails of related accessories with links to those accessories.

The solution I choose was to use tags. Tags? I didn’t know you could tag pages? Well, out of the box you can’t, (not sure why) but there is a decent plugin called “tags4pages” that will add the tagging field to pages.

With that plugin installed all I have to do is go into an accessory page and in the tags section put the title of the product page the accessory should be related to. The cool thing about using tags is that I can relate this accessory to as many products as I need to. It is also very easy to disassociate an accessory – just delete the tag!

Now, I admit there are probably easier ways of doing this but it worked for me. Use the logic below at your own risk…

So now comes the fun part. How in the world can I wrangle the code to display only the accessories with tag’s that match my main product’s title?

I’m working in the default ‘page’ template in my WordPress theme but this would work for any page template.

Make sure you are not working in the current page’s loop. Look for this code and start after it:

<?php endwhile; endif; ?>

We need to get the title of the current page.

<?php $tag = get_the_title(); ?>

Notice that you need to put ‘get_’ before the WP title tag. This allows you to put the page title in a variable – otherwise it would just print it on the page.

Next, we need to query our posts to come back with the appropriate pages (in our case all the pages that have the tag of our title).

<?php query_posts("showposts=5&tag=$tag"); ?>

This is the code written in English.
“Please (its always good to be polite…) show me the five most recent posts or pages that have the tag I defined in my previous code snippet.”

That gets us our pages now we have to display them. In my case I just want to display thumbnails with a link to the accessory page. I’ve chosen an easy route to get the thumbnails and in this example they are not explicitly tied into the WP database (in other words, I’m cheating…).

I have a folder of images inside my main template folder where every image has the same name of its product page.

Let’s get our loop going.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Now lets grab the image thumbnail and link it.

<a href="<?php the_permalink() ?>">
<img src="<?php bloginfo('template_url'); ?>/images/accessory_thumbs/
<?php the_title() ?>.jpg" alt="<?php the_title() ?>"
title="<?php $image_title = get_post_meta($post->ID, "image_title",
$single = true); echo $image_title;?>" /></a>

Here is the code explanation:
I’m grabbing the image from the “accessory_thumbs” folder which is in my current template folder (hence the “template_url”). The actual file name is the same as the title of the page so I can use the WP template tag to get this. I’m also using the title template tag as my alternate text.

The last thing I’m doing is putting a title on the image so that when someone rolls over the thumbnail a little context box pops up to let them know what this accessory is. I’ve done this using a custom field. On the accessory page I’ve created a custom field called “image_title” with a short product description. The code you see above is getting the custom field “image_title” from the current post and displaying it.

End your loop and you are good to go!

Here is the full code snippet.

<?php $tag = get_the_title(); ?>

<?php query_posts("showposts=5&tag=$tag"); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<a href="<?php the_permalink() ?>">
<img src="<?php bloginfo('template_url'); ?>/images/accessory_thumbs/
<?php the_title() ?>.jpg" alt="<?php the_title() ?>"
title="<?php $image_title = get_post_meta($post->ID, "image_title",
$single = true); echo $image_title;?>" /></a>

<?php endwhile; endif; ?>