When using Custom Post Types with parent-child relationship, parent posts can have many child posts. Often, we need to display these child posts which are related to the one we are currently viewing on the front-end. The most common use for this in websites is to list related articles, related sub-posts or parts of series of posts, etc.

Please note that these instructions are meant for custom post types with parent-child relationships. If you want to learn how to display “brother” pages for the hierarchical custom post types, visit our Displaying Brother Pages tutorial.
Example of a tutorial post, showing brother posts on the sidebar
Example of a tutorial post, showing brother posts on the sidebar

 

When we are in a child post, we cannot query other ‘brother’ posts directly. We need to have the parent post list its children and display them as part of the child post.

Here is what we’re going to do:

  1. Create a Content Template for the parent page
  2. Display the parent Content Template in the child Content Template
  3. Create a View that lists the children of the parent post
  4. Insert the View into the parent post Content Template
  5. Bonus – highlight the currently displayed page

We will use the ID selection feature to accomplish this.

1. Create a Content Template for the parent post

In our example, child posts will be the steps of the tutorial, so let’s call the Content Template for the parent post “Tutorials Sidebar Parent”. After you create it, leave it empty for now, we will come back to it shortly.

The purpose of creating a new Content Template is that we can display it using the id=”$slug-of-a-parent-post-type” context. This means that the Content Template will be displayed in the child post, but will show items for the parent post.

When we later show children in this Content Template, we will actually be displaying the brothers of the currently displayed post.

2. Display the parent Content Template in the child Content Template

In this step, we need to create a Content Template for showing the single child posts. Let’s give it a descriptive name of “Tutorial Single Child Post”.

This Content Template will do two things:

  1. Display body of the current child post being viewed.
  2. Call the “Tutorial Sidebar Parent” content template.

First, insert a regular wpv-post-body shortcode that does not use any Content Templates for displaying.

Then, insert another wpv-post-body shortcode, but this time, select the “Tutorials Sidebar Parent” Content Template to be used to display the contents. After the shortcode is inserted, we append the id=”$slug-of-a-parent-post-type” to it. For example, our parent Custom Post Type has a slug tutorial, so we used the id=”$tutorial”

The ID selection is a critical step, as it tells Views to display the “Tutorials Sidebar Parent” Content Template, not for the currently displayed post, but for its parent.

Your Content Template should now look similar to the one in the next image.

Show Related Child Posts
Show Related Child Posts

3. Create a View that lists the children of the parent post

Let’s create a View that will list the children of the parent post, we will call it Listing Child Posts. In the Content Selection section, select your child Custom Post Type. Then add a new Query Filter and select the Post Relationship – Post is a child of option. In the dialog that will appear, select the The current post in the loop option and click Save.

Since we specified the id=”$slug-of-a-parent-post-type” in the previous step, the Content Template will set the parent of the current tutorial step. This means that when we filter items by post children, we will receive all the “brothers” of the currently displayed post.

Displaying Brother Posts – children of the current parent post
Displaying Brother Posts – children of the current parent post

As the last part of the View creation, don’t forget to add some post fields to the Loop Output section, for example, we used a simple post title with a link.

4. Insert the View into the parent post Content Template

Now that we have a View that displays the child posts, we need to insert it into the “Tutorials Sidebar Parent” Content Template which we created in the first step of this tutorial.

Displaying Brother Pages - Insert the View
Displaying Brother Pages – Insert the View

5. Highlight the currently displayed page

Have you noticed that the currently displayed page in the list of tutorial steps is highlighted? Want to learn how to do this?

We use Views conditional HTML output, in conjunction with the id=”$current_page” attribute. This attribute tells Views to use the ID of the currently displaying page or a post and lets us check if an item in the View loop is the currently displayed one.

Here is the code that we’re using:

Highlight Current Post
[wpv-conditional if="( '[wpv-post-id]' eq '[wpv-post-id id="$current_page"]' )"]

   <li><strong>[wpv-post-title]</strong></li>

[/wpv-conditional]

[wpv-conditional if="( '[wpv-post-id]' eq '[wpv-post-id id="$current_page"]' )" evaluate="false"]

   <li>[wpv-post-link]</li>

[/wpv-conditional]

When the View renders the current post, we tell it to use one, highlighted output. For other posts, other regular output will be shown.


The results

And, here are the results:

Example of a tutorial post
Example of a tutorial post

Summary

In some cases, when we are viewing a post on the front-end, we do not have access to relationship information, like child posts of the same parent. In this example, we used the WordPress parent-child post relationship to provide a workaround on how to display such kind of information.