The Nice Way To Mention Your Recent Articles in WordPress SideBar
Spread it!
People asked me how I mention my recent articles in WordPress sidebar by display post thumbnails and titles with a well-styled. Today, I would like to response their request. This way is being used in some blogs. I’m not sure if they are using the same method as mine, but at least we will get the same result.
When design blog theme in WordPress, I always look for non-using plugins solution. People asked me which plugin I’m using for this sidebar. No, the answer is NO.
There are a lot of WordPress plugins to display your recent articles, popular articles to mention your posts in the sidebar widget. However, you forgot that you can do the same with a simple posts query using WP_Query(); function.
To begin, create new posts object that you will call by will have_posts() and display your posts within the loop
Example:
$wp_query->have_posts();
This function is called to see if there are any posts to show. Using the while loop, and we can use have_post() as the condition. This will iterate around as long as there are posts to show.
In my case, I’m using iterations, the_post(), within the while loop to iterate around as long as there are posts to show.
<ul> <?php $recent = new WP_Query("showposts=35"); while($recent->have_posts()) : $recent->the_post();?> <li> <a title="Permanent Link to <?php the_title(); ?>" rel="nofollow" href="<?php the_permalink() ?>"> <?php if (get_post_meta($post->ID, "image", true)): ?> <img src="<?php bloginfo('template_url'); ?>/scripts/thumb.php?src=<?php echo get_post_meta($post->ID, "image", true); ?>&w=25&h=25&zc=1" alt="<?php the_title(); ?>" /> <?php else: ?> <img src="<?php bloginfo('template_url'); ?>/images/thumbnail.png" width="25" height="25" alt="<?php the_title(); ?>" /> <?php endif; ?> <span><?php the_title(); ?></span></a> </li> <?php endwhile; ?> </ul>
This code above will check if you have post meta name is image, it will display the thumbnail using timthumb script. Timthumb is a small php script for cropping, zooming and resizing web images (jpg, png, gif). Perfect for use on blogs and other applications.
You can change the number of post will be displayed and set the condition to display number of posts in single page larger than other page because the post page is always longer than others, right?
CSS Bonus:
.widget ul {
list-style-type:none;
margin:5px auto 8px;
padding:0 0 2px;
width:auto;
}
.widget ul li {
clear:both;
letter-spacing:0;
margin:0;
padding:5px 0 0;
}
.widget ul li a {
border-bottom:0 dotted #DDDDDD;
color:#333333;
font-family:Georgia,"Nimbus Roman No9 L",serif;
font-size:11px;
font-weight:normal;
margin:0;
padding:0;
text-decoration:none;
}
.widget ul li img {
border:3px solid #DFDFDF;
float:left;
margin-bottom:10px;
margin-right:10px;
padding:1px;
}
.widget ul li span {
display:block;
padding:0;
}
Conclusion
We don’t need to use any plugin for display not only such a simple list of post like that but also other simple things in WordPress. Wordpress provide us WordPress Codex which contains a thousand of Function References. If you want to build your own WordPress theme with unique style, the first thing you need is check out how WordPress function works. Good luck, hope see more beautiful WordPress themes from the web community.
Related Posts
- WordPress Theme from Scratch – Day 3: HTML to WordPress
- How To Wrap Google Adsense In Wordpress Posts Correctly
- Wordpress Hack: Anything Can Be Added Anywhere In The Post Content
- 10 Useful Code Snippets And Plugins To Spice Up Wordpress Avatar
- 10 Wordpress Plugins To Boost Up Your Theme You Have Ever Known
33 User Comments
Trackbacks/Pingbacks
-
-
27. Dec, 2009
[...] This post was mentioned on Twitter by Lam Nguyen, Sergio Arantes. Sergio Arantes said: The Nice Way To Mention Your Recent Articles in WordPress SideBar http://bit.ly/5P0KoG [...]
-
-
27. Dec, 2009
Social comments and analytics for this post…
This post was mentioned on Twitter by allwebdesign: The Nice Way To Mention Your Recent Articles in WordPress SideBar http://bit.ly/5D8TPa...
-
-
27. Dec, 2009
[...] The Nice Way To Mention Your Recent Articles in WordPress SideBar [...]
-
-
28. Dec, 2009
[...] is the original post: The Nice Way To Mention Your Recent Articles in WordPress SideBar | AEXT.NET Comments0 Leave a Reply Click here to cancel [...]
-
-
28. Dec, 2009
[...] This post was Twitted by pvreymond [...]
-
-
29. Dec, 2009
[...] The Nice Way To Mention Your Recent Articles in WordPress SideBar [...]
-
-
29. Dec, 2009
[...] This post was Twitted by teylorfeliz [...]
-
-
30. Dec, 2009
[...] The Nice Way To Mention Your Recent Articles in WordPress SideBar [...]
-
-
05. Jan, 2010
[...] The Nice Way To Mention Your Recent Articles in WordPress SideBar [...]
Leave a Reply
About AEXT.NET
AEXT is a design magazine that publishes all things web design. Articles here are published by web professionals for web professionals featuring tutorials, collections, and resources.
It’s pointless to have displayed your recent articles in WordPress sidebar as you already have it on the first page. Doing like this you’ll have displayed those articles twice.
You will need to display it on other pages. You can display another thing on first page instead of recent articles! By the way, the first page usually display less then 10 posts, with some condition, you can make recent posts widget start fetching records from 10 to query different posts!
Thanks Lam.. very useful mate. I was just looking for something like this when I found your article on Digg. Cheers.
Nice tutorial Lam. Very useful instead of using a plugin.
A very nifty tutorial. Although I do not use Wordpress, I found it very easy to understand!
Thanks for putting this together Lam!
I think you should put the
while($recent->have_posts())bit after the<ul>tag, otherwise, your loop will produce many ULs.@kucrut - Oh, sorry, my fault. Thank you!
What would be the benefits of not using a plugin/widget to achieve this? A plugin would most likely make the same database call. Wouldn’t it?
@Ken – Showing recent articles on inside pages is important in order to decrease your bounce rate. It’s not always the home page that is the most popular landing page.
yes you can do that. If you can make it to display posts in sidebar other than latest 10 is a great way to build internal links.
Thanks Lam for this tutorial. I was looking for this to implement on my blog and definitely try this out today.
Some cool suggestions here, there’s so much you can do with Wordpress it’s mindboggling. Glad to see someone taking advantage of everything you can do, and this tutorial is just one way!
Hi Very nice posting, Please post more like this
@ Ken, there’s always use for sidebar with recent news. Why would this only be for a front page?, gotta surf more.
@Paco, yes there are other ways. In the same time is becoming complicated to personalize the sidebar to appear different on different pages.
It requires to identify the template first and after to place that sidebar only on the page you wanted to appear and in wp at least it’s a hell of work.
Hello awesome blog there. keep it going.I seriously like to browse your post.Last of all have good night
I tried to use this method but it’s not working on my blog
http://www.chotoan.com/
I downloaded timthumb script and uploaded it to folder mytheme/scripts/thumb.php
Please help me fix this problem
Hey, I used the method but images not showing..!! I am using thesis for my wordpress and placed the timthumb script in the thesis directory (/scripts/thumb.php).. Well i placed the code in the thesis custom_functions.php and created a fuction releated.! Now i can see the posts but no images..! Please help me fix this problem.!
Shubham´s last blog ..Test Your Cross Browsing Compatibility
Can you right click on the are that the image should display in and “Copy Image Location” and open it in new window and post the message you’ll get here?
hey Lam, I am getting the else statement image…! Well can you create this for thesis theme..! This would be really helpful.! Thanks.!
Well I love your blog.>! And your tutorials are just too good..! Thanks for sharing them.!
Shubham´s last blog ..Test Your Cross Browsing Compatibility
We have a default widget in WP ..
.. there is no need to add another one ..
Sid´s last blog ..5 Most Effective Tricks to become a Successful Blogger
Heyy Lam, is it possible to add pagination to sidebar, restricting the list to 5(show_posts=5)..??
I’ve been trying to add paginationt to sidebar… any help?
good stuff! wordpress has a lot of flexibility if you are willing to get creative and get your hands dirty. thanks for the info!