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.
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:
- Create a Content Template for the parent page
- Display the parent Content Template in the child Content Template
- Create a View that lists the children of the parent post
- Insert the View into the parent post Content Template
- 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:
- Display body of the current child post being viewed.
- 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.
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.
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.
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:
[wpv-conditional if="( '[wpv-post-id]' eq '[wpv-post-id id="$current_page"]' )"]
[wpv-conditional if="( '[wpv-post-id]' eq '[wpv-post-id id="$current_page"]' )" evaluate="false"]
When the View renders the current post, we tell it to use one, highlighted output. For other posts, other regular output will be shown.
And, here are the results:
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.