Advertisement
Plugins

Display & Style Related Posts For Your WordPress Site

by

Displaying related posts is a great way to keep readers on your blog and this tutorial will show you how to achieve just this! There are definitely many related posts plugins out there that would be great to use, however I couldn't find any plugins that fit exactly what I needed. So after a lot of reading and researching, here's what I ended up with that's helped me on a ton of my client's projects including my own. Here I will show you how to program a custom WordPress loop that will display your related posts with thumbnails.


Step 1 Edit your functions.php file

First thing's first, open up your functions.php file and add this little bit of code:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 196, 110, true );

Be sure to replace the 196 and 110 with your own dimensions. Save it and upload the file. After you upload it, in your post sidebar you'll see a new option titled "featured image". You can upload any image you want to use here and this will be the image that will display in the related posts section. And make sure you tag all of your posts with at least one keyword. That way when you use this code, you can actually display other posts with any specific tag that the current post has.


Step 2 Edit your single.php file

Now, open your single.php file and add this block of code anywhere you want the related posts section to show up.

<?php
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;

$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'showposts'=>4,  // Number of related posts that will be shown.
'caller_get_posts'=>1
);

$my_query = new wp_query($args);
if( $my_query->have_posts() ) {
echo '<div id="relatedposts"><h3>Related Posts</h3><ul>';
while ($my_query->have_posts()) {
$my_query->the_post();
?>
 
<?php
if ( has_post_thumbnail() ) { ?>
<li><div class="relatedthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?><?php the_title(); ?></a></div></li>
<?php } else { ?>
<li><div class="relatedthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php echo get_post_meta($post->ID, 'Image',true) ?>" width="196" height="110" alt="<?php the_title_attribute(); ?>" /><?php the_title(); ?></a></div></li>
<?php }
?>
 
<?php
}
echo '</ul>';
}
}
$post = $backup;
wp_reset_query();
?>

Just change the 'showposts'=>4 to however many posts you want to show.

Optional Default Image

If you don't tend to use images in your posts too much but still want the ability to use the related posts with a thumbnail, replace this line above:

<li><div class="relatedthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php echo get_post_meta($post->ID, 'Image',true) ?>" width="196" height="110" alt="<?php the_title_attribute(); ?>" /><?php the_title(); ?></a></div></li>

with this:

<li><div class="relatedthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/post-thumb.jpg" width="196" height="110" alt="<?php the_title_attribute(); ?>" /><?php the_title(); ?></a></div></li>

This will pull a default image from your theme folder just in case you don't have an image assigned to any post.


Step 3 Make it Look Good with CSS!

#relatedposts h3 { font-size: 24px; margin: 10px 0px 20px 0px; font-weight: normal; }
#relatedposts ul { list-style: none; }
#relatedposts ul li { float: left; margin-right: 15px; width: 206px; }
#relatedposts img { border: 1px solid #DDD; background: #F8F8F8; padding: 5px; margin-bottom: 5px; }    
#relatedposts a:hover { color: #51B1D3; }

Above is just an example of what you can do with CSS and your related posts code. And that's it! You have a fully functional related posts section on your WordPress site.


Here's a Screenshot of the Finished Product

Related Posts
  • Web Design
    HTML/CSS
    Build a Top Bar Off-Canvas Navigation With Foundation 5Foundation menu
    Today, we are going to combine ZURB's Foundation 5 Off-Canvas feature with our top bar navigation. The result will be a nice custom navigation for desktop users and a sleek off -canvas menu for tablet and mobile users. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Creating an Archive TemplateCreating wordpress theme from html 400
    If you've been working your way through this series, you now have a functioning theme with two page templates. The steps I've demonstrated to this point are: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages. Read More…
  • Code
    PHP
    Creating a Photo Tag Wall With Twilio Picture Messaging & PHPProcedural to oop php retina preview
    Twilio's recently announced Picture Messaging has vastly opened up what we can do with text messaging, now we can attach photos to our text messages and have them get used in different ways. In our case, we are going to build a Photo Tag Wall, which will contain photos linked to tags that will be displayed on a website.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Adding a LoopCreating wordpress theme from html 400
    In the first three parts of this series, you learned how to prepare static HTML for WordPress and to create a theme by splitting your HTML file into a set of template files and editing the stylesheet. You then uploaded your theme to WordPress and activated it. The theme still isn't displaying any content you add via the WordPress admin however; to do that you need to add a loop to your template files.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    Tips
    Quick Tip: After the Content - More From This CategoryAfter the content solid
    Do you have a solid construction of categories on your blog? If so, you might not need a "Related Posts" section at all - you can just display latest posts from the same category. In this post, we're going to go through the "More From This Category" section, an alternative to "Related Posts" (which we covered earlier).Read More…