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


Tubetorial

7 Comments

Your email address will not be published.

  1. Hi,
    thanks for the tutorial. It is very useful.
    I have one question. I would like to make the second post on my site sticky, in order to have fresh posts at the top of the site. How can I do this?
    EG: I want the freshest post at the top, and an advertorial post as a second, sticky, post, followed by the rest of the posts.
    Thanks for your help in advance.
    Cheers ,
    Anton

  2. Finally someone who shows where to put the class code. I knew it was somewhere wrapped around the loop, had no idea where that was though. Thanks for sharing!

  3. Hello,
    any news yet about my previous comment? I would like to know if it is possible to make the second (not the first) post sticky.
    In your post you write you want to make the second post sticky:
    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.
    however, finally, the first post is sticky.

    Thanks!

  4. i tried getting sticky posts to work .. but could not get that done.. is it that i need to try that in the live server only???

  5. Very useful to see what you are doing via the video. I installed a sticky plugin and it seemed not to work. I just needed to see you using the publish settings.

    Phew!

    Thanks

    Alex

  6. Hi Lorraine,
    thank you so much for the very useful information.

    Does it matter where you place the code on the page of the index file?

    Thanks again!
    Yorinda

  7. I have my own wordpress blog. but i didn’t know about this sticky post. after reading your post, i tried to find this sticky post in my wordpress admin section. but i didn’t get. I am using wordpress 2.9. I guess i need to install that plugin manually. how can i get this plugin?