Twenty Ten Shadow Boxing

We are creating a new look for our website, which will be completed early June while looking at what we wanted we decided to use some shadows and rounded corners, the way we would do this is by creating graphics but we want a website with as few graphics as possible.

We are going to use CSS3 boxes and shadows while still having an alternate for non compatible browsers, we have tested this with a twenty ten child theme.

Continue reading

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

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.


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;">
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'); ?>
<?php endforeach; ?>
<?php $post = $tmp_post; ?>
<?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.

 * 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 -->
//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



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, 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 for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions., 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.


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