Custom Category Styles
I had a few people ask me yesterday how I was able to separate the styles on my blog into normal posts and the “asides” post – news from WordPress, etc. It’s not hard, so I thought I would share it with you.
First off, you need to make sure that your posts have the dynamic categories that can be assigned by WordPress. This is done by replacing:
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
with
<div id=”post-<?php the_ID(); ?>”>
WordPress adds in (using post_class) quite a few classes that will allow you target posts with CSS by tag, category, or even post type. Once this is in, we find out the category name for our post and style it accordingly:
.blog .category-asides{padding: 20px !important;background: #e6e6e6 url(https://mitchcanter.me/wp-content/uploads/2011/02/news-bg.jpg) no-repeat bottom right;position: relative;}
I’ve given it padding, and some background edits (such as a color and background image – the WordPress logo).
Now, I don’t want people to find their way into the single article on these “asides” posts – they have the original source quoted in the story and I’m disabling the ability to click through on the title. That means we need to change the code in the loop.
Open the index.php file and look for this statement:
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
We’re going to use a conditional tag to check which category it’s in. If it’s in our asides category (in this case, category ID #6) then we use a specific code. Otherwise, it displays as normal:
<?php if (in_category(‘6’)) { ?><h2><?php the_title(); ?></h2><?php } else { ?><h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2><?php } ?>
Notice the first part contains just the title, while the second contains a hyperlinked title.
One last thing I want to do is to display a link to the original source. I want people to see quickly that I “reblogged” this from another site and that it’s just a new posting – not original content from me. So, I used another conditional tag (this one goes right below
<?php the_content(); ?>):
<?php if (in_category(‘6’)) { ?><div class=”newsmeta”><a href=”<?php $key=”source”; echo get_post_meta($post->ID, $key, true); ?>”>Original Source</a></div><?php } else { ?><?php } ?>
See that php code starting with $key? That’s a variable. Basically, I’m asking WordPress to(for this loop only) assign a value to that variable. But where am I pulling from? Why, a custom field, of course! This allows me to echo the “post_meta” (or custom field) labeled “source”. In the post editor, I paste in a URL and it puts in a nice link that links to the original article.
I also gave it a bit of formatting to make it look nice:
.newsmeta a{font-style: italic;font-size: 10px;}
And that’s it – by separating the content you can make certain categories look and even operate
differently than other posts.