While developing my new theme for WordPress (The one your looking at now!), I came across the need to get the 5 latest blog posts and format the output accordingly. Now, WordPress has a built in function called wp_get_archives which is great for just getting the latest blog posts and displaying them as is (this function outputs them in a list using <li> tags). However, I wanted to format my list items to have the following CSS classes – first, last and odd.
My first solution was to manually go into wp-includes/general_template.php and hard-code in the code that would do that for me. However, this broke when I upgraded to WordPress 2.9. Therefore, I have created a new function specific to my theme in wp_content/themes/theme_name/functions.php. I thought this function might come in handy to other developers who are using WordPress as their content management system, so below is the code.
function latest_posts($limit = 5)
{
ob_start();
wp_get_archives("title_li=&type=postbypost&limit=" . $limit);
$original_content = ob_get_contents();
ob_end_clean();
$lines = explode("\n", $original_content);
$final_content = "";
for($i = 0; $i < $limit; $i++)
{
// Workout the class parameter value
$class_string = "";
if($i == 0)
{
$class_string = "first";
}
else if($i == $limit - 1)
{
if(($i % 2) == 1)
{
$class_string = "odd last";
}
else
{
$class_string = "last";
}
}
else if(($i % 2) == 1)
{
$class_string = "odd";
}
$final_content .= str_replace("<li>", "<li class=\"". $class_string . "\">", $lines[$i]) . "\n";
}
echo $final_content;
}
This function takes the output of the wp_get_archives function (by making use of the PHP output buffer, since wp_get_archives echos it’s results rather than return a string), loops through each line (by using explode) and then works out what class names to add to the li element and adds them accordingly. It then echos the modified output and voila.
To use this function, simply call latest_posts() somewhere in your WordPress template. You can also pass in a numeric parameter to specify the number of posts to return, for example latest_posts(10).
I would love to hear your thoughts/feedback on how this could be improved, or if you have used this and it has helped, let me know in the comments section below!
fantastic post you posted here seems very useful really appreciate your way of explanation with this coding .it very easy to understand thanks for this informative stuff.
I usually have problems with coding, but you definitely explained it clearly so I can understand it. Also, this is a very nice new theme that you have here.
Thanks for the kind words Jinnie and Kai. Glad it was of use to you!
Like kai I also face problems in the sphere of coding. But really you explained it all. Thanks a lot for your help!
Very good post keep going man
Your blog is very informative and contains very cool links, thanks for sharing, keep up the good work.
Hi Tom, first time here. I found your blog whilst searching for some WordPress customisations. I’ve got a couple of blogs where I want to restrict my sitewide links in the sidebar without removing them altogether. I can’t find any plugins that will restrict my sidebar links to only the front page. Do you know of any way that this can be custom coded? (Go easy on me, I design systems and know very little about coding). Thanks in advance.
I’m currently working a plugin that requires custom content to be displayed in a post via a tag being inserted by the user.
I found your blog whilst searching for some WordPress customisations. I’ve got a couple of blogs where I want to restrict my sitewide links in the sidebar without removing them altogether.
Super, I would have looked for some css only solution but when you need ‘first / last’ highlighting I guess you need different class names for list. Lookup following on w3c site : table.ex1 tr:nth-child(odd) {color: #000; background: #FFF}
table.ex1 tr:nth-child(even) {color: #000; background: #CCC}
Interesting, thanks for the comment! I’ve never used the CSS “nth-child” selector before. I will look into it! But yeah, unfortunately in this instance I also needed to identify the first and last row dynamically, otherwise your solution would have been perfect.
Thanks for stopping by the blog!
James and Delaram: Unfortunately, I’m no WordPress guru and so I am not entirely sure how to go about creating a plugin or the likes for restricting site-wide links in the sidebar. I could probably take a look into it, but I would need a bit more information to go on. How exactly would you like them restricting? And what links do you mean? I assume the Blogroll?
Interestingly I have just looked up the “nth-child” selector and noticed there is also a “first-child” and “last-child” selector… Awesome!
Sorry for rendering all your hardwork useless, but we all learn new things everyday and I hope this has helped you
You should probably post a ‘css’ solution this problem for everyone now
Thank you for the codes. I can definitely use this since I’m starting my new wordpress blog/
Thanks for the tips on using the get archives feature of WP. I was recently working with a free theme making some modifications when I found out about this. It is an interesting way to be able to customize your blog.
After reading Very good ideas on your Blog. I adore. thank you for providing this lovely information
Useful tips Tom, especially for someone who is new to wp like me, thank for this
Thanks man keep the good work coming! I’m definitely going to implement this into my new word press blog I am making.
I think that this will be a great use for my newly constructed wordpress blog, thanks a lot for sharing this one mate.. it saves my time from creating my own codes, good thing I stumbled upon your blog.
Thanks for this Tom. I’m going to have a go at implmenting this on one of our blogs and see how it functions.