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 (559)

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.

Artisteer Image Menu

On the Artisteer WordPress Forum the question was asked about an all image menu, there is no option in Artisteer to do this as a setting, we have a similar post on doing this in a WordPress “Twenty Ten” child theme.

How would we then transfer that knowledge to Artisteer, having just completed a series of posts for the Investica Theme, where we added a ribbon banner in part eight we will use this code as a starting point.

Continue reading

Investica Part Five

In part five we are leaving the home page to look at adding a subtitle, a while ago we visited a WordPress website where the theme had a subtitle full width below the menu bar, this was teaser text to grasp the readers attention.

Thinking about using a string of subtitle text as well as getting the attention of a website visitor it may have SEO benefits, if we wrap the text in <h2> tags it will likely get picked up by the search engines and indexed as a bonus.

Continue reading

Investica Part Four

Only one last thing we need to do for the two column post layout and that is to move the image below the title, as Artisteer have moved the post output we cannot change the layout in the page or content files, so we will change the code.

We have to stop and consider the rest of our pages that might use the thumbnail, these may include the search results, category and later a magazine style single category page, so we will leave the core function alone but copy and rename it for the homepage two column output.

Continue reading

Investica Part Three

We can see from the images in the last post that we have a text link Continue Reading… in this section we are going to turn this into a button that fits in nice with out theme, to do this we will edit the excerpts function in the functions.php file.

As we see in the earlier posts some Artisteer functions have parameter arrays that we can pass in, we do not need to cut out code to change the ‘Continue Reading’ to a single word like ‘More’ we can just pass a parameter to the Artisteer function, this means that on our home page we can have the word ‘More’ but our post lists will still display the text link.

Content-Home.php

Lets for our theme open our new content-home.php file this is the one where we passed in the thumbnail parameters as $arg  we will change that name to something more meaningful in this section $thumb.

Download Part Two Files: Investica Part Three (610)

We are passing two arguments to the theme_get_excerpt() function, these will override the defaults and display our changes, the first in our $excepts array is the ‘more_tag’ notice the __( this is for localisation in a WordPress language file.

The second is our a new parameter we have added called ‘more_button’, this is because we need a flag to tell the function if we want text or a button returned to our post, we have used a 1 here we could use true.

We edit the line at row four ($thumb) and add the lines five and six, then in the array elements ‘thumbnail’ and ‘content’ we pass in the two array variables $thumb and $excerpt, this is all we do in the content-home.php file.

<div class="two-column">
<?php
/* set the thumbnail size */
$thumb= array('size' => array(250,170) );
/* custom More Button */
$excerpt = array('more_tag' => __('More', THEME_NS),'more_button' => 1);
?>
<?php
    global $post;
    theme_post_wrapper(
        array(
                'id' => theme_get_post_id(),
                'class' => theme_get_post_class(),
                'thumbnail' => theme_get_post_thumbnail($thumb), //Large Thumbnail
                'title' => '<a href="' . get_permalink( $post->ID ) . '" rel="bookmark" title="' . get_the_title() . '">' . get_the_title() . '</a>',
                'before' => theme_get_metadata_icons( '', 'header' ),
                'content' => theme_get_excerpt( $excerpt ),
                'after' => theme_get_metadata_icons( '', 'footer' )
        )
    );
?>
</div>

functions.php

If we view our theme now we will see the changed more tag but not the button, we have to add code for the button style in the functions.php we open this file and navigate to line 250, and we insert a new variable to take the value we passed in with the ‘more_button’ this will be used as a condition a little way down the function, at line 249 find the code : null)); add these two lines with returns and line feeds before and after.

/* We want to show a button on two column posts */
$more_button = theme_get_array_value($args, 'more_button', 0 );

 

We then look at line 315 to 317 which should look like this:

if ($show_more_tag) {
    $the_contents = $the_contents.' <a class="more-link" href="'.$perma_link.'">'.$more_tag.'</a>';
}

 

We want to add a condition here to see if the $more_button is set if it is we output a button style string, if not the standard string is returned.

if ($show_more_tag) {
    // Added Button Condition
    if ($more_button) {
        $the_contents = $the_contents.'<br></br><span class="art-button-wrapper" style="margin-top: 5px"><span class="art-button-l"></span>';
        $the_contents = $the_contents.'<span class="art-button-r"></span><a href="'.$perma_link.'" class="art-button">'.$more_tag.'</a></span>';
    }else{
        $the_contents = $the_contents.' <a class="more-link" href="'.$perma_link.'">'.$more_tag.'</a>';
    } // Added Close Condition
}

If we look at this we have added the art-button-wrapper, art-button-l, art-button-r and the art-button spans and classes, notice that we have added a <br></br> tags so our button is on a new line, we have also added an inline style with a top margin of 5 pixels.

Open the functions.php in the download to see where this code fits in the theme_get_except() function, look at the other parameters that we can pass in that may help with other themes.

lesson-3-1  

As we can see the button looks quite nice for the home page, we can have to look at the number of words for the excerpts in Admin > Theme options and change this setting to reduce the number of words for a more uniform display.

In the next part we will be looking at moving the title, as the layout is code driven we will copy one of the Artisteer functions, re-name and use this for the updated layout.  

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.