Go to Theme Options - System - Install Child Theme.
Go to Appearance - Theme File Editor, and edit functions.php
Add this to the end of the page:
// Create related posts shortcode
function uicore_related_posts_shortcode( $atts = [] ) {
if ( ! is_singular( 'post' ) ) {
// Only show on single blog posts
return '';
}
$atts = shortcode_atts( [
'title' => 'Related Posts',
'count' => 5,
'orderby' => 'date', // 'date' | 'rand' | 'comment_count' etc.
'order' => 'DESC',
'show_thumb' => 'false', // 'true' or 'false'
'class' => '', // extra wrapper class
], $atts, 'related_posts' );
$post_id = get_the_ID();
if ( ! $post_id ) return '';
// Get current post category IDs
$cat_ids = wp_get_post_terms( $post_id, 'category', [ 'fields' => 'ids' ] );
if ( empty( $cat_ids ) ) return '';
$q = new WP_Query( [
'post_type' => 'post',
'post__not_in' => [ $post_id ],
'posts_per_page' => (int) $atts['count'],
'ignore_sticky_posts' => 1,
'orderby' => sanitize_key( $atts['orderby'] ),
'order' => $atts['order'] === 'ASC' ? 'ASC' : 'DESC',
'tax_query' => [
[
'taxonomy' => 'category',
'field' => 'term_id',
'terms' => $cat_ids,
],
],
] );
if ( ! $q->have_posts() ) {
wp_reset_postdata();
return '';
}
$show_thumb = filter_var( $atts['show_thumb'], FILTER_VALIDATE_BOOLEAN );
ob_start();
?>
<aside class="uicore-related-posts <?php echo esc_attr( $atts['class'] ); ?>">
<?php if ( ! empty( $atts['title'] ) ) : ?>
<h3 class="uicore-related-posts__title"><?php echo esc_html( $atts['title'] ); ?></h3>
<?php endif; ?>
<ul class="uicore-related-posts__list">
<?php while ( $q->have_posts() ) : $q->the_post(); ?>
<li class="uicore-related-posts__item">
<a class="uicore-related-posts__link" href="<?php echo esc_url( get_permalink() ); ?>">
<?php if ( $show_thumb && has_post_thumbnail() ) : ?>
<span class="uicore-related-posts__thumb"><?php echo get_the_post_thumbnail( get_the_ID(), 'thumbnail', [ 'alt' => esc_attr( get_the_title() ) ] ); ?></span>
<?php endif; ?>
<span class="uicore-related-posts__text"><?php echo esc_html( get_the_title() ); ?></span>
</a>
</li>
<?php endwhile; ?>
</ul>
</aside>
<?php
wp_reset_postdata();
return ob_get_clean();
}
add_shortcode( 'related_posts', 'uicore_related_posts_shortcode' );
Add this to Theme Options - Custom CSS:
.uicore-related-posts__list {
list-style: none;
margin: 0;
padding: 0;
}
.uicore-related-posts__item {
display: flex;
gap: .6rem;
margin: .7rem 0;
}
.uicore-related-posts__thumb img {
display: block;
width: 36px;
height: 36px;
object-fit: cover;
border-radius: 8px;
}
.uicore-related-posts__link {
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
}
.uicore-related-posts__link:hover .uicore-related-posts__text {
text-decoration: underline;
}
Go to Appearance - Widgets - Blog Post Sidebar, and add a shortcode block.
Basic:
[related_posts]
With thumbnails and a custom title:
[related_posts title="You might also like" show_thumb="true"]
Random order, 8 items:
[related_posts orderby="rand" count="8"]