I'm slowly building my own WordPress theme and want to have a related posts section at the bottom of each post (for example here on my site).
I am using the following code to generate the related posts:
<footer>
<div class="container-fluid related-posts">
<div class="row">
<?php $categories = get_the_category($post->ID); ?>
<?php if ($categories): ?>
<?php $category_ids = array(); ?>
<?php foreach($categories as $individual_category) : ?>
<?php $category_ids[] = $individual_category->term_id; ?>
<?php endforeach; ?>
<?php $args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=>3,
'ignore_sticky_posts'=>1,
'oderby' => 'rand'
);?>
<?php $my_query = new WP_Query($args); ?>
<?php if( $my_query->have_posts() ) : ?>
<section class="container-fluid">
<h2>Related Articles</h2>
<div class="row">
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div class="col-sm">
<a href="<?php the_permalink()?>" class="related-thumb"><?php the_post_thumbnail(); ?></a>
<h3><a href="<?php the_permalink()?>"><?php the_title(); ?></a></h3>
<p><?php the_excerpt()?></p>
</div>
<?php endwhile;?>
</div>
</section>
<?php endif; ?>
<?php wp_reset_query();?>
<?php endif; ?>
</div>
</div>
</footer>
With a small amount of CSS:
.related-posts h3 {
font-size: 1.2rem;
}
.related-posts h2 {
text-decoration: underline;
}
I would like the excerpt that is displayed to be limited to 50 characters and customise the 'read more' element that shows on the front end (currently [...]). However I haven't been able to do this. Any help would be hugely appreciated!