WordPress 2.7 Post_Class Template Tag and Sticky Posts
On Monday I showed you where the sticky post setting was. Maybe you already knew but I had quite a time locating it and thought I might not be the only one having this problem.
So, you used that setting to make a post sticky and now you’re wondering why it isn’t working properly. Well, you have to add some code to your Main Index template.
WordPress 2.7 includes a new function called Post Class, which makes it easier to style certain parts of the theme. One of the classes used with post class is sticky. So, the template doesn’t know that a sticky post even exists until this new code is added.
You need to add the following code within the Loop. Make sure it is somewhere that makes sense.
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> Rest of loop here </div>
Many templates already have code like the following:
<div class="post"> Rest of loop here </div>
If your template has the above code, you can simply replace is with the new post class code. If it doesn’t, I’ve found you can add the new code and leave the code you already have.
If you are now wondering what the loop is, it is the code that makes all of your posts show up on the index page.
In it’s most basic form it looks like the following:
<?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?> // Custom Code Here <?php endwhile; ?> <?php else : ?> <?php endif; ?>
Adding the post class code to this will then look like:
<?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?> <div <?php post_class(); ?>> // Custom Code Here </div> <?php endwhile; ?> <?php else : ?> <?php endif; ?>
The new post class div has been added after the while have posts code and the end div is after the else code.
Adding this will make your sticky posts show up properly. If you want to style the sticky post so it looks different than the rest of the posts, make sure you check back on Thursday for my next article.
If you would like to add this to your templates, but don’t want to do it yourself, contact me and hire me to do it for you. It’s a quick and affordable job.
And finally, if you want to read more about the post class, there is information in the WordPress codex.
photo credit: Ryan Grove
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 28, 2009 at 9:24 am
Hi Kim,
This is my first comment on your blog. Your content is great. Absolutely clear and crisp. You are undoubtedly a WordPress Wizard.
When I’ll switch from blogger to self-hosted blog, I’ll take your services :)
–Rajeev
Rajeev Edmonds´s last blog post – How To Get Connected With Famous Bloggers
January 28, 2009 at 12:27 pm
Kim, you are my angel. I am not being funny, this post and the one on Thursday are exactly what I need! Thank you! You need to live near me so I can buy you a drink and dinner! No haggis, quality food all the way!
Seriously, you are the best!
Tracy O’Connor´s last blog post – Yes and Go!
January 28, 2009 at 1:25 pm
@Rajeev – Thanks for visiting. And thank you so much for the compliment! Sometimes I worry that I am not explaining things clearly and you have helped me feel more confident about that.
@Tracy – I’m SO glad that I am writing about something that someone needs and is useful to them :-)
LOL on the haggis. I think we live too far apart for dinner but maybe someday.
January 28, 2009 at 1:30 pm
Nice! I will be drooling over this post during my free time this week at work. Well done! :)
January 28, 2009 at 2:22 pm
if your back with the realm of living; sweet post….sideline question though how do you display the code?
Donace´s last blog post – Adgitize – A critical look
January 28, 2009 at 2:28 pm
@Jeff – Wow! You made my day. Thank you so much.
@Donace – I’m not sure what you mean by the first part of the comment. I’ve been here – I posted all last week. Maybe you were bored with the posts about books and reading :-P
I use a plugin to help me display the code – Syntax Highlighter –
http://wordpress.org/extend/plugins/syntaxhighlighter/
And then I put the code for that with a blockquote.
January 28, 2009 at 3:08 pm
I meant your earlier tweet
‘kwbridge Ok I’ve just died and gone to heaven if @perishable says well done in the comments for one of my articles :-)’ :p
and no I read those posts as well…just been a tad busy recently; and will check that plugin out :p
Donace´s last blog post – Rapidshare Search Engines
January 28, 2009 at 3:14 pm
Kim, behind on commenting and so forth but I read and learn so much from you. Thanks for what you do. You should be appreciated. I appreciate you!
Sommer@greenmom´s last blog post – Think Baby Stainless Steel Feeding Set: BPA Free and Amazing!
January 28, 2009 at 3:58 pm
Thanks for the tut. With every new version of WP, I usually stay up to speed by consulting the codex and also looking at the new ‘default’ theme that comes packages with each version. But I haven’t upgraded all of my ‘old’ themes, so thanks for doing all the ‘research’ and eliminating the guesswork. :-)
Shirley´s last blog post – Does Your Blog Need A Makeover?
January 28, 2009 at 4:51 pm
Thanks for the info, I’ll Delicious Bookmark it. At some point, I think Ill add sticky posts to my own blog. BTW, love the top photo!
Andrew Kelsall´s last blog post – Top Ten CD Cover Design Tips
January 28, 2009 at 6:24 pm
@Donace – OK, I’m a little thick. ;-) There is also the question as to whether I would go to heaven …
@Sommer – Thanks!! And I’ve been behind on commenting for like … always ;-)
@Shirley – Ok – you do the global class in the functions to style the new threaded comments because I am having a rough time with that one ;-)
@Andrew – You’re welcome. I’m curious to see how you’ll use it. I can’t imagine who would take the time to stick that many post its in someone’s office but it’s pretty funny … and annoying :-)
January 28, 2009 at 7:16 pm
Really, really cool- I always thought this was a function that only came with certain themes.
I like your writing style- very understandable.
Jen´s last blog post – Google Adwords Income- Using PPC Domination to Generate Leads While Making Money
January 28, 2009 at 10:10 pm
@Jen – Thank you for visiting and commenting and thanks for the compliment.
Themes that have been designed specifically for 2.7 will have this feature already built in. If we want our current themes to be able to utilize it we have to add it in ourselves.
January 28, 2009 at 10:15 pm
Kim, Nice tutorial, I will do this first and then create a stick post and check it.
I have to then style it to make it stand out different from the rest of the posts.
Thanks!
Nihar´s last blog post – How to Add WordPress pages to Nav Bar
January 28, 2009 at 10:19 pm
@Nihar – My article tomorrow is going to explain how to style it :-)
January 28, 2009 at 10:36 pm
@Kim, I am looking forward for your next post on this topic.
Looking at the code above. I see that there is problem. I may be wrong.
tag is in else part. I think it should be just before endwhile.
what do you think?
Nihar´s last blog post – Browser stops working after starting uTorrent client
January 28, 2009 at 10:49 pm
@Nihar – Do you mean the end div tag? You’re right – thank you so much for catching that. I’m fixing it now.
January 29, 2009 at 8:43 am
Haha. Yeh… I think I’ll just link out to external tutorials for that one. ;-)
That was not a fun theme upgrade. Funny, I ugraded my theme for threaded comments, but after using it for a day, I decided that I didn’t want it. I think that I might just opt for the threaded comments plugin which is better than the WP default threaded comments.
Shirley´s last blog post – Your FeedBurner Subscriber Count Is Not Accurate
January 29, 2009 at 10:56 am
I just want to say, great photo! That was my desk before I found a digital way to take notes. LOL
Tawny Press´s last blog post – TweepSearch for Twitter
January 29, 2009 at 12:33 pm
@Shirley – If you find a good one let me know. I’m looking for something for non-techie types and haven’t located one yet. I’m thinking I’m going to have to figure it out and write one myself.
Do you have a recommendation for a good threaded comment plugin?
@Tawny – LOL I can’t imagine who did that to the office. There’s another photo on flickr of a car completely covered in post-its.
January 29, 2009 at 4:30 pm
On a similar idea, you might want to cover WP 2.7 threaded comments. Again, the control is somewhat buried, and some theme changes are also required. Excellent post!
Mark Cahill´s last blog post – The Little Things – Executing a Presidential Site Update
January 29, 2009 at 4:36 pm
@Mark – Thanks! The thing is I have to get mine working and styled correctly before I can write about it ;-) It is slowly starting to sink in.
January 29, 2009 at 9:50 pm
Yes kim, i was talking about the same.
Nihar´s last blog post – How to Access Gmail Offline using Google Gears
January 29, 2009 at 10:53 pm
Great series! I just composed a sticky post, but it does show up without the special codes. Do I still need to make any changes to it?
Carla´s last blog post – Blogroll – 1/29/2009
January 30, 2009 at 8:19 am
@Nihar – Thanks again.
@Carla – No, if it’s working than it’s fine. Now I have something to investigate. Perhaps without this code than it can’t be styled.
February 19, 2009 at 2:35 pm
Hi Kim,
I’ve been looking for an answer to why my stickies don’t work. I’m no code genius So I was hoping you could fix this to make stickies work:
have_posts()) : $recent->the_post();?>
at
ID, “thumbnail”, true) ): ?>
<a href=”" rel=”bookmark”><img style=”float:left;margin:0px 10px 0px 0px;” src=”ID, “thumbnail”, true); ?>” alt=”" />
<a href=”" rel=”bookmark”><img style=”float:left;margin:0px 10px 0px 0px;” src=”/images/thumbnail.png” alt=”" />
<a href=”" rel=”bookmark”>
Thanks for any help,
S
February 19, 2009 at 3:12 pm
that code didn’t post correctly I’ll try again:
have_posts()) : $recent->the_post();?>
at
ID, “thumbnail”, true) ): ?>
<a href=”" rel=”bookmark”><img style=”float:left;margin:0px 10px 0px 0px;” src=”ID, “thumbnail”, true); ?>” alt=”" />
<a href=”" rel=”bookmark”><img style=”float:left;margin:0px 10px 0px 0px;” src=”/images/thumbnail.png” alt=”" />
<a href=”" rel=”bookmark”>
February 19, 2009 at 3:13 pm
nope, I’ll try to send in an email.
February 19, 2009 at 8:31 pm
Hi Scott – Sorry about the problem adding the code to the comments.
I’ve had providing instructions for that on my todo list. I received your email and just replied.
August 15, 2009 at 12:08 am
Thank you…. It worked for me like charm and I styled the sticky post. Now is looking gr8
.-= Kushagra Agarwal´s last blog ..Microsoft: Breaking up with IE 6 hard to do =-.
August 15, 2009 at 9:32 am
Hi Kushagra – Excellent! I’m glad it worked for you.
July 5, 2011 at 6:25 am
Kim, hi can you explain where I’d find the ‘Main Index template’? What is it called and whereabouts would I have to post the code you wrote out for us? And is this code up to date with WordPress 3.1 or even .2? Thanks, Nic
July 7, 2011 at 2:28 pm
Hi Nic – It should be Appearance > Editor > index.php
The main loop differs depending on the template but it should always have something that looks like this
?php while(have_posts()) : the_post(); ?