Categories: Tutorials

How to apply post styling per category in WordPress

If you want to apply different styling to posts per category, follow this simple tutorial!
The basis for this tutorial comes from an article on the wordpresshero.com website (unfortunately not online anymore), but I expanded it a bit as not everything is explained in detail, which is handy if you’re just starting out with WordPress. There are a few simple steps:

1. Copy the existing single.php file and rename it to single-default.php.

As an example, I’m assuming a website with 3 main category posts which you want to style separately: blog, photography and video.

2. Replace the content of the original single.php with the following code:

if ( in_category('2') ) {
include(TEMPLATEPATH . '/single-blog.php'); }
elseif ( in_category('15') ) {
include(TEMPLATEPATH . '/single-photography.php'); }
elseif ( in_category('18') ) {
include(TEMPLATEPATH . '/single-video.php'); }
else {
include(TEMPLATEPATH . '/single-default.php'); }
3. Create the following files by copying and renaming single-default.php: single-blog.php, single-photography.php and single-video.php.

4. Make sure each category you wish to style separately is identified by its ID in the code above. You can find this ID by going to the Categories overview in the WordPress manager, and hovering over each Category title. A URL will show up on the bottom of your browser. The last part is the ID number. See the screenshot below:

5. Now you can add or remove any functionality you want per category and use different CSS styling for different looks! The remaining single-default.php will be applied to the categories not specifically mentioned in single.php.

You can create as many different types as you like. Do keep in mind though, that if you list a post in more than one category, WordPress will automatically apply the styling applied to the category with the lowest ID (which in this example would be blog, as its category ID is 2).

This post was last modified on 26/06/2018 10:37

Boris Hoekmeijer

Share
Published by
Boris Hoekmeijer

Recent Posts

Agribusiness Service

Website en logo ontwerp voor Kookstudio Aalsmeer - voor uw kookclub, kookfeest of bedrijfsuitje in…

4 months ago

CardioThoracaal Chirurgie Zorgpad

Website en logo ontwerp voor Kookstudio Aalsmeer - voor uw kookclub, kookfeest of bedrijfsuitje in…

4 months ago

7huijzen Food Quality & Innovation Management

Website en logo ontwerp voor Kookstudio Aalsmeer - voor uw kookclub, kookfeest of bedrijfsuitje in…

6 months ago

Prime Housing

Website en logo ontwerp voor Kookstudio Aalsmeer - voor uw kookclub, kookfeest of bedrijfsuitje in…

6 months ago

Cor de Kroon

Website en logo ontwerp voor Kookstudio Aalsmeer - voor uw kookclub, kookfeest of bedrijfsuitje in…

8 months ago

Hoe leeg je de cache van je browser?

Building your WordPress website efficiently using the 10 tips I documented after years of experience.…

1 year ago