Tutorial: How to Create Conditional Styling for Your Blog

Recently, we were tweaking Birdfreak.com and thought it would be cool to display a different style for a specific category; digiscoping to be precise. Thankfully, there is a somewhat easy, although not straightforward, way to do this.

Please note that this was done with WordPress 2.8 and our customized Thesis Theme. There are surely other (and possibly easier) ways to do this but here’s how it worked for us.

First, you need to find the category id # of the specific category. To find this, go into your admin panel and select “categories” under “posts”. By editing a category the URL shows in your browser with an ID #. That is the number we need.

Now, this is where it gets a bit tricky. We use Thesis (which is by far the best WordPress theme) so we can edit our custom_functions.php file to add a new function. [If you are code savvy, this can be done in other themes as well.]

To add a function we use PHP and the standard process of hooking the function where we want it.

function digiscoping_style() {
}
add_action('wp_head', 'digiscoping_style');


To specify the category we add that in between the curly brackets { }. But, by just doing that, if a post under that category is on the home page, it will display the new style on the home page. This is something we did not want it to do. Thus, we use the WordPress code if (is_home()) to force it to display the the correct style.

function digiscoping_style() {
if (is_home()) {
echo '<link rel="stylesheet" href="http://birdfreak.com/wp-content/themes/thesis_151/custom/custom.css" type="text/css" />';
}
elseif (in_category('209')) {
echo '<link rel="stylesheet" href="http://birdfreak.com/wp-content/themes/thesis_151/custom/digiscoping.css" type="text/css" />';
}

This worked well for all the posts under the category but we also wanted it to show on two specific pages. Thus we added this code as well.

elseif (is_page('2103')) {
echo '<link rel="stylesheet" href="http://birdfreak.com/wp-content/themes/thesis_151/custom/digiscoping.css" type="text/css" />';
}
elseif (is_page('1942')) {
echo '<link rel="stylesheet" href="http://birdfreak.com/wp-content/themes/thesis_151/custom/digiscoping.css" type="text/css" />';
}

We still had to style the digiscoping.css file, but that is the easy part

Tagged as: Blogging, Thesis, WordPress