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; ?>

And for all you counters out there, I know there are actually twelve but the last two aren’t free and 10 sounds much more round in the title…

Admin Menu Drop Down

Hate clicking around to get to an option page buried deep in the Wordpress Admin soil? Me too.

This is typically the very first plugin I install. When developing with Wordpress you spend a lot of time jumping back and forth in the WP admin menu and this plugin saves you a lot of clicks. And if you are behind a slow corporate firewall it saves you a ton of time from the unnecessary page loads. Get this plugin!

2.5 compatible: Yes
Plugin page: http://planetozh.com/blog/my-projects/wordpress-admin-menu-drop-down-css/

One Click Install

If the Admin Drop Down Menu plugin the first thing I install this plugin is a close second and sometimes first…

This is an amazing plugin that can eliminate the downloading, unzipping, uploading circus that one must go through for each plugin he wishes to install. With One Click you can copy the link to the zip file, paste it in the admin page, click go and your plugin is uploaded, unpacked and installed. You just have to activate it. Get this plugin!

2.5 compatible: Yes
Plugin page: http://anirudhsanjeev.org/oneclick-plugin/

Activate All

If you have a directory of plugins you use all the time for specific installs it may actually save you time to upload all at once and use this plugin.

Once this plugin is activated it takes a stroll around the plugin folder and activates everything it can get its hands on with no additional work for you.

2.5 compatible: Yes
Plugin page: http://mass-automation.com/2006/10/19/activate-all-of-your-wordpress-plugins-with-one-click/

The download page on the site doesn’t seem to be working at the moment so I’ll post my zip file of the plugin here. Please check the authors site first before using this one. If the authors download comes back I’ll remove this link.

Plugin Central

If this plugin and the One Click Install plugin could mate and have a love child, Wordpress plugin life would be sweet indeed.

Plugin Central allows you to automatically update all of your plugins and install new plugins from the dashboard. It also generates a list of all plugins and active plugins from its settings page.

The only downsides to this plugin is that there is a giant author credit right at the forefront of the dashboard which may not be professional for some client installs. And in order to install plugins automatically they must be in the Wordpress plugin repository.

(Update) The plugin has been updated. The newest version has removed the author credit and allows you to install files from the url (any zip file should work).

2.5 compatible: Yes – And only WP 2.5
Plugin page: http://www.prelovac.com/vladimir/wordpress-plugins/plugin-central

PHP Info

If you need to know if your eAccelerator is enabled this plugin is for you.

It also gives you other pertinent php and Wordpress specific information.

2.5 compatible: Yes
Plugin page: http://wordpress.designpraxis.at/plugins/phpinfo/

WP-Debug

If you are into writing a lot of php and need to do some debugging because your code just doesn’t seem to work this plugin may help.

(update) The plugin has Krumo bundled with it and you don’t need to be a hard core php developer to use this. The author uses it a lot for theme design. This could be a very valuable time saving plugin.

2.5 compatible: Yes
Plugin page: http://www.siolon.com/2007/wp-debug/

Diagnosis

If you are an information junkie and need to know-it-all, this plugin is for you. It displays all sorts of technical data about the server Wordpress is installed on.

2.5 compatible: Yes
Plugin page: http://nlindblad.org/wordpress/diagnosis

DB Backup

Before you start screwing around with stuff too much you might want to do a database backup.

Don’t come to this site crying when your really cool modified version of the Hello plugin wiped out all your posts from the last 10 years.

2.5 compatible: Yes
Plugin page: http://www.ilfilosofo.com/blog/wp-db-backup/

PHP My-Admin

After you screwed up your database from your awesome new plugin you created you’ll need to access it to delete all of the entries it made.

This would normally be a pain but if you have the phpMyAdmin plugin installed its easy access from your Wordpress admin.

2.5 compatible: Yes
Plugin page: http://wordpress.designpraxis.at/plugins/wp-phpmyadmin/

Site Unavailable

As you are developing the next Bloggie worthy site you probably don’t want the whole world peeking in.

This plugin hides the site and lets the user know it is down for maintenance. The plugin includes a style sheet so you can pretty up the default screen.

The author also credits himself on the unavailable screen which might be unprofessional for some client installs.

2.5 compatible: Yes
Plugin page: http://thefunzone.awardspace.com/wordpress/?page_id=51

Auto-Installer (not free)

While not free this plugin looks like it could be very useful to the right person. WP Auto-Installer allows you to easily create Wordpress blogs with just a few clicks.

2.5 compatible: Should be if you have to pay for it.
Plugin page: http://wpautoinstaller.com/

WordPress Cloner (not free)

WP Cloner scans the settings, plugins and posts of your perfectly configured blog and then allows you quickly configure any other blog with those exact details. It basically copies the configuration of one blog and pastes it onto any number of other blog.

2.5 compatible: Should be if you have to pay for it.
Plugin page: http://wp-cloner.com/

According to Croft a framework is:

“…a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused. The goal here is to allow the designer or developer to focus on tasks that are unique to a given project, rather than reinventing the wheel each time around.”

After reading the article and doing some additional research on the subject I thought it made complete sense. In fact I had been using my own pseudo framework for Wordpress development – using existing Wordpress templates as a layout and coding guide.

My workflow went something like this:

1. Mock up the home page and maybe a couple other pages in Photoshop.
2. Search for a Wordpress theme that has a similar layout to my mockup
3. Evaluate the themes I found for the best semantic seo friendly markup
4. Wrangle the code to insert my images and functions into the site.
5. Rinse and repeat.

One of the advantages in using Wordpress is that there are literally thousands of frameworks already in existence. In fact one could argue that every single theme built for Wordpress is a framework. So how can this help you the Wordpress developer and designer? I’ve compiled a list of themes that in my opinion provide the best frameworks for developing in Wordpress.

Please note. I am in no way advocating blatant copying of stylesheets or markup in anyway. These themes are to be used as a guide

Typography and Semantic Markup

• Copyblogger
• Cutline
• Thesis (not free – but incredibly awesome nonetheless)

Magazine Style

• The Morning After
• Grid Focus

Sandbox and Other Very Flexible Themes

• Sandbox
• Moo-Point
• Sandpress

If there are other themes you have used and loved for a framework let it be made known in the comments!

On a side note, more recently instead of using actual Wordpress themes I’ve been using specific frameworks that you might be interested in taking a look at.

Blueprint is a framework that is very popular. According to its site these are some of its notable features:

• An easily customizable grid
• Sensible typography
• Relative font-sizes everywhere
• A typographic baseline
• Perfected CSS reset
• A stylesheet for printing
• Powerful scripts for customizing your layout
• No bloat of any kind

Another brilliant framework I’ve discovered in the last couple of weeks is 960 by Nathan Smith. One of the main differences between 960 and Blueprint is the size of grid used and how many columns are included. Blueprint has a width of 950px broken into 24 columns. 960 has a width of…wait for it…960px! And it is broken into 16 and 12 columns respectively.

No matter what you use I think most people will agree that having some sort of framework in your workflow will greatly increase your productivity. And at least for me not having to put my limited brain power in those areas leaves it open for more creativity.