The Nice Way To Mention Your Recent Articles in WordPress SideBar

written by aext on December 27, 2009 in WordPress with 34 comments

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.

[smartads]

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 Codexwhich 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.