September 5, 2015 / IST / Science & Technology.

wordpressI had a unique challenge. I needed to assign a specific stylesheet for only one category of blog posts in a WordPress blog. There are a lot of ways of doing this, but I wanted it to be fast and simple. I choose to use a WordPress conditional tag to check which category the blog post was in, and then change the header of the post to the one with the customized stylesheet for that particular category.

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 stylesheet. The stylesheet was huge. With about a thousand articles on my site, why should I include over 30K 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 web pages and not the rest of the site. This is one method. In Using WordPress Categories to Style Posts, guest blogger, Abhijit Nadgouda of ifacethoughts, explains a similar method that might be easier for some.

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.”

The If in_category Conditional Tag

The process 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:

$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. When the user visits any post within that specific category, the custom stylesheet is used for those blog posts.

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:

$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 with a number 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:

/* Don't remove this line. */
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.

Here are some other resources that will help you with WordPress queries and the WordPress Loop, as well as developing, designing, and customizing your WordPress Theme.