Taking Your Camera on the Road

With the amazing help of the supportive folks on the WordPress Support Forum, my challenge was answered and I wanted to share this neat piece of template tag and conditional tag code with you.

My very popular series on CSS Experiments in Design consists of almost a dozen pages with hundreds of different design experiments. Most of these feature inline styles, but a lot of them had their own styles in a separate style sheet. The styles sheet was huge. With more than 600 articles on my site, why should I include over 20K of styles in my site's default style sheet when I only need them for a handful of articles?

I needed a way to let the style sheet for the CSS Experiment pages only appear on those pages and not the rest of the site. This is good for overall site optimization and faster access times.

With only one header template in my WordPress Theme, and the conditional tags saying "if this is a single page, show the single page", I needed something that said:

By default usage, the WordPress Template Hierarchy states that when you click a link to a single post page, WordPress will automatically look for the single.php template file and if it doesn't find it, it will look for the index.php and return the information in there for displaying a single post.

What I wanted was to throw a condition in the single.php that says "if this post belongs to the X category, do something different." This is what we came up with.

Creating Three Single Post Templates

We began by making two back up copies of the single.php page called single1.php and single.2.php.

Inside of the original single.php, delete everything and replace it with this:

<?php
$post = $wp_query->post;
if ( in_category('9') ) {
include(TEMPLATEPATH . '/single2.php');
} else {
include(TEMPLATEPATH . '/single1.php');
}
?>

In the most simple terms, the PHP code issues a query that says "Check the post. If the post is in category ID number 9, display single2.php. If not in category ID number 9, display single1.php."

In the in_category(), we set the category ID number to 9, the one that holds all of my web page design articles and experiments.

This is just the start of what you could do. To showcase different results in different categories, you could create a long list of conditions like this:

<?php
$post = $wp_query->post;
if ( in_category('9') ) {
include(TEMPLATEPATH . '/single9.php');
elseif ( in_category('12') ) {
include(TEMPLATEPATH . '/single12.php');
elseif ( in_category('42') ) {
include(TEMPLATEPATH . '/single42.php');
} else {
include(TEMPLATEPATH . '/single1.php');
}
?>

In my two "single" copy template files, I put a comment code in the top of each one as a reminder of what each one was to do, like this:

<!-- single 2 - for CSS Web Page Articles -->

Since I don't want to change these two different single post templates, just add the additional style sheet to the second one, I created two header template files, exact copies like with the single.php, with an extra style sheet link in the top of the second one.

Inside of header2.php in the head section, I added the second style sheet link:

<style type="text/css" media="screen">
@import url('/wp-content/themes/mytheme/style.css');
@import url('/wp-content/themes/mytheme/cssstyles.css');
</style >

In the new single.2.php template file, I changed the GET for the header to get the header2.php:

<?php
/* Don't remove this line. */
require('./wp-blog-header.php');
include(get_template_directory() . '/header2.php');
?>

To test this, I uploaded all the files and clicked on any post NOT within category 9. Clicking View Source in the browser, I hunted for my comment tag and "single 1" or "single 2" in the code to see which "single" template was used. If it worked, I should see a comment that says:

<!-- single 1 - for all the rest of the pages -->

If I see "single 2" then something is wrong.

Then I clicked on a single post IN category 9 and did the same thing. There I should see the comment that this is indeed "single 2" and the two style sheet links should be in the header as proof that everything is done right.

There are many ways of doing this, as the PHP and conditional tags and template files used by WordPress are so versatile, but this was very easy to do for someone who is lacking in much PHP skill, though I'm learning the hard way. From this, you can make as many single post page looks as you want, as long as they are styled by their category.

Authors, photographers, teachers, and public speakers, Lorelle and Brent VanFossen, travel extensively with their camera and pen in hand to bring you a variety of articles on nature and travel photography including basic nature photography and the photography business, writing, travel, recreational vehicles, web page design, and life on the road. All images, design, and content are copyrighted and protected by law.

You can find related articles to this topic in our WordPress and Photography categories. The previous post is Big, Stark & Chunky: A List Apart and the next post is Separating Comments and Trackbacks and Pingbacks in Wordpress - The Answer. Different Category - Different Look: Creating Multiple Single Posts Looks for Different Categories, Issue Number 623, by Lorelle VanFossen, was updated February 26th, 2006.

You can follow comments through the RSS 2.0 feed and you can find more feeds on our Feeds List. Your comment is welcome, as are trackbacks from your site.

Related Articles

WordPress Plugin - Just One Category Customizing the WordPress Loop for Excerpt Queries Fixing WordPress Category Separators Microsoft Free Program - Virtual WIFI Imitating MovableType Import File PhotoQuilts by Lorelle and Brent VanFossen Compromises Along the WordPress Import Path Really Rocking with WordPress

Submit Article: BlinkList | Blogmarks | Digg | Del.icio.us | Ekstreme Socializer | Feedmarker | Furl | Google Bookmarks | ma.gnolia | Netvouz | RawSugar | Reddit | Scuttle | Shadows | Simpy | Spurl | Technorati | Unalog | Wink | Yahoo MyWeb2