WordPress Related Posts

I received many requests recently on how to display related posts on a WordPress site. The code I present in the video below will grab as many related posts as you want and display them in your WordPress post.

The code grabs related posts based off of them being in the same category. It will also work if you have a post in multiple categories.

I could have picked the related posts based off of tags, but I thought categories made more sense.

I include both the code from Single.php and home.css below. In the video I use a function called catch_that_image(). If you want to see how that works check out WordPress News Theme 5.

Code From the Video

<?php get_header(); ?>

<?php

$ntt_plugin_folder = get_bloginfo(‘wpurl’);

$ntt_plugin_folder .= ‘/wp-content/plugins/NTTFeaturedContent2/’;

$ntt_plugin_page = $ntt_plugin_folder . ‘js/featured_data1.txt’;

$ntt_plugin_style = $ntt_plugin_folder . ‘ntt_fc_style2.css’;

<LINK href=”<?php echo $ntt_plugin_style;?>” rel=”stylesheet” type=”text/css”>

<script type=”text/javascript” src=”<?php echo $ntt_plugin_folder; ?>js/featured_content.js”></script>

<div class=”ntt_featured_content”>

<?php

$ntt_stored_fc = file_get_contents($ntt_plugin_page);

echo $ntt_stored_fc;

</div>

<?php get_sidebar(‘first’); ?>

<div id=”mainContent”>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class=”articleContent”>

<div <?php post_class() ?> id=”post-<?php the_ID(); ?>”>

<h3 class=”articleTitle”><a href=”<?php the_permalink(); ?>”><?php the_title();?></a></h3><br />

<div class=”entry”>

<p class=”postExcerpt”>

<?php the_content(); ?>

</p>

<?php wp_link_pages(array(‘before’ => ‘Pages: ‘, ‘next_or_number’ => ‘number’)); ?>

<?php the_tags( ‘Tags: ‘, ‘, ‘, ”); ?>

</div>

<?php endwhile; endif; ?>

<div class=”morePosts”>

<?php $ntt_current_post = $post;

global $post;

// Get category for the current post

$ntt_post_categories = get_the_category($post->ID);

// If the post has a category start storing them in an array

if ($ntt_post_categories) {

$ntt_category_ids = array();

foreach($ntt_post_categories as $ntt_indiv_category) $ntt_category_ids[] = $ntt_indiv_category->term_id; // Gets the categories id number

$args=array(

‘category__in’ => $ntt_category_ids,

// Don’t show the current post Must pass array

‘post__not_in’ => array($post->ID),

// Don’t show pages

‘post_type’ => ‘post’,

// Only show published posts

‘post_status’ => ‘publish’,

‘posts_per_page’=> 4 // Number of related posts that will be shown.

$my_query = new wp_query( $args );

if( $my_query->have_posts() ) {

echo ‘<div class=”morePosts”><h3>Related Posts</h3>’;

while( $my_query->have_posts() ) {

$my_query->the_post();?>

<div class=”recentPosts”>

<h3 class=”recentTitle”><a href=”<?php the_permalink(); ?>”><?php $ntt_the_title = $post->post_title; echo substr($ntt_the_title, 0, 20); ?></a></h3>

<img src=”<?php echo catch_that_image(); ?>” alt=”<?php the_title(); ?>” width=”150px” height=”150px” class=”recentImage” />

<p class=”recentExcerpt”><?php $ntt_the_excerpt = $post->post_excerpt; echo substr($ntt_the_excerpt, 0, 82); ?>

<a href=”<?php the_permalink(); ?>” class=”clickForMore”>More</a></p>

</div> <!– End of recentPosts div –>

echo ‘</div>’;

$post = $ntt_current_post;

</div> <!– End of morePosts –>

<?php include (TEMPLATEPATH . ‘/inc/meta.php’ ); ?>

<?php edit_post_link(‘Edit this entry’,”,’.’); ?>

<?php comments_template(); ?>

<br />

<?php get_footer(); ?>

padding: 0px 5px 0px 15px;

background-color: #FFFFFF;

margin-right: 255px;

height: auto;

margin-right: 330px;

position: relative;

border-bottom: 1px solid #DCDCDC;

text-transform: uppercase;

font: bold 14px/17px Helvetica, sans-serif;

text-decoration:none;

margin-left: 0px;

text-transform: uppercase;

font: bold 24px/18px Georgia, serif;

text-decoration: none;

.articleContent {

font: 18px/1.4 Georgia, serif;

padding: 0px 0px 0px 95px;

color: #666;

line-height: 1.5;

.entry {

padding: 0px 0px 0px 80px;

color: #666;

line-height: 1.5;

.featuredPosts {

font: 13px/1.4 Georgia, serif;

padding-left: 10px;

width: 250px;

float: right;

margin-right: 5px;

border-left: 1px solid #DCDCDC;

position: relative;

padding-top: 0px;

margin-left: 0px;

text-transform: uppercase;

font: bold 14px/17px Helvetica, sans-serif;

text-decoration:none;

padding: 0px 0px 0px 65px;

color: #666;

line-height: 1.5;

margin-top: -20px;

.morePosts {

font: 13px/1.4 Georgia, serif;

padding-left: 3px;

padding-top: 0px;

margin-left: 0px;

text-transform: uppercase;

font: bold 12px/17px Helvetica, sans-serif;

text-decoration:none;

/* Make all the images position properly in articles */

img.centered {

margin: 0 0 2px 7px;

margin: 0 7px 2px 0;

12 Responses to “WordPress Related Posts”

Hi,
Thanks for your fantabulous video tutorials. Specially, your wp tutorials are excellent. But I have further request, please make some videos on WORDPRESS CUSTOM FIELDS – all aspects of custom fields. So far I know custom field option is very useful to make WP a true CMS. But unfortunately you didn’t mention or use them in your tutorials (upto part 8 of wordpress theme tutorials). Hope you will make some superb tuts on it. PLEASE I NEED TO KNOW THEM VERY WELL. HOPE YOU WILL HELP ME AS I STARTED TO LEARN WORDPRESS WITH YOUR TUTS.

Thanks again for your contribution.

I’m glad you like them. I was shocked that nobody had done a WordPress Video tutorial so I just had to make one.

Here is a tutorial on WordPress custom fields and taxonomies. It should answer some questions. I’m going to make more WordPress tutorials, but I’ve been covering some overdue tutorials lately.

Thanks for taking the time to say hi 🙂

Hi, I have a question for you. I want to post some tags on one of my post with a song. I want to add a tag with the name of the artist that exists in another post and if someone clicks on the tag he gets redirected to that article. Is it possible? Does this code do that for me?

Also can you make a tutorial on how to click on an image into a post and that specific picture pops out like it’s an attachment or something like that and also I can view the photos if there are more than one?

Yes this will display posts with the same tags. It should do what you want. You could also increase the number of related posts displayed if you’d like to see more.

As per your next question. Are you looking for a slide show? I’ve been working on that. I just want to make sure that is what your are looking for. Thanks for taking the time to say Hi 🙂

Your email address will not be published.