Custom Styling for Posts

In WordPress having a custom style for a static Page is fairly easy when you use Page Templates, however the same is not so straight forward for your posts.

You may wonder why you would want to style some posts differently to others. WordPress is now so much more than just a simple blogging platform. You can use it as a fully fledged photo gallery, as a CMS for your website, or a combination of these.

So how do we do this? There are at least three levels at which you may want to target posts. A specific post, all posts in a specific category or all posts where the post’s category is in a specific parent category.

Target a Single Post

If you want to target a single post then you can use the is_single() condition, and pass the ID or title of the post. So, for example, you wanted to insert an advert, or a specific image into one single post, then you could get the post ID eg. 20, and then add this using

< ?php if (is_single(20)) : ?>
     <div id="advert">
        <a href="http://www.link-to-advertiser.com"><img src="/path/to/advert.jpg" alt="Advert is Here" /></a>
     </div>
< ?php endif; ?>

You could then target the advert ID to perhaps float it to the right of your content.

Target Posts in Category A

Rather than targeting a single post, you may want to target all posts in a particular category. For example, you’ve got a category about WordPress on your site, and you’ve sold an advertising spot to someone who wants to advertise their Premium WordPress themes site on those posts only. So of course you don’t want to have to update your single.php page every time you write a new post about WordPress. Instead we can simply target the category using the in_category() conditional. So, for example, if your WordPress category ID is 4 then using similar code to above we would use

< ?php if (in_category(4)) : ?>
     <div id="advert">
        <a href="http://www.link-to-advertiser.com"><img src="/path/to/advert.jpg" alt="Advert is Here" /></a>
     </div>
< ?php endif; ?>

Instead of using categories, you could also tag every post you want to have an advert on (which removes the constraint to a single category), by using the has_tag() conditional. If you used a tag called ‘wpadvert’ then you could use

< ?php if (has_tag('wpadvert')) : ?>
     <div id="advert">
        <a href="http://www.link-to-advertiser.com"><img src="/path/to/advert.jpg" alt="Advert is Here" /></a>
     </div>
< ?php endif; ?>

Target Posts in a sub category of category X

A few weeks ago, a friend asked me if he could use WordPress to set up a used car website, and would he need a custom plugin. Naturally the answer is yes! We had a chat about it and worked out the best way to do this was to create a category called ‘Cars’, and each car would have its own post within the manufacturer’s category, which would be a subcategory of Cars. So we would have

Cars (Parent Category)
– Audi (Child Category)
—- A4 (Post)
—- TT (Post)
– BMW (Child Category)
—- Z3 (Post)

Fairly straight forward really. He needed a way to style all the posts for cars differently to other posts on the site. However, whilst in_category() would be perfect for this, he couldn’t determine all of the child categories, as the person updating the site could add more manufacturers as and when required. So we needed a way to say ’style all posts in the Car category, regardless of which child category they’re in’.

There’s not a direct method for getting this information, however after a bit of searching through the Codex I managed to work out the code needed. First of all we need to use the get_the_category() template tag. We can get information about the post’s category using this tag, including the category parent ID (if one exists). So to use this we used

< ?php
$cat = get_the_category();
$parentid = $cat[0]->category_parent;
?>

The first line here puts all of the information into our $cat variable. Then we get the parent ID by targeting the category_parent variable. Note, this code simply assumes that the post is only in one category, as the $cat variable contains an array of all the categories that the post is in.

We can then just check and see if the $parentid is equal to the parent ID of the Cars category (eg. an ID of 2). Modifying our code to then display an advert for all car posts would be

< ?php
$cat = get_the_category();
$parentid = $cat[0]->category_parent;	

if ($parentid == 2) : ?>
     <div id="advert">
        <a href="http://www.link-to-advertiser.com"><img src="/path/to/advert.jpg" alt="Advert is Here" /></a>
     </div>
< ?php endif; ?>

As it happens, the actual reason for this research was to allow the client to upload a number of photos for each car via the media uploader. Then rather than leaving the client to try and insert them into the post, my friend was going to use code similar to that used in the post mixing gallery and blog posts, to display the photos on the page.

With other blog posts for news and events, he couldn’t just change the single.php theme file for all posts in case it disrupted the non car posts.

You may wonder how to do the same thing but with a post under multiple categories. We can modify the above code to loop through each category and check for a match on the category parent ID using

< ?php
$parentids = array();
foreach (get_the_category() AS $cat) :
    $parentids[] = $cat->category_parent;
endforeach;	

if (in_array(2, $parentids) : ?>
     <div id="advert">
        <a href="http://www.link-to-advertiser.com"><img src="/path/to/advert.jpg" alt="Advert is Here" /></a>
     </div>
< ?php endif; ?>

To talk through the code above

2. Initialise the $parentids array for security
3. Use the foreach loop, to loop through the get_the_category() array
4. Add the category’s parent ID to our $parentids array
5. Close the foreach loop
7. Use in_array to check and see if the Cars category ID of ‘2′ is in the array of parent IDs
8. If we have a match we display the code

You may wonder, why not just put the if statement inside the foreach code, however if the post was added to two child categories within the parent category, then the if statement would be true twice. This way it will only be displayed once providing there is at least one match.

Conclusion

Hopefully that’s given you some ideas on how you can style your posts differently, or insert additional content, adverts, images etc. depending on whether the post is in a specific category or tagged with a certain tag. Once the code is set up, it means you don’t have to continually edit your theme and you can get on with the important job of writing content

Written by Sarah from Stuff By Sarah
Posted on December 14th, 2008 and filed under WordPress Coding & Design
Do not forget to subscribe to our RSS feed for updates

9