Cutline Theme for WordPress

One Giant Leap for Mankind

Cutline Theme for WordPress random header image

Different Backgrounds For Single Categories In Cutline

September 15th, 2007 · 10 Comments

As requested in the forums, a small tutorial on how to use different backgrounds for separate categories in Cutline. Using separate templates for each category is rather simple, you only need some additional lines of code.
If you apply this structure, there are no limitations. You could even use a totally different design for every category, with different header, sidebar and font and many more. No limitations are set.

The only thing needed to do so is a conditional tag, and of course Wordpress has the appropriate template tag for this:

(in_category())

Using this condition and a classic if, elseif php call we can change everything we want for the categories we want. Just the post CSS or even the complete design. If you want to feature a complety different design based on pages, use combined conditional tags to define if your new design.

The background images (colored closing tags) and background color for several categories I used on my former blog are easy to achieve.

Open in your theme folder the file index.php or if your theme uses a separate file for the loop, theloop.php and look for following line

Original Cutline Code for Entries

This is the regular entry template and here we will have to change the code a little and insert the conditional tags for the categories we want to alter.

Changed Code For Cutline with Category Conditional Tag

As you could see in the link above, I used a different background for several categories, but there are no limits for this principle.

You can easily use a total new template page for every category, in which case you have to make new template files and call them as in the following screenshot.

Different Entry Template for Different Categories

And obviously you can even call a totally different CSS for every category, or for specific pages. All based on the conditional WP tags.

Now you only need to make the changes to your CSS anymore. In the next screenshot you see a small example of how to achieve this, just like I did at my former blog

CSS example of different styles for different categories

Do you like this article? Submit it to Blogosphere News!

Tags: How To

10 responses so far ↓

  • 1 koreanunification // Sep 16, 2007 at 6:06 am

    Thanks for the really rapid response. I appreciate it heaps. I guess I have to study code a little bit more before I do this, as on several attempts I stuffed it up. I will try again in a few weeks… thanks again!

  • 2 Azmi // Sep 17, 2007 at 7:11 am

    Franky, not sure where to address this, but I couldn’t find the modded version (the latest ) of Cutline theme. Did you delete the post? and the page?

  • 3 Alistair // Sep 22, 2007 at 3:48 am

    I was going to ask y same thing !

  • 4 oyunlar // Sep 27, 2007 at 9:33 pm

    thanx good loved it.

  • 5 Joost // Oct 9, 2007 at 9:02 am

    Hi Franky!
    I think you’ve made a great theme… i’ve adapted it a litte bit, and it looks great in firefox. But in IE it doesn’t! Do you have any idea how to solve this problem?
    Thanks in advance,
    Joost van Keulen

  • 6 Jason Glover // Oct 10, 2007 at 3:18 pm

    Started a thread in the forum as well, but this seems like the closest post.

    Is it possible to have all of the content in front of a background image (tried applying this to the container div with no sucess, only the masthead is affected). I understand how to change the color associated with the body tag from white, but I’d also like to have everything within the container tag on a textured background.

    Any ideas?

  • 7 Raquita // Oct 14, 2007 at 6:30 pm

    I am trying to add more than Five images to my header - but the whole thing goes white when I try to copy info from 2-5 and change the file names to 6 thru 9 - any help would be great!

  • 8 Andy Ihnatko's Celestial Waste of Bandwidth (BETA) ยป Customizing WP Cutlines by Category // Oct 15, 2007 at 6:34 pm

    […] specific categories (like the Sun-Times columns) get their own special title treatments and stuff. This blog post explains how to do […]

  • 9 Clarissa // Nov 18, 2007 at 11:31 am

    If I want to add another customized category, would I use ‘if’ or ‘elseif’? I want to modify about 4 categories so they all have different bg images.
    Thanks.

  • 10 Web Site Tuning - Web Server and WordPress | The Blog of Rudy Amid // Feb 5, 2008 at 4:31 pm

    […] Remove any unnecessary nice-to-have features in the PHP codes, such as rotating headers or different background images on pages. […]

Leave a Comment