WordPress How To - Show Child Pages Only
I’ve recently finished my new re-design for my main site, and am now converting it over to a WordPress theme. It occurred to me that one of the snippets of code I’m using might just help someone else also.
For my new theme, I needed to get only the child pages of a current page to display in my sidebar. However, I also wanted those child pages to show, regardless of whether or not I was actually ON a child page also.
An example hierarchy might work like this:
- About (Parent Page #2)
- My City (Child Page #8)
- My Bio (Child Page #4)
- My Photos (Child Page #3)
Now the tricky part is that it involves a few things there aren’t quick WordPress tags for.
- I want to list all the child pages in my sidebar.
- I want the child pages to show even while on another child page of the same parent page.
- And I want to control the display order through the admin menu order tool, not have it be alphabetically ascending.
So, first I need to find a way to display the child pages persistently, while on a child page or a parent page of the same section. So, I want to see those same sidebar links whether I’m browsing the main ‘About’ page, or reading the ‘My Bio’ page.
To achieve that first part, you need to use this little snippet of code that can be found on the WordPress codex:
<?php
if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>
<ul>
<?php echo $children; ?>
</ul>
<?php } ?>
Copy and paste that where your child pages should display.
So now the child pages are showing persistently, whether browsing on the parent page or one of the child pages (and they change if the parent page changes). But now, I need to deal with the order.
I want to be able to control the order through the admin screen without having to mess with the template, but I do not want it to have to be alphabetical. You can reset the order of any page by going to your WP-Admin and doing the following:
Manage -> Pages -> Edit (the page you want to change) -> Page Order (change the number)
When you change the Page Order value, you move the page to a different spot in your page list. Say you have 18 pages, and you want your page 2 at the top to be at the bottom, you could change the page order to 19. In any event, you can see the exact page order when you look at the Page management screen.
So, that’s how I want to control those child pages, but this snippet of code will default them to their current order.
I need to add one small change to fix that.
(Edit: Fixed a small error in not putting the sort_column on both lines.)
<?php
if($post->post_parent)
$children = wp_list_pages("sort_column=menu_order&title_li=&child_of=”.$post->post_parent.”&echo=0″); else
$children = wp_list_pages(”sort_column=menu_order&title_li=&child_of=”.$post->ID.”&echo=0″);
if ($children) { ?>
<ul>
<?php echo $children; ?>
</ul>
<?php } ?>
The underlined portion should be added, and now it is controlled by however I order it in the menu.
Hope it helps someone!
~Nicole
Thanks Nicole!
Finally I can ditch the useless plugins and the extra bloaty sidebars I created for parent page templates I made. Thank you for this :o)
I’m glad ya’ll found a use for it
Great piece of code! I am using wordpress for the website for my church. I have implemented the code and it works like a charm. Is there any way to show the child pages (which I titled Additional Links) only on the pages that have child pages?
See what I mean:
http://www.palmvistabaptist.com/blog/ it shows up there, but there are no children pages assigned to that page, but here there is:
http://69.94.26.218/palmvistabaptist.com/blog/?page_id=8
@Larry:
I’m glad you have it working, and there is definitely an easy way you can fix the problem going on.
In the code I posted, you can find these lines here at the bottom:
[some code above that must stay]
<ul>
<?php echo $children; ?>
</ul>
<?php } ?>
You can add to that section of the code there if you like. So, in your case (and I hope you don’t mind me using your code as an example), you could put this instead:
[the code above that must stay]
<li id="Child Links">
<h2>Additional Links</h2>
<ul>
<?php echo $children; ?>
</ul>
</li>
<?php } ?>
That should now only show that section if the check to see if there were child pages proved true, or if it is a child page.
Hope that solves it for you
I have that line in the code already. I guess I don’t understand what should be changed. Here is the code I have, so where should the change be made?
Additional Links
post_parent)
$children = wp_list_pages(”title_li=&child_of=”.$post->post_parent.”&echo=0″); else
$children = wp_list_pages(”title_li=&child_of=”.$post->ID.”&echo=0″);
if ($children) { ?>
@Larry:
The only problem is that the part of your code that creates the ‘additional links’ heading is actually happening before it checks to see if it has child pages or is a child page.
So, full working example for your site would be moving it down to where the section header happens after the check, like this:
<?php
if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>
<li id="Child Links">
<h2>Additional Links</h2>
<ul>
<?php echo $children; ?>
</ul>
</li>
<?php } ?>
Let me know if that works for ya
Awesome, thanks very much for this, its exactly what I was needing as I’m using wordpress to do a ‘feature’ section and this obviously gets updated and has its own sidebar layout and wanted each new feature to just automatically jump in there.
Perfect!
I just cannot get this to work right. I’m working on a site for a community space where our partners who rent office space want to have areas of the website for their use. I experimented with all kinds of plugins and code snippets from the codex, but I must be missing something.
Right now I’m trying to get the area up and running for the Sustainable Health Choices group. That address is here: http://gsohive.org/partners/sustainablehealth. The code snippet above just outputs the child links for the “Partners” page, not the “Sustainable Health Choices” (SHC) page. The map looks like this:
Top
-Partners
–Sustainable Health Choices
—Child Pages
What am I doing wrong or just missing that is outputting the child links of the Partners page on the SHC page INSTEAD of the child pages for the SHC? Thanks in advance for the help!
hi - here’s hoping you can help with this one…i’ve been digging for days and can’t find the answer!
I’m using your snippet of code to show child pages on my site at http://blog.hernandoluxuryhomes.com . If you are on the home page, you can see there are several child pages (Featured Listings, Mission Statement, Etc). On the Featured Listings page, I have it pulling from a different template because i want a loop to show on that page but not on the others…but when i have it working with a different template, it loses it’s parent page and thus loses it’s child menu…. any help??? I’m completely stumped!
Thanks,
Josh