Footer Recent Post Thumbnails

We are always visiting the forums to find interesting ways to enhance a theme, over on the WordPress forum the question was asked about a thumbnail ribbon of latest posts on a single post page.

This slotted in very nicely with our recent posts here on Digital Raindrops, like the image menu and Invetsica theme post ribbon, and the requirement will not take long the solution and this posts about 2 hours.

The Requirement

I’m trying to figure out how to add a listing of my most recent posts to the single.php page.

I want the 15 most recent posts to be generated in my footer.

I would also like that each post be represented only by their thumbnail image. (In this case it would be sized down to 50×50.)

There are a number of (YARPP) Yet Another Related Post Plugins that are free to use and might suit the requesters requirements and these can be a better option to adding code.

If we are developing a theme for a client or our portfolio this could be a nice value added built in theme feature, so the administrator does not have to maintain a plugin.

One suggestion was to use WP_Query but we will use Get_Posts for the numberposts argument, and a Template Part.

We also have a Twenty Ten child theme download so we can copy the files to any template.

Download the WordPress Twenty Ten child theme: Twenty Ten Footer Ribbon (693)

As we are using a template part we will only need to copy the footer-images.php file to any other theme this can be an Artisteer generated theme, adjust the styles in the file and add a call in our footer.php file.

footer-images.php

A lot of people ask not to be directed to the WordPress codex pages, however the example we are using is based on one from the Get_Pages Codex page, so it is worth reading these pages and looking at the different examples.

The requester only wanted the image ribbon to show on the single.php page, so the first and last lines are the conditional tags, we could remove these if we wanted the ribbon on all pages.

We create a div to act as a container for the images, we are using an inline style setting the height and margin, we would adjust the margin we want for our theme, here we have set top and bottom to 10px.

The single post is copied to a temporary post so it can be reset after the foreach loop, this is good if we wanted to move the call above the post comments.

$args is an array we pass to WordPress for the number of posts we want returned, this we would adjust based on our theme, our requester wanted 15 * 50px images = 750px wide plus image margins and container margin, 15 * 56 + 10 = 850px

The posts are returned to $myposts and we loop through the posts getting the link and the thumbnail, we are using a standard WordPress thumbnail using the get_the_post_thumbnail function and passing in a custom size we want returned in the array(50,50) we would change this to suit our theme.

Our second div is floated left and we have given it a small margin to separate the images, this we would also adjust for another theme.

<?php if( is_single() ) : ?>
<div style="display: block; position: relative; width:100%, height: auto; margin: 10px auto; text-align:center;">
<?php
global $post;
$tmp_post = $post;
$args = array( 'numberposts' => 15 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) : ?>
<?php $link =  get_permalink( $post->ID ); ?>
<div style="float: left; display:inline; margin: 0 3px;" onclick="location.href='<?php echo $link; ?>'">
<?php echo get_the_post_thumbnail($post->ID, array(50,50) , 'thumbnail'); ?>
</div>
<?php endforeach; ?>
<?php $post = $tmp_post; ?>
</div>
<?php endif; ?>

In the Twenty Ten download example we have used the medium thumbnail six posts at 150 * 150 with 3px left and right image margins.

Calling the Template Part

In the footer.php file we want to call the image ribbon just before the footer div is rendered, in the Twenty Ten theme we added it here, the last four lines of the code excerpt, see the download footer.php.

This can be inserted in most themes not just the WordPress twenty ten theme.

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the id=main div and all content
 * after.  Calls sidebar-footer.php for bottom widgets.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?>
</div><!-- #main -->
<?php
//Add the footer image ribbon
get_template_part( 'footer', 'images' );
?>

Note: We set the array to 150* 150 in the download, however in our themes we use rectangular thumbnails, so WordPress will display the longest side at 150px

footer-recent-1

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

One thought on “Footer Recent Post Thumbnails

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Tips

colorizer-1_thumb.png

We thought we would use the WordPress Twenty Eleven theme and the the Farbtastic color picker to colorize our theme from the website front page instead of the admin area. We have been looking at the $_SESSION variable, so we thought … Continue reading

Read More