with Lorelle and Brent VanFossen

Different Category – Different Look: Creating Multiple Single Posts Looks for Different Categories

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:

If this is a single page in the X category
show the single page with these styles added.

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.

12 Comments

  • Posted May 30, 2005 at 9:36 | Permalink

    Thank you very much. This might be what I was looking for for so long!

  • Posted July 22, 2005 at 14:27 | Permalink

    wow this is great. that is obviously the solution for my nr.1 problem right now. thx alot. gretings from berlin
    nicolas

  • Posted July 22, 2005 at 15:02 | Permalink

    … and by the way: you could do exactly the same with the archives.thats pretty cool. thx again

  • Posted December 3, 2005 at 22:03 | Permalink

    Hi
    I like the technique but I cannot get it working with my wordpress setup.

    I use permalinks, and as such links look like this: wordpressroot/category/post

    I have applied the above code to my site. But I am getting errors. I am pretty sure I got the code right. But I think the problem is due to permalinks. Anyone got any ideas?

    Example – http://www.alan-kay.com/category/computing

    Click on any post in this section and errors apppear. Using:
    post;
    if ( in_category(’13’) ) {
    include(TEMPLATEPATH . ‘/single-computing.php’);
    elseif ( in_category(‘4′) ) {
    include(TEMPLATEPATH . ‘/single-film.php’);
    } else {
    include(TEMPLATEPATH . ‘/single-default.php’);
    }
    ?>

  • Posted December 5, 2005 at 18:55 | Permalink

    Go through and check everything very carefully, and make sure that you are not using any characters in your quotes, just straight ascii quotes. And then check in with the WordPress Forum for more specific help as I’m on the road and will be unable to add more helpful information for a couple of weeks.

    It takes one little character code mishap to screw everything up. Good luck with this.

  • Posted August 8, 2006 at 4:55 | Permalink

    Absolutely brilliant in its simplicity and stability. This is just what I needed. Thanx for sharing, I’ll get back to you with my next problem :)

  • Posted October 5, 2007 at 13:40 | Permalink

    Thanks! I was looking exactly for this for my website. You rock!

  • Posted October 19, 2007 at 18:33 | Permalink

    does it work with archive.php template? i have a monthly archive for a specific category and i want that when i click the monthly link, i want to display an archive page with the specific category only. thank you…

  • Posted October 22, 2007 at 23:03 | Permalink

    You might be able to get the conditional tag to work with the is_archive() filter, but I don’t know how to get it to only display a specific category. You will have to ask in the WordPress Support Forum for that kind of help.

    Personally, I have found no usefulness is displaying date oriented content on a blog as few people, except the blogger, care when a post was published, they just want the information published to help them. Sorting any content by date, unless it is very recently, has been found to not be as efficient as searching for keywords, so I haven’t run into this. The forum may help.

  • John Haines
    Posted October 29, 2011 at 15:47 | Permalink

    This is fantastic!

    Just an update though – I finally got this working with only one minor adjustment.

    You need to apply the full URL for the style sheet to work:

    A very BIG thank you!

    This is working in WordPress version 3.2.1

    • Posted October 31, 2011 at 22:52 | Permalink

      Interesting. After all these years, this simple technique continues to work. Not sure if that speaks well of myself or WordPress. :D Thanks.

      • john haines
        Posted November 2, 2011 at 5:24 | Permalink

        I spoke too soon – this works on every browser except for IE7 and IE8 this simply forces the content to the left. I just can not fix. Every other browser perfect but IE7/8!!!

        Any suggestions?!

2 Trackbacks

Post a Comment

Your email is kept private. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>