Pro Blog Design

With WordPress 2.7 came the post_class function. This gives a set of CSS classes to a post, depending on what’s in the post (e.g. based on what category it is in).

The code that you use in your template to use this is simply like this:

1

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

While this is a fantastic function for changing a post’s display, the classes that it outputs are actually quite limited. Luckily, we can add our own, and we can also add our own dynamic classes.

Basically what I mean by this is that by using some extra lines of PHP, we can add our own classes into the post_class function depending on some other post information.

The default classes that are output are:

• post-id, where id is the post’s id
• post type, which by default are post, page and attachment
• sticky, for posts marked as sticky on the post write panel
• hentry, for hAtom compliance
• category-category-name, so if your category was wordpress, it would be category-wordpress
• tag-tag-name, so if your tag was php, it would be tag-php

NB. This post uses some functions only introduced in WordPress 2.8.

Author Styling

A lot of blogs style their authors’ comments differently to visitors’ comments, so why not style one author’s posts differently to another’s?

First of all, to get the author of the post, add this line before the start of your loop.

1

<?php $author = get_the_author_meta('display_name'); ?>

1. This creates a new variable called $author…
2. And assigns the value of get_the_author_meta to it, specifically the author’s display name.

If you want to use other aspects of the author’s meta, take a look at the get_the_author_meta entry in the codex.

And then to add that as a class to post_class, add this line:

1

<?php post_class('box ' . $author); ?>

1. As an example of a static class in conjunction with this dynamic class, I’ve added the arbitrary ‘box’ class.
2. Note the space before the closing apostrophe; this ensures that there is a space between it and our dynamic class.
3. We concatenate our author variable to output the name of our author as a class.

We can now style each post depending on the author. Just as an example, we’ll change the border colour.

1
2
3
4
5
6

.Alex {
border: 1px solid #0066CC;
}
.Martin {
border: 1px dashed #CC0000;
}

Show Post Popularity with CSS

This is a little more complicated, but ultimately, we’re going to use the amount of comments on a post to produce a different class accordingly.

You may wish to change these numbers to suit the average number of comments you get on a post to determine what is more popular, but the concept remains the same.

To get the amount of comments we need to add the following code, this time inside the loop.

1
2
3
4
5
6
7
8
9
10
11
12

<?php 
	$postid = get_the_ID();
	$total_comment_count = wp_count_comments($postid);
		$my_comment_count = $total_comment_count->approved;
	if ($my_comment_count <10) {
		$my_comment_count = 'new';
	} elseif ($my_comment_count >= 10 && $my_comment_count <20) {
		$my_comment_count = 'ermerging';
	} elseif ($my_comment_count >= 20) {
		$my_comment_count = 'popular';
	}
?>

1. We create our first variable and set the post’s ID as its value.
2. Using that variable we can access the comment count for that post using wp_count_comments, assigning that to another variable.
3. That function gets all comments, whether spam, awaiting moderation or approved, but luckily we can say to only get the approved count using ->approved.
4. Now we can test the value of the $my_comment_count variable using php operators.

Now for each class we have created, we add a CSS rule. Because the point of this is to show an article’s popularity visually, it makes sense to use some kind of spectrum, I’m using yellow to red.

1
2
3
4
5
6
7
8
9

.new {
border: 1px solid #FFFF00;
}
.emerging {
border: 1px dashed #FF9933;
}
.popular {
border: 1px dashed #CC0000;
}

Custom Fields

To get the ultimate control over a post’s display we can turn to custom fields.

First of all we add a custom field value and key pair to our post:

So in this case, we add two classes, showing my mood when I wrote the post, and what the weather was doing. Just to show how that can be used, we can add some CSS to show a background for the weather.

1
2
3

.raining {
background: transparent url('images/raining.jpg') no-repeat right bottom;
}

We can use the following code to get our custom field:

1

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>

Remembering to add the $custom_values variable to our post_class function.

Taking the idea further

Some other ways you can use post_class dynamically are with the_time, checking for differences in the_time and the_modified_time or even with word count. See what interesting ways you can come up with to change a post’s display depending on some of its dynamic aspects.