How to Show Related Pages in WordPress


Recently, one of our users asked us if there was a way to show related pages instead of posts in WordPress. Previously, we showed you how to show related posts in WordPress with or without plugin. In this article, we will show you how to show related pages in WordPress.

Showing Related Pages in WordPress Using Plugin

The easier way to display related pages in WordPress is by using a plugin.

First thing you need to do is install and activate the Yet Another Related Posts Plugin (YARPP) plugin. After activation, you need to go to Settings » YARPP to configure the plugin.

Configue YARPP to only show related pages

On the plugin’s settings page, scroll down to ‘Display Options for your website’ section. Under Automatically Display option, you need to check ‘pages’ and leave posts and media unchecked. That’s all, you can save your settings now and YARPP will start displaying related pages below page content on your WordPress site.

Please note that YARPP along with some other WordPress plugins is blocked by some managed WordPress hosting providers due to its heavy database usage. Another issue that you may face is that YARPP cannot search database for text if your MySQL storage engine is set to InnoDB.

Showing Related Pages in WordPress Without Plugin

Before we show you how to display related pages without using a plugin, we would like you to take a look at our article on the difference between Posts and Pages in WordPress.

Most efficient way to display related posts is by looking for tags or categories. But since WordPress pages do not have tags or categories, we will first need to enable categories and tags for WordPress pages. To do that, all you need to do is install and activate, the Post Tags and Categories for Pages plugin.

The plugin works out of the box, so there are not settings for you to configure. Upon activation, it will simply enable tags and categories for your WordPress pages.

Now you need to edit a couple of pages you think are related to each other and add tags. For example, if you have a page about your company and another page for company’s history, you can tag them both as about us.

After you have added tags to a few pages, the next thing you need to do is to add this code in your theme’s functions.php file or a site-specific plugin.

  function wpb_related_pages() {   $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(  'post_type' => 'page',  'tag__in' => $tag_ids,  'post__not_in' => array($post->ID),  'posts_per_page'=>5  );  $my_query = new WP_Query( $args );  if( $my_query->have_posts() ) {  echo '<div id="relatedpages"><h3>Related Pages</h3><ul>';  while( $my_query->have_posts() ) {  $my_query->the_post(); ?>  <li><div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail('thumb'); ?></a></div>  <div class="relatedcontent">  <h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>  <?php the_time('M j, Y') ?>  </div>  </li>  <? }  echo '</ul></div>';  } else {   echo "No Related Pages Found:";  }  }  $post = $orig_post;  wp_reset_query();   }

This code looks for tags associated with a page and then runs a database query to fetch pages with the similar tags. To display the list of pages, you would need to edit your page template. Most commonly it is page.php or content-page.php file. Simply add this line of code where you want related pages to appear.

  <?php wpb_related_pages(); ?>

This will display related pages on any WordPress page. It will not look very pretty at first, so you will need to add some CSS and style it to match your theme.

Note: code in functions.php are treated the same as plugins.

We hope this article helped you display related pages in WordPress. As always, please feel free to ask us questions in the comments below. Don’t forget to follow us on twitter or join the discussion on Google+.