How to Create Sticky Posts in WordPress

ROUGH TRANSCRIPT

Hi everyone, and welcome to Tubetorial. I’m Lorraine Nepomuceno.

Today I want to show you how to use the Sticky Posts feature in your WordPress blog. Sticky posts are blog posts or articles that remain at the top of your homepage for as long as you like. This is great for certain important posts you want to display longer than usual, even if you create other posts after them.

Sticky Posts have been a feature since WordPress 2.7- but you might not be using it, or maybe you’re not sure how it works. In any case, I’ll be showing you a quick and easy way to start using Sticky Posts on your blog.

This is the front page of my personal blog. I want to make the second post on this page, titled Thirty Five, a Sticky Post, so that it’ll stay at the top of my page as long as I like.

So I’ve logged into my WordPress dashboard- as you can see, I’m running WordPress 2.8.4 on this blog- so you do want to make sure you’ve installed a version of WordPress that’s at least 2.7.

Now let’s make Thirty Five a Sticky Post. It’s really quite simple to do this- all I need to do is go to the Editing area, and look for the Visibility link on the upper right hand section. I’ll click on the EDIT link next to PUBLIC, and check “Stick this post to the front page”. I click OK, press the UPDATE POST button- and I’ve just made that post Sticky.

I’ll reload my front page- and as you can see, the post Thirty Five, although it was posted way back in October, is now at the top of my blog.

Now that’s working fine, but what if I want my readers to KNOW that this is a Sticky Post? I don’t want to confuse anyone who sees a post made last October listed later than a post made a few days ago. What I need to do is style it differently, using CSS.

The first thing to do is add the following tag as a div to my index.php or home page:

<?php post_class(); ?>

Let me go into the Theme Editor window, so you can watch me place the tags. This will apply a CSS class called “sticky”.

I save that, and then I go into the Stylesheet, so I can define a style for the new class

.sticky {padding:8px;background-color:#ccc;color:#000;}

I’m giving it some padding, making the background color grey, and the text black instead of dark grey like the rest of the posts. That should set it apart.

Now let’s reload the page… and now my Sticky Post stands out from the rest.

The great thing about this, of course, is that you can style your Sticky Posts to your heart’s content- give them different backgrounds, place them on different areas of the page, float them to the right or left… you can really play around with this. AND it’s really simple to make a post Un-Sticky, simply by unchecking that little box that we checked earlier.

I hope you enjoyed this episode of Tubetorial. For more video tutorials, please visit us at Tubetorial.com