How to Display Latest Blog Posts at the Footer
Posted: February 5th, 2014 | Author: Julia | Filed under: Development, Tips and Tricks | Tags: latest posts, thumbnail, WordPress | 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
-
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:
-
<h4>Latest Blog Posts</h4>
-
<ul>
-
<li>
-
<img class="icon80" src="images/blog_picture.jpg" alt="recent post" />
-
<a href="#">My latest post title</a>
-
</li>
-
<li>
-
<img class="icon80" src="images/blog_picture.jpg" alt="recent post" />
-
<a href="#">My previous post title</a>
-
</li>
-
</ul>
Note: I suggested the size for the thumbnail of the post as 80px*80px (it’s ‘img class=”icon80″‘).
3. The PHP part
I was in need to display latest posts at the footer section (two ones), so my code for the footer template is:
-
<h4>Latest Blog Posts</h4>
-
<?php $latest = new WP_Query( array( 'posts_per_page' => 2 ));
-
if( $latest->have_posts() ) : ?>
-
<ul id="recent">
-
<?php while( $latest->have_posts() ) : $latest->the_post(); ?>
-
<li>
-
<?php if ( has_post_thumbnail()) : ?>
-
<?php the_post_thumbnail(array(80,80), array('class' => 'icon80')); ?>
-
<?php endif; ?>
-
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
-
</li>
-
<?php endwhile; ?>
-
</ul>
-
<?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
-
.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):
-
<?php the_post_thumbnail(array(80,80), array('class' => 'icon80')); ?>
That’s it!
Related post: How to Display a Tag Cloud
Leave a Reply