Latest Tech and Tips

How to Display a List of Child Pages For a Parent Page in WordPress

14

Recently one of our viewers asked us how to display child pages of a WordPress page?

If you arrange your WordPress internet site with parent and also child pages, after that you might desire to display your child pages or sub pages on the primary parent page. You might likewise desire to reveal the primary page on each sub page for very easy surfing.

In this write-up, we will certainly reveal you how to quickly display a list of child pages for a parent pagein WordPress

Displaying a list of child pages for a parent page in WordPress

When You Need to Show a List of Child Pages?

WordPress includes 2 default message kinds called messages and also pages. Posts are blog site web content, and also they are generally arranged with groups and also tags.

Pages are one-off or standalone web content that are evergreen such as ‘About us’ page or ‘Contact us’ page.

In WordPress, pages can be ordered which indicates you can arrange them with parent and also child pages.

For circumstances, you might desire to develop a item page with child pages for Features, Pricing, and alsoSupport

To develop a child page, follow our overview on how to develop a child pagein WordPress

After you have actually produced your parent and also child pages, you might desire to list child pages on the primary parent page.

Now a simple means to do this is by manually editing and enhancing the parent page and also include a list of web links separately.

Manually add child page links

However, you’ll require to by hand modify the parent page each time you include or erase a child page. Wouldn’ t it be better if you could simply develop a child page and also it would instantly look like a web link on the parent page?

That being stated, allow’s take a consider a few other vibrant methods to swiftly display a list of child pages on the parent pagein WordPress

Method 1. Display Child Pages on Parent Page making use of a Plugin

This technique is much easier and also suggested for all individuals.

First, you require to set up and also trigger the Page-list plugin. For even more information, see our detailed overview on how to set up a WordPress plugin.

Upon activation, you require to modify the parent page and also just include the adhering to shortcode where you desire to display the list of child pages.

[subpages]

You can currently conserve your page and also sneak peek it in a brand-new internet browser tab. You’ll discover that it shows a easy bulleted list of all the child pages.

Plain list of child page links

If you desire, you can include some personalized CSS to transform the look of the list. Here is some example CSS you can utilize as a beginning factor.

ul.page-list. subpages-page-list {
list-style: none;.
list-style-type: none;.
background-color: #eee;.
boundary: 1px strong #CCC;.
cushioning: 20px;.
}

After using your personalized CSS you can sneak peek the parent page. This is how it searched our examination WordPress internet site.

Child pages list with CSS

The plugin offers a number of shortcode criteria that enable you to established deepness, omit pages, number of things, and also a lot more. For information, please see the plugin’s page for in-depth paperwork.

Method 2. List Child Pages for a Parent Page making use of Code

This technique is a little bit sophisticated and also needs to you include code to your WordPress internet site. If you have actually refrained this in the past, after that please take a consider our overview on how to duplicate and also paste codein WordPress

To list child pages under a parent page, you require to include the adhering to code in a site-specific plugin, or in your style’s functions.php documents:

feature wpb_list_child_pages() {

worldwide $post;.

if (is_page() && & &$ post- > post_parent).$ childpages =wp_list_pages (' sort_column= menu_order & title_li= & child_of= '&.
$ post- > post_parent.' & resemble =0 ');. else.$ childpages= wp_list_pages(' sort_column= menu_order & title_li=&& child_of='. $post->> ID. '&& resemble= 0' );.

if ($ childpages) {

$ string='<< ul course ="wpb_page_list">>'. $childpages. '<';.
}

return $string;.

}

add_shortcode(' wpb_childpages', 'wpb_list_child_pages');.

The code over initial checks to see if a page has a parent or the page itself is a parent.

If it is a parent page, after that it shows the child pages connected with it. If it is a child page, after that it shows all various other child pages of its parent page.

Lastly, if this is simply a page without child or parent page, after that the code will just not do anything. In the last line of the code, we have actually included a shortcode, so you can quickly display child pages without customizing your page layouts.

To display child pages just include the adhering to shortcode in a page or message widget in the sidebar:

[wpb_childpages]

Don' t fail to remember to conserve your modifications and also sneak peek them in a internet browser tab. This is how it shows up on our examination website.

Plain link list

You can currently design this page list making use of some personalized CSS. Here is some example CSS code you can utilize as a beginning factor.

ul.wpb _ page_list {
list-style: none;.
list-style-type: none;.
background-color: #eee;.
boundary: 1px strong #CCC;.
cushioning: 20px;.
}

Method 3. Dynamically Display Child Pages Without Any Shortcode

Using shortcodes is hassle-free, yet the trouble with them is that you will certainly have to include shortcodes in all pages that have parent or child pages.

You might wind up having shortcodes in whole lots of pages, and also in some cases you might also fail to remember to include it.

A much better method would certainly be to modify the page design template documents in your style, to make sure that it can instantly display child pages.

To do that, you require to modify the primary page.php design template, or develop a personalized page design template in your style.

You can modify your primary style, yet those modifications will certainly go away if you transform or upgrade your style. That's why it would certainly be much better if you develop a child style and after that make your modifications in the child style.

In your page design template documents, you require to include this line of code where you desire to display child pages.

<