About design and nearby

How to Display Latest Blog Posts at the Footer

Posted: February 5th, 2014 | Author: | Filed under: Development, Tips and Tricks | Tags: , , | No Comments »

Displaying latest posts in WordPress often helps your visitors to navigate your blog faster.

Once I was trying to display 2 latest posts of all categories with thumbnails in the footer section. The step by step tutorial is below.

1. To enable the support for post thumbnails add

  1. add_theme_support( 'post-thumbnails' );

to your functions.php file (and be sure that you set the featured image for your post at the WordPress admin panel).

2. Before start working with the PHP code I produced the HTML version:

  1. <h4>Latest Blog Posts</h4>
  2. <ul>
  3.     <li>
  4.        <img class="icon80" src="images/blog_picture.jpg" alt="recent post" />
  5.        <a href="#">My latest post title</a>
  6.     </li>
  7.     <li>
  8.        <img class="icon80" src="images/blog_picture.jpg" alt="recent post" />
  9.        <a href="#">My previous post title</a>
  10.     </li>
  11. </ul>

Note: I suggested the size for the thumbnail of the post as 80px*80px (it’s ‘img class=”icon80″‘).

3. The PHP part

WordPress latest post

I was in need to display latest posts at the footer section (two ones), so my code for the footer template is:

  1. <h4>Latest Blog Posts</h4>
  2. <?php $latest = new WP_Query( array( 'posts_per_page' => 2 ));
  3. if( $latest->have_posts() ) : ?>
  4. <ul id="recent">
  5.  <?php while( $latest->have_posts() ) : $latest->the_post(); ?>
  6.     <li>      
  7.     <?php if ( has_post_thumbnail()) : ?>
  8.      <?php the_post_thumbnail(array(80,80), array('class' => 'icon80')); ?>    
  9.     <?php endif; ?>
  10.     <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
  11.     </li>
  12.  <?php endwhile; ?>
  13. </ul>  
  14. <?php endif; wp_reset_postdata(); ?>

I just checked if any posts exist and while they do – I displayed the post thumbnail and the post title of 2 latest posts.
A little trick: I added to my thumbnail picture .icon80 to apply style

  1. .icon80 { float:left; margin-right:10px; margin-top:2px;}

and set the thumbnail size as 80px*80px – the default image sizes are “thumbnail”, “medium”, “large” and “full” (the size of the image you uploaded):

  1. <?php the_post_thumbnail(array(80,80), array('class' => 'icon80')); ?>

That’s it!

Related post: How to Display a Tag Cloud

Share Button

Check Related Posts:

Leave a Reply

  • 9 + seven =

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now