0

I am running a blog on WordPress and want my single posts to show related posts, but without any plugin. I have added following codes to the bottom of the single page -

<div class="relatedposts">
<h3>Related posts</h3>
<?php
  $orig_post = $post;
  global $post;
  $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),
  'posts_per_page'=>4, // Number of related posts to display.
  'caller_get_posts'=>1
  );

  $my_query = new wp_query( $args );

  while( $my_query->have_posts() ) {
  $my_query->the_post();
  ?>

  <div class="relatedthumb">
    <a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />
    <?php the_title(); ?>
    </a>
  </div>

  <? }
  }
  $post = $orig_post;
  wp_reset_query();
  ?>
</div>

But they are showing in vertical line whereas I want to display them inline horizontally in a row. You can see them in the below screenshot Related posts vertically shown

So kindly help me to figure out the issue so that I could Keep WordPress Related posts without plugin inline. thank you so much in advance.

0

You can define .relatedthumb as a flexbox.

a {
cursor: pointer;
}
.relatedthumb {
display:flex;
justify-content: flex-start;
}
<div class="relatedposts">
  <h3>Related posts</h3>
  <div class="relatedthumb">
    <a><img src="http://lorempixel.com/75/100" /><p>Dummy text</p></a>
    <a><img src="http://lorempixel.com/75/100" /><p>Dummy text</p></a>
    <a><img src="http://lorempixel.com/75/100" /><p>Dummy text</p></a>
  </div>
</div>

1
  • But I am not using a custom one. I am fetching them through tags. I have thousands of posts So need a universal way. thanks for the answer. – user31225 Jun 12 '17 at 6:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.