The code provided by the wpbeginner post styles the related posts to display in list style format. So to display the related posts in the same box structure I made a few changes to the code. I am currently using it on my site http://www.tina-lai.com. If you want to see the outcome just click on any post and see at the bottom the related posts are from the same category.
The code is to be placed in loop-single.php
replace from where <div class="recent clear"> begins, through to the last div
Code:
<div class="recent clear">
<?php $orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 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="related">';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
<div class="box">
<div class="rel">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('homepage-thumb', array('alt' => '', 'title' => '')) ?></a>
<?php if ($imbalance2_theme_options['images_only'] == 0): ?>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<div class="categories"><?php imbalance2_posted_in(); ?></div>
<?php endif ?>
<div class="texts">
<?php if ($imbalance2_theme_options['images_only'] == 1): ?>
<a class="transparent" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('homepage-thumb', array('alt' => '', 'title' => '')) ?></a>
<?php endif ?>
<div class="abs">
<?php if ($imbalance2_theme_options['images_only'] == 0): ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('homepage-thumb', array('alt' => '', 'title' => '')) ?></a>
<?php endif ?>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<div class="categories"><?php imbalance2_posted_in(); ?></div>
</div>
</div>
</div>
</div>
<?
}
echo '</div>';
}
}
$post = $orig_post;
wp_reset_query(); ?>
</div>