Displaying Related posts

  • Resolved ferdalkrmn

    (@ferdalkrmn)


    2 years, 2 months ago

    Hello, I have been trying to display the related posts on my single.php but I cannot figure out why it’s not working properly. This is the code I am using. I am also using bootstrap with this code all the related posts are getting lined under each-other instead of being next to each other.

    I will appreciate it if you could help me to replace it with a better code. 

    <?php get_header(); ?>

<?php foreach( $related_posts as $related_post ) : ?>
    <h3><a href="<?php echo get_permalink( $related_post->ID ); ?>"><?php echo get_the_title( $related_post->ID ); ?></a></h3>
    <?php echo get_the_post_thumbnail( $related_post->ID, 'thumbnail' ); ?>
<?php endforeach; ?><?php
// Get the tags for the current post
$tags = wp_get_post_tags( get_the_ID() );

// Get an array of tag IDs
$tag_ids = array();
foreach ( $tags as $tag ) {
    $tag_ids[] = $tag->term_id;
}

// Query for related posts based on the tags
$related_posts = get_posts( array(
    'tag__in' => $tag_ids,
    'post__not_in' => array( get_the_ID() ),
    'posts_per_page' => 
) );

// Loop through the related posts and display the titles and thumbnails
foreach ( $related_posts as $post ) {
    setup_postdata( $post );
    ?>
    <div class="container"> <!-- container start -->
      <div class="row overflow-hidden"> <!-- row start -->
	   <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4 col-xl-3">
		   <div class="title-box mx-auto mb-0">
        <a href="<?php the_permalink(); ?>">
			    <h1 class="title-color">
			<?php the_title(); ?></h1>
         <?php
                        if( has_post_thumbnail() ):
                            the_post_thumbnail('full', [ 'title' => 'Feature image', 'class' => 'img-fluid']);
                        else:
                    ?>        
                        <img class="img-fluid" src="<?php echo get_template_directory_uri() . "/images/bg.jpg"; ?>">
                    <?php endif; ?>     </a>
            </div>
		     </div> 
		      </div> 
		       </div> 
    <?php }wp_reset_postdata();?>

<?php get_footer(); ?>

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi @ferdalkrmn,
    You are attempting to showcase a list of related posts on your single.php template. To help you achieve this, here is some revised code that should do the trick:

    <?php
// Get the tags for the current post
$tags = wp_get_post_tags( get_the_ID() );

// Get an array of tag IDs
$tag_ids = array();
foreach ( $tags as $tag ) {
    $tag_ids[] = $tag->term_id;
}

// Query for related posts based on the tags
$related_posts = get_posts( array(
    'tag__in' => $tag_ids,
    'post__not_in' => array( get_the_ID() ),
    'posts_per_page' => 5 // Change this number to set the number of related posts to display
) );

// If there are related posts, display them
if ( $related_posts ) :
?>
    <div class="related-posts">
        <h2>Related Posts</h2>
        <div class="row">
            <?php foreach ( $related_posts as $post ) : setup_postdata( $post ); ?>
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4 col-xl-3">
                    <div class="related-post">
                        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                        <?php the_post_thumbnail( 'thumbnail' ); ?>
                    </div>
                </div>
            <?php endforeach; wp_reset_postdata(); ?>
        </div>
    </div>
<?php endif; ?>

    This code queries related posts based on the current post’s tags, looping through the results to display the titles and thumbnails of the related posts in a grid layout using Bootstrap’s grid system. This should help you get the desired result quickly and easily. If you have any questions, please don’t hesitate to reach out.

    Thread Starter ferdalkrmn

    (@ferdalkrmn)

    @faisalahammad Hello, thank you so much for the help it really fixed my problem, but I have updated the code like this, it’s working but I just want to make sure that I didn’t make a mistake, the code is working perfectly ??

    <div class="container"> <!-- container start -->
        <div class="row overflow-hidden"> <!-- row start -->
            <?php foreach ( $related_posts as $post ) : setup_postdata( $post ); ?>
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4 col-xl-3">
					<a href="<?php the_permalink(); ?>">
                    <div class="title-box mx-auto mb-0">
                         <h1 class="title-color"><?php the_title(); ?></h1>
                        <?php
                        if( has_post_thumbnail() ):
                            the_post_thumbnail('full', [ 'title' => 'Feature image', 'class' => 'img-fluid']);
                        else:
                    ?>        
                        <img class="img-fluid" src="<?php echo get_template_directory_uri() . "/images/bg.jpg"; ?>">
                    <?php endif; ?>    
                    </div></a>
                </div>
            <?php endforeach; wp_reset_postdata(); ?>
        </div>
    </div>
<?php endif; ?>
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Displaying Related posts’ is closed to new replies.