{"id":14668,"date":"2023-06-26T13:00:21","date_gmt":"2023-06-26T11:00:21","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=14668"},"modified":"2023-06-26T13:30:05","modified_gmt":"2023-06-26T11:30:05","slug":"show-child-pages-of-wordpress-parent-page","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/show-child-pages-of-wordpress-parent-page\/","title":{"rendered":"How to Show All the Child Pages of a WordPress Parent Page"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Dividing related content across several associated subpages is as much art as it is science. As a WordPress webmaster, you might be tempted to put a lot of content on a singular page, but you should resist that! Reducing clutter will increase the readability of your page. And spreading your content over several pages is one of the most common ways of avoiding a jumble. But, you still need to make it obvious for your visitors that the original page and subsequent subpages are connected. And ensure those subpages can be easily accessed.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can address that by including an index of all connected subpages on the original page. The index will help website users quickly view the content they are looking for as well as help them pick and choose from the content, or even discover something new.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Creating subpages is quite easy as WordPress has a built-in option to help you do it. It works by assigning one page to be the parent page of another (referred to as the child page). However, the tricky bit is inserting an index of child pages into the parent page. So, in this article, we will be taking a look at how to show an index of child pages belonging to a specific parent page. And we\u2019ll show you how to tackle this issue by breaking it down into several smaller steps. But first, let\u2019s see what child and parent pages are. If you\u2019re already fluent with this, you can scroll down to the practical steps.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">What are child and parent pages in WordPress?<\/h2>\n<p>[\/vc_column_text][vc_column_text]Child and parent pages are a way to organize and structure your website&#8217;s content hierarchy. They are a feature of the WordPress page system, which allows you to create static pages for your website&#8217;s content, such as About Us, Contact, or Services.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]A parent page is a top-level page that acts as a container or a category for other pages. It serves as the main page or section under which you can group related subpages or child pages. These child pages inherit certain characteristics from their parent page, such as the parent page&#8217;s URL structure and menu placement. Child pages, which can be considered subpages under a particular parent, are indented and nested under their parent page in the editor, maintaining a clear hierarchical relationship. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To learn more about this, check out our piece that explains <a href=\"https:\/\/qodeinteractive.com\/magazine\/what-is-parent-page-in-wordpress\">what parent pages are<\/a> in greater detail.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can show an index of all child pages attached to a specific WordPress page using two different methods. The first involves using a convenient plugin and the second entails enabling this feature using custom code. We will show you the steps for both methods. However, we first need to explain how to assign a parent page to another WordPress page.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#assigning-a-parent-page-to-another-page\">Assigning a parent page to another page<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#showing-child-pages-using-a-plugin\">Showing child pages using a plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#showing-child-pages-using-custom-code\">Showing child pages using custom code<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"assigning-a-parent-page-to-another-page\"><\/a>Assigning a parent page to another page within WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]Start by deciding which page will be the child page. Then <strong>open it for editing<\/strong> and <strong>navigate to the Page Attributes section on the right<\/strong>. If you are using the default WordPress page builder \u2013 Gutenberg, the section will be located in the Document tab. Then, <strong>locate the <em>Parent Page<\/em> option<\/strong>, <strong>select a page from the dropdown menu<\/strong>, and <strong>press the <em>Update<\/em> button<\/strong> in the top right corner of the screen to update the page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"500\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Assigning-a-Parent-Page.jpg\" class=\"attachment-full size-full\" alt=\"Assigning a Parent Page\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Assigning-a-Parent-Page.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Assigning-a-Parent-Page-300x214.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Assigning-a-Parent-Page-620x443.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>This will set the page you selected from the dropdown menu as the parent of the page you were editing.<\/strong> The successful connection can also be seen from the list of <em>All Pages<\/em>. Child pages are shown below their corresponding parent page and are indented using a dash in front of their name.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>You can also assign parent pages to already existing parent pages. This creates child pages of multiple depths. The child depth level is then noted by the number of dashes preceding the page title.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Portfolio-Parent-Page-and-Child-Pages.jpg\" class=\"attachment-full size-full\" alt=\"Portfolio Parent Page and Child Pages\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Portfolio-Parent-Page-and-Child-Pages.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Portfolio-Parent-Page-and-Child-Pages-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Portfolio-Parent-Page-and-Child-Pages-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"showing-child-pages-using-a-plugin\"><\/a>Showing child pages using a plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]Due to an abundance of WordPress plugins for almost any purpose, you should always try to find a convenient plugin first when adding a new feature or functionality. The plugin we\u2019ll be using in this article is the <a href=\"https:\/\/wordpress.org\/plugins\/cc-child-pages\/\" target=\"_blank\" rel=\"noopener noreferrer\">CC Child Pages<\/a> plugin. You can use this plugin in two ways after <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">installing it<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first way requires using widgets. <strong>Insert the CC Child Pages widget in your desired widget area<\/strong> and then <strong>adjust the available widget options<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You\u2019ll find the CC Child Pages widget near the top of the list of the Available Widgets section. When you\u2019ve added it, you can pick which options will be useful for you. For example, when ticked, the option <em>Show Page Title<\/em> will replace the static title from the Title field with the name of the current parent page, so the child page index will have a helpful title instead of just saying <em>Child pages<\/em>. You can choose which pages won\u2019t show by adding page IDs in the <em>Exclude<\/em> option.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For reference, a page ID is a number that you can find in a page\u2019s permalink, after the part with ?post= in it. In our case, for example, the ID of the <em>Contact Us<\/em> page is <strong>1114<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Page-ID.jpg\" class=\"attachment-full size-full\" alt=\"Page ID\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Page-ID.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Page-ID-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Page-ID-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Also, by ticking the <em>Show Sibling Pages<\/em> you will show pages that have the same parent and are on the same child depth.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Widgets.jpg\" class=\"attachment-full size-full\" alt=\"Widgets\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Widgets.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Widgets-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Widgets-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"504\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Inserting-Child-Pages-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Inserting Child Pages Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Inserting-Child-Pages-Widget.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Inserting-Child-Pages-Widget-300x216.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Inserting-Child-Pages-Widget-620x446.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Here\u2019s an example of how the widget content could look on a website made with <a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/powerlift-fitness-and-gym-theme\/\">the Powerlift theme<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/CC-Child-Pages-Widet-Preview.jpg\" class=\"attachment-full size-full\" alt=\"CC Child Pages Widet Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/CC-Child-Pages-Widet-Preview.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/CC-Child-Pages-Widet-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/CC-Child-Pages-Widet-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>The second way of using the CC Child Pages plugin<\/strong> is to directly insert the shortcode. We will take you through the steps using the Gutenberg page builder. <strong>We strongly suggest studying our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/create-shortcode-in-wordpress\/\">custom shortcodes<\/a> if you aren\u2019t certain what those are and in which form to use when inserting them into your page. The article also covers inserting a custom shortcode inside your page if you are using Elementor or WPBakery as your page builders of choice.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To insert the custom shortcode within a page, <strong>click the + sign<\/strong> to add a Gutenberg block <strong>and select a <em>Shortcode<\/em> block<\/strong>. Then <strong>insert the shortcode name<\/strong> within it and <strong>press the <em>Update<\/em> button<\/strong>. The shortcode name is <em>child_pages<\/em>, so you can simply insert <strong>[child_pages]<\/strong>. By doing so, every possible function parameter will be set to its default value, which is defined within the corresponding plugin file. But, you can also insert your arguments to specify some of the parameters. As the list of possible arguments is set as an associative array, you should insert the arguments in the following format: key=\u2019value\u2019. If making multiple entries, you should separate them with a blank space.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As an example, we have set the following:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[child_pages cols=\u20192\u2019 depth=\u20190\u2019]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This makes our index list display in 2 columns (cols=\u20192\u2019) and presents the parent and all child pages in a hierarchical and indented (depth=\u20190\u2019) list. <strong>If you want to know more about the available arguments and how to include them, we suggest going through the official plugin page in detail.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Plugin-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Plugin Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Plugin-Shortcode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Plugin-Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Plugin-Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After inserting the example shortcode, we got the following result, shown below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"388\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/CC-Child-Pages-Page-Preview.jpg\" class=\"attachment-full size-full\" alt=\"CC Child Pages Page Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/CC-Child-Pages-Page-Preview.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/CC-Child-Pages-Page-Preview-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/CC-Child-Pages-Page-Preview-620x344.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The drawback of this plugin is that it has very few additional options. For styling purposes, <strong>you can choose whether to use the premade plugin styles or not. That\u2019s done by ticking the<em> Yes<\/em> or <em>No<\/em> checkbox next to the <em>Enqueue Skin CSS<\/em> option in Settings &gt; Child Pages.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/CC-Child-Pages-Options.jpg\" class=\"attachment-full size-full\" alt=\"CC Child Pages Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/CC-Child-Pages-Options.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/CC-Child-Pages-Options-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/CC-Child-Pages-Options-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To improve the stylization of your child page results <strong>you can also include additional, tailor-made<\/strong>, <strong>CSS in the <em>Custom CSS<\/em> option below<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/CC-Child-Pages-Options-2.jpg\" class=\"attachment-full size-full\" alt=\"CC Child Pages Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/CC-Child-Pages-Options-2.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/CC-Child-Pages-Options-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/CC-Child-Pages-Options-2-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>After making any changes to the settings don\u2019t forget to press the <em>Update Options<\/em> button below, for those changes to apply.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"showing-child-pages-using-custom-code\"><\/a>Showing child pages using custom code<\/h2>\n<p>[\/vc_column_text][vc_column_text]Another possible way of creating an index of child pages is through the use of custom-made code. The benefit of this method is the freedom of customization. You can modify the index section of the child pages exactly according to your needs without being reliant on a plugin. However, creating custom code is a method geared predominantly towards more experienced WordPress users.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Before we delve into the steps needed for this method, there are a couple of suggestions we\u2019d like to make. Firstly, we suggest brushing up on your knowledge on <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-ftp\/\">the use of FTP<\/a>. Secondly, it is sound policy to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-backup-wordpress-files\/\">make a backup of your WordPress files<\/a> in advance, since improper use of code can break your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Having said that, let us proceed to the description for this method. First, you would need to <strong>connect to your server<\/strong> using your FTP credentials and <strong>navigate to your root WordPress directory<\/strong>, often called public_html.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Public-HTML.jpg\" class=\"attachment-full size-full\" alt=\"FTP Public HTML\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Public-HTML.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Public-HTML-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Public-HTML-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then,<strong> navigate to the \/wp-content\/themes directory<\/strong> and <strong>click on the directory of your current theme<\/strong> to open it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Themes.jpg\" class=\"attachment-full size-full\" alt=\"FTP Themes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Themes.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Themes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Themes-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Find the functions.php file<\/strong> within, <strong>right-click on it<\/strong>, and <strong>select the <em>View\/Edit<\/em> option<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"472\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Functions-2.jpg\" class=\"attachment-full size-full\" alt=\"FTP Functions\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Functions-2.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Functions-2-300x202.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Functions-2-620x418.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Open the file<\/strong> using your preferred text editor and <strong>insert the code given below<\/strong> at the end of the file.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_children_list() {\r\nglobal $id;\r\n$child_pages = wp_list_pages( array(\r\n'title_li' =&gt; '',\r\n'child_of' =&gt; $id,\r\n'sort_column' =&gt; 'post_date',\r\n'sort_order' =&gt; 'desc',\r\n'echo' =&gt; 0\r\n) );\r\nif ( $child_pages){\r\n$output = '&lt;ul&gt;' . $child_pages . '&lt;\/ul&gt;';\r\n}\r\nelse\r\n$output = '';\r\nreturn $output;\r\n}\r\nadd_shortcode( 'children_list', 'qode_children_list', 11 );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Custom-Code.jpg\" class=\"attachment-full size-full\" alt=\"Custom Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Custom-Code.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Custom-Code-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Custom-Code-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Let\u2019s take a closer look at the code included above.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>This code is a small custom shortcode called <em>children_list<\/em>. It displays an unordered list of links leading to corresponding child pages of a page that the shortcode is used on.<\/strong> If that page has no child pages, the code won\u2019t do anything (the output HTML would be empty).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The code relies entirely on the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_list_pages\/\" target=\"_blank\" rel=\"noopener noreferrer\">wp_list_pages()<\/a> function. This function can take many possible parameters although we used very few. The notable ones are the two we used for sorting the appropriate links. More precisely, the links are sorted in descending order following the publish dates of the child pages. Therefore, the entries on the list will start from the newest and go down to the oldest.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We strongly suggest going through the documentation regarding the wp_list_pages() function for more information on its parameters and use<\/strong>. With that being said, let\u2019s see how we can use this shortcode on our website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you want to add the shortcode to your page, you can do so <strong>using Gutenberg as your page builder<\/strong>. Simply <strong>press the + sign<\/strong> to add a new block, <strong>select the <em>Shortcode<\/em> block<\/strong>, and <strong>insert <em>[children_list]<\/em><\/strong>. Finally, <strong>press the <em>Update<\/em> button<\/strong> in the top right corner of the page. <strong>If you prefer Elementor or WPBakery as your page builders, you can find the steps required for them in our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/create-shortcode-in-wordpress\/#using-custom-shortcodes\">the use of custom shortcodes<\/a>.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Custom-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Custom Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Custom-Shortcode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Custom-Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Custom-Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you used the same shortcode we gave as our example inside the content of your page, then you will get the following result:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Custom-Code-Preview-1.jpg\" class=\"attachment-full size-full\" alt=\"Custom Code Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Custom-Code-Preview-1.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Custom-Code-Preview-1-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Custom-Code-Preview-1-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>You can also place the shortcode into a Text widget and display the child page index inside your preferred widget area<\/strong>. This use is also described in more detail in our article on custom shortcodes. For now, you can simply <strong>add <em>[children_list]<\/em> inside the Text widget<\/strong> and <strong>press the <em>Save<\/em> button<\/strong>. You can even add a title for your child page index, although we have opted not to do so in our example.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Custom-Code-Text-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Custom Code Text Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Custom-Code-Text-Widget.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Custom-Code-Text-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Custom-Code-Text-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Here\u2019s how the shortcode looked in <a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/powerlift-fitness-and-gym-theme\/\">the Powerlift theme<\/a> after being inserted into the sidebar area.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Custom-Code-Preview-2.jpg\" class=\"attachment-full size-full\" alt=\"Custom Code Preview 2\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Custom-Code-Preview-2.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Custom-Code-Preview-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Custom-Code-Preview-2-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>You can choose to further stylize the appearance of this list. That can be done by creating some custom CSS. If you opt to do this, we advise you to add it under <em>Additional CSS<\/em>, which is located in the Appearance &gt; Customize section of your admin dashboard.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Showing all child pages of a specific parent page has many uses. Making navigation through your website easier and improving user experience, to name a few. Even though showing the child pages of a WordPress parent page might seem easy to achieve, it\u2019s made a bit complicated by the lack of built-in options in WordPress. However, if you follow the steps we outlined in the article, you can manage this quickly and with minimal effort. Additionally, we have done our best to provide a comprehensive explanation of both methods. Now it\u2019s up to you to choose which one you prefer to use.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Displaying all the child pages for a WordPress parent page can help you create meaningful connections and give your content more value.<\/p>\n","protected":false},"author":11229,"featured_media":14670,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[21,15,4,13],"class_list":["post-14668","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-php","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/14668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=14668"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/14668\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/14670"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=14668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=14668"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=14668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}