How to Style a Sticky Post in WordPress 2.7
On Monday I finally found the sticky setting and on Wednesday I showed you how to add the post class to your template so that your sticky post would actually show up on the page.
Today I am going to show you how to style the sticky post. You might want it to look different from the rest of the posts, stand out in some way or not include the date.
Since we have already added the post class to our template, styling the sticky post only requires a little bit of CSS in the style sheet template.
Post class adds the class sticky. So to style the sticky post, add the following to your style sheet:
.sticky {
}
Of course, we need to add some more CSS to that for anything to look different with the sticky post.
On my elephant website, I have the following code:
.sticky {
background:#fff8dc;
border: 1px solid black;
margin-bottom: 7px;
}
This gives the sticky post a yellow background, a thin black border, and a margin at the bottom so the posts don’t bunch together. A regular post looks like this.
A sticky post looks like this.
If you are very observant, you will see that the sticky post does not have the date in it. This is done with conditional code within the loop. I know you’re excited, but that will have to be the topic of another article.
Related posts:
Did you enjoy this article? I can assist you with your WordPress or Facebook project. Contact me and I will provide you with an estimate. You can also connect with me on Facebook or follow me on Twitter.
January 29, 2009 at 8:52 am
Haha. I like how you bait us on.
Did you make those articles on your Elephant site sticky just for the purposes of this tutorial?
As for the removing the date in sticky posts, that is very important. When I see posts in a seemingly random order, I get disoriented. (ie. FranklinBishop’s site, it appears that posts are randomly organized. I can’t even find the latest by looking at the feed! But he is doing some kind of implementation of sticky posts as well.)
Shirley´s last blog post – Your FeedBurner Subscriber Count Is Not Accurate
January 29, 2009 at 12:36 pm
@Shirley – LOL – I didn’t mean to bait – I just thought it would be too much for one article ;-)
The elephant site used the sticky post plugin before I upgraded it to 2.7. I decided to learn how to use the built in sticky post feature and then used what I learned to write up this series. So, I guess the sticky came first then the tutorial.
I completely agree about the dates. Plus, visitors might not realize there is a more recent post below the sticky one.
January 29, 2009 at 4:11 pm
ahhh this is what I was waiting for, you have explained in the simplest way possible!! thanks Kim!!
Raju´s last blog post – How to be Sure Your PC is Not Infected with Downadup/Conficker Worm?
January 29, 2009 at 5:35 pm
Kim,
I just wanted to tell folks to nt be afraid of their CSS files. I was scared to death to do any mods, but after a bit of poking around I’ve been able to make some valuable changes (albeit minor) to my site.
If you’re really nervous about it, cut and paste the code you are going to change in notepad (NOT WORD). Then you will have the original in case you did goof something up.
Thanks Kim!
George
Tumblemoose´s last blog post – If writing content is king
January 29, 2009 at 8:00 pm
Really nice trick for adding styles to Sticky posts.. Thanks for sharing!
Nicholas | Pixobyte.com´s last blog post – How to create a new user in Windows XP without the notice of the administrator
January 29, 2009 at 9:16 pm
@Raju – Thanks! I’m glad it helps. Let me know if you use any sticky posts on your site.
@George – Very good point. I always copy the file I am working on and paste it into notepad++ That way if I happen to mess something up or get distracted, I can just paste the original code back in.
@Nicholas – Thank you for visiting and commenting. I’m glad the post helped you out.
January 29, 2009 at 9:50 pm
Thank for this tip kim. Now, i can fully implement and make my sticky note live. I will do this in the weekend.
Nihar´s last blog post – How to Add WordPress pages to Nav Bar
January 30, 2009 at 3:19 am
Thanks for this 2.7 tips Kim… I guess, I now have a repository of tips from you to revamp my theme as and when I move to WP 2.7.
By the way, with a lot of difficulty I commented an elephant story on your other blog only to realize that I have to sign up for commenting :(
Ajith Edassery´s last blog post – Migration of FeedBurner to Google account
January 30, 2009 at 3:59 am
Hi Kim – This is just what I need. I want to change my theme and need to know more about CSS. Your blog is a great resource for me. Thank you for sharing. You make this look so easy. Is it really THAT easy?
Barbara Swafford´s last blog post – How Your Comment Response Policy Can Change The Dynamics Of Your Community
January 30, 2009 at 8:18 am
@Nihar – I look forward to seeing how you use it.
@Ajith – Great!
I checked the settings on the elephant site and I don’t know why that happened – it isn’t set that way. I’ll test it more later today.
@Barbara – Some parts of CSS are easier than others, but, yes overall it’s not hard :-)
January 31, 2009 at 6:42 am
WordPress has made it even easier for users. Less and less fiddling with the code is required with each version. And this CSS editing is so easy anyone can do it. As mentioned, do not be afraid of your CSS adn any file for that matter. Just keep a backup :D
stratosg´s last blog post – I am “Lost”
January 31, 2009 at 10:03 am
@Stratos – Nice to see you! Backup and it won’t matter if you mess up.
January 31, 2009 at 1:58 pm
This isn’t working with typebased theme.
Eric´s last blog post – Christmas Memories
January 31, 2009 at 5:42 pm
@Eric – Thank you for visiting and commenting. Did you read the first part of the article about adding the post class to the template?
http://www.kimwoodbridge.com/wordpress-post_class-template-tag-and-sticky-posts/
I’m not familiar with the code in TypeBased.
February 2, 2009 at 5:33 pm
Hi Kim,
I really like this post series. I can’t really think of a way to use it on my site right now at this moment. But it will definitely be great to have your articles as a resource if/when I do.
Thanks.
Jim´s last blog post – Bavaria Filmplatz, Here I Come!
February 2, 2009 at 8:39 pm
@Jim – I know. I couldn’t think of a use for one but then made one for the 15% off special. Just make sure you upgrade to 2.7 first ;-)
February 3, 2009 at 1:17 pm
Hi Kim. This is brilliant! I like how you shared a little bit with each post, but didn’t make us wait too long :-) It’s nice to know how to style the sticky post. Thanks.
Davina´s last blog post – Guest Post: Emotions — The Universal Language
February 3, 2009 at 8:39 pm
@Davina – Thank you! I just thought one article would be too long.
February 7, 2009 at 11:39 am
I loved that way you have styled your sticky post. Lets see how much creative i can get while designing my own style.
Madhur Kapoor´s last blog post – January 09 Stats
February 7, 2009 at 2:26 pm
Thanks – It’s kind of simple but was good for the tutorial. I have one on the home page of this site now too.
February 23, 2009 at 9:00 am
I ll implement it in my site.
also i can learn many new WP things from your site.
Its filled with plenty of infos here
Arun | BE Folks´s last blog post – How to avoid get rich scam sites
February 23, 2009 at 12:51 pm
Hi Arun – Thank you. I hope it works out.
April 20, 2010 at 7:08 pm
Sticky post is great for WP I use another plugin for popular posts and they both work great for me. thanks for sharing
.-= Eugene´s last blog ..Conversation Escalation (Make Small Talks Sexy) Scam or Reality Read this review =-.
April 21, 2010 at 6:47 am
Hi Eugene – Which plugin do you use for popular posts?
February 27, 2011 at 11:57 am
Kim I was trying this on my site. But the code didn’t work. Please help me.
February 27, 2011 at 3:00 pm
Hi – In order to assist you I need more information than “it didn’t work”. That isn’t enough to get me started with troubleshooting.
July 5, 2011 at 6:37 am
Very useful tip Kim, except… where in the style sheet does this code go, Kim? Cheers, Nic
July 7, 2011 at 2:29 pm
It can go anywhere in the stylesheet. I frequently add something like this to the bottom of the file.