Harness the Power of the WordPress Post Class Function and Style Those Sticky Posts

The sticky post functionality in WordPress uses the post class function introduced in WordPress 2.7 to style your sticky post with css. In order to have your sticky posts styled different than your regular posts, you need to have the post class function in your theme within the post loop.

What is a sticky post and why would I use it?

A sticky post is a post that is plucked out from its publish date and moved to the front of your blog. This will keep the post on your homepage so you can increase the visibility of that post. Sticky posts have many uses–one would be if you were having a giveaway. You could stick that post to your homepage so everyone would see it when they visit your blog. Then, once the contest is over, you remove the sticky post option and the post falls back in line to when it was published.

Adding the post class function to your theme

Within the post loop there should be some code that looks something like what is below:

Rest of loop here

Now some themes use more than one class to style their posts. You could have a setup like the following where you have not only a post class but also a box class. Thankfully for you they have made it very easy to add that class into the post_class function.

Rest of loop here

To update the theme all we need to do is replace class=”post” with our function call. Your updated post loop will now look like.

> Rest of loop here

If you need that extra class like the second example that also uses the box class. All you need to do is pass that class name into the post class function.

> Rest of loop here

That is it for updating the code within your theme.

Adding style to your sticky post

The post class function will automatically add a class of sticky to any post marked as such in the post admin screen. So in your style sheet you will need to add some styles for this new class. Here we just added a different background color to our sticky posts.

.sticky{
	background-color: #c2c2c2;
}

Marking a post as sticky

stick-post-edit-window.png

In WordPress 2.8, make your way to the edit screen for the post you would like to make sticky. You’ll then see a box like the one to the left with the visibilty section closed. Click the edit link and you will now see the checkbox. That’s all it takes to take advantage of sticky posts in WordPress.

Be sure to check out the WordPress Codex to find more info on all the functions available in WordPress.