Ben Bleikamp's blog about technology and college

Designing with WordPress, Part 2: 3 simple tricks

Do you ever get sick of seeing the same thing over and over on WordPress blogs? They all seem to display 10 posts with a date, a few tags, and a comment count. There is a sidebar on the side with category lists and an archives list. It gets old fast, especially if you’ve designed more than a few templates. It’s fun to find ways to spice things up a bit, and here is a list of three things I’ve done lately.

1. Color Coded Categories
I recently finished this latest redesign of Bleikamp.com and one of the things I had been planning on doing was color coding my categories. Chris Pearson did a similar trick at 901am.com and David let me take a peek at the code. It’s a very simple piece of code that can add a bit of life to your theme. Note that this won’t work well if you are constantly adding new categories to your theme and treating them like tags.

The first piece of code looks something like this:

<?php $category = get_the_category(); $category = $category[0]; ?>

Go ahead and paste that into your WordPress loop.

Now you’re set up to experiment with color coding categories. It’s actually very simple using CSS. What I’ve done on Bleikamp.com is setup categories to display within their own <span>, it allows me to customize the colors for each category by assigning the class as the category name.

<span class="<?php echo($category->category_nicename); ?>“></span>

Tah-dah! The bold part is all you need to printthe category name anywhere in the loop (i.e. just recopy it to the space between the span tags to display the category name). So now, when you go to your CSS file, you simply setup a <span> with the class of the category name you want to style differently. For example:

span.blogging { background: #1268b1; }
span.politics { background: #2daf00 ; }
span.technology { background: #5600af; }
span.life { background: #bb0065; }
span.business { background: #c13200; }
span.design { background: #ffba00; }
span.quick { background: #333; }

You could make some categories bold, other italic, give them any background color you want, and so on and so forth. Be creative.

2. Show users where they are on your site by highlighting the current page in the navigation.

WordPress also makes this very easy. It just takes a few WordPress conditionals and everything is done. My code looks like this:

<li><a href="<?php bloginfo('siteurl'); ?>" <?php if (is_home()) echo(’class=”here” ‘); ?>>Home</a></li>

For a full list of the conditional tags check out the WordPress documentation. There is no excuse not to do this when WordPress makes it so easy.

3. You tell me what you want to know about designing with WordPress and I’ll write about it.