Home • Tips & Tricks • How to display related posts on your WordPress site

How to display related posts on your WordPress site

Most of the time we want to keep the visitors more on our websites, by providing them options to explore after they have finished reading the article or when scrolling down the page.

How to display related posts on your WordPress site

Summary

Related posts on your WordPress site?

Displaying related content is a good SEO practice, but also an opportunity for showing more of your content to visitors interested in some topics.

There are many ways in which you could decide how to make related content, but most of the time this is simplified to sticking to the same post tags or the same category for the articles sharing the same topics.

How to display related articles?

Many good plugins could help you do that, so you could install and activate one, and after that, you have to style the related content and make it look like a part of your page. You could write code in your theme, or develop a plugin.

If you already use the free Latest Post Shortcode WordPress plugin, and you already customized the look of the cards, you could simply generate a shortcode that you can embed anywhere you want, and that would inherit the styles and make the “related articles” look like part of your page.

Get related articles by category

See below an example of showing related articles based on a specified taxonomy, in this case, the category. If no terms (slugs separated by a comma) are provided, the categories of the current post will be used for determining the related content.

[lps_related_articles limit="4" taxonomy="category" terms="tips-tricks"]

Are you interested in more programming tips and tricks?

Get related articles by post tags

See below an example of showing related articles based on a specified taxonomy, in this case, the post_tag. If no terms (slugs separated by a comma) are provided, the post tags of the current post will be used for determining the related content.

[lps_related_articles limit="4" taxonomy="post_tag" terms="snippets"]

Do you want to see more PHP snippets?

Get related articles by a search key

The example below is showing related articles based on a specific search key. For the next example, I used Northern Lights.

[lps_related_articles limit="4" search="northern lights"]

Passionate about Northern Lights? This might interest you:

Autumn Trip to Northern Sweden

Autumn Trip to Northern Sweden

Lapland Adventures We planned this adventure last year and aimed to do this in the Spring, but due to the pandemic, all our plans …

PHP Code Snippet

Here is a code snippet that registers a new shortcode you can embed on all the posts where you want to display the nice cards with related content.

<?php
declare( strict_types = 1 );
namespace IuliaCazanSnippets\RelatedContent;
\add_shortcode( 'lps_related_articles', __NAMESPACE__ . '\\lps_related_articles', 10 );

/**
 * Related articles shortcode.
 * Snippet by Iulia Cazan - https://iuliacazan.ro.
 * 
 * @param  array $args Shortcode arguments.
 * @return string
 */
function lps_related_articles( $args ): string {
	$args = \wp_parse_args( $args, [
		'taxonomy' => '',
		'terms'    => '',
		'search'   => '',
		'limit'    => 4,
		'display'  => 'title,content-small',
	] );

	// You can put here the LPS shortcode base you want to use.
	$base = 'latest-selected-content ver="2" limit="' . (int) $args['limit'] . '" display="' . \esc_attr( $args['display'] ) . '" titletag="h4" chrlimit="160" more="…" url="yes" image="thumbnail" elements="25" css="four-columns as-column has-shadow hover-zoom content-space-between light has-img-spacing" type="post" status="publish" orderby="dateD" show_extra="trim"';

	if ( ! empty( $args['search'] ) ) {
		$base  .= ' search="' . \esc_attr( $args['search'] ) . '"';
		$result = \do_shortcode( '[' . $base . ']' );
	} elseif ( ! empty( $args['taxonomy'] ) ) {
		if ( empty( $args['terms'] ) ) {
			// Get dynamically the current post taxonomy terms.
			$tax_terms = \wp_get_object_terms( \get_the_ID(), $args['taxonomy'], [ 'fields' => 'all' ] );
			if ( ! empty( $tax_terms ) && ! \is_wp_error( $tax_terms ) ) {
				$slugs = \wp_list_pluck( $tax_terms, 'slug' );
				$terms = implode( ',', $slugs );
			}
		} else {
			// Specified taxonomy terms.
			$terms = $args['terms'];
		}

		if ( ! empty( $terms ) ) {
			$base  .= ' taxonomy="' . \esc_attr( $args['taxonomy'] ) . '" term="' . \esc_attr( $terms ) . '"';
			$result = \do_shortcode( '[' . $base . ']' );
		}
	}

	if ( ! empty( $result ) ) {
		return '<h2>' . \__( 'Related Articles', 'lps' ) . '</h2>' . $result;
	}

	return '';
}

I hope this snippet comes in handy. Check out other tips & tricks and stay tuned for more in my future posts.
Happy coding!

If you find the article useful and would like to support my work, please consider making a donation / buy me a coffee, or share this article on your feed.
Thank you very much!