How to create a dynamic list of page title links when you are on a page that has sub pages, ie: If using a gallery for a page, were each sub-page is a gallery of images
When you have multiple pages in your wordpress website, either using it as a blog or as a complete CMS, this quick tip will help show you how to:
Only show those child pages of the parent page,
Only when you are on that Parent page!
Below is the HTML framework for our sidebar navigation…
- Gallery
- page 1
- page 2
- page 3
- page 4
- page 5
<ul>
<li>Gallery
<ul>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
<li>page 4</li>
<li>page 5</li>
</ul>
</li>
</ul>
When on the “PARENT” page,
The code in the sidebar, navigation menu or page,
will be populated with a list of Child Sub pages for THAT current PARENT page only…
Copy the code below into your sidebar, and try it…
<?php if ( is_page() ) {
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) {
?>
<div class="sidebar">
<h2>Sub-pages of Current Page</h2>
<ul>
<?php echo $children; ?>
</ul>
</div>
<?php
} // End If Post
} // End if is page
?>
As long as your Page has at least one associated child page, the list will be shown, if there are no child pages then the menu will not be shown.. this is handy if you’re sidebar is quite packed with elements/ads, this will be generated only on that parent page…
you can check out the example on the Shugtech Gallery website.
Each Gallery Album is a child of Gallery, so each image gallery is a separate wp page were the list of other Albums available is on the right hand sidebar…
As always feedback is welcome..
Tags: parent page, post->post_parent, sub page, wordpress, wp_list_pages()
site only begining!!!! Thansk for the code, it great, no plugin needed!!! how do you get the name of the parent page to show as well? thanks owen
This does not work for me. It shows ALL pages on the site with sub pages indented as planned, but I need a menu that shows only CURRENT parent page and sub pages. Do you know if anything changed for 2.9.2?
Thanks,
Bob
I know this is an old post, but I was looking for something similar to this in WP3.0 and came acrose Sub Pages widget. Works Great!
@bob
I had the same problem. I hacked a bit of a rough solution by deleting a line of code and creating a slightly different template page so only the Parent and Sub pages are shown (especially in child pages of child pages). Just delete line 2,3,&4 in the code you add to your new template. Hope that helps.
Great helpful code by the way 5*
ID.'&echo=0');
if ($children) {
?>
Sub-pages of Current Page
^oops, I seem to have broken it (not the first time)
Anyway, just delete line 2,3 and 4 and add the code where required :)
“It shows ALL pages on the site with sub pages indented as planned, but I need a menu that shows only CURRENT parent page and sub pages. Do you know if anything changed for 2.9.”
You can see more about that?
Hey Marty, how can this work for Categories? Can the code be made to include options for Pages and Categories?
Hi azukah, im not sure what you mean by categories, do you want to list categories based on what page you are on? or listing subcategories of a category which belongs to a certain page/post?
That’s right marty, listing subcategories of a category which belongs to a certain page/post?
That’s right marty, listing subcategories of a category which belongs to a page/post being viewed.
Hi Azukah if you want to show the sub categories on a certain page called ‘News Reel’ and you had your categories set up like..
News (top level category)
–Feature (sub cat)
–Fiction (sub cat)
–Fact (sub cat)
All you do is: check to see if you are on that page/post, check to see if that post or page has the category of the top level category ie: news id=1,
if ( is_page('news-reel') && in_category('news') ){ echo "<ul>"; wp_list_categories('orderby=id&child_of=1&title_li='); echo "</ul>"; }All that dose is print out the categories who are a child of ID 1, which in our case is News.. and print out like:
That something that could help?
Oh my!!! Is there a way to have the code you listed in the article to check if its a page or a post, and then list children of that page or category?
For instance, a page called Africa may have the following as children: Algeria, Cameroon, Nigeria, South Africa. And a post (Baseball) is a child of Sports, where Baseball, Gymnastics, Soccer are children of that category.
Now, on the sidebar, when the post Baseball is being viewed, the sidebar lists Baseball, Gymnastics, Soccer. And when the page, Algeria is being viewed, the sidebar lists Algeria, Cameroon, Nigeria, South Africa.
That’s what am trying to achieve.
Hi Azukah.
trying something along these lines..
<?php if( is_single() ) { $this_category = get_the_category($cat); $parent_category = get_the_category($this_category->category_parent); $getParentCatId = $parent_category->cat_ID; wp_list_categories('depth=2orderby=id&title_li=<h2>More Categories</h2>&child_of='.$getParentCatId); } if( is_page() ) { $category = get_the_category(); $catname = $category[0]->cat_name; $category_id = get_cat_ID($catname); if($post->post_parent) $children = wp_list_pages('sort_column=menu_order&title_li=<h2>Sub Pages</h2>&child_of='.$post->post_parent.'&echo=0'); else $children = wp_list_pages('sort_column=menu_order&title_li=<h2>Sub Pages</h2>&child_of='.$post->ID.'&echo=0'); if ($children) { echo "<ul>"; echo $children; echo "</ul>"; } } ?>So if you are on a page, (Africa) it will display :
Sub Pages
o Algeria
o Cameroon
o Nigeria
o South Africa
If you are on a single post page, were the current category is Baseball
More Categories
-Sports
o Baseball
o Gymnastics
o Soccer
hopefully you can make use of this… good luck :)
Great. Its works just fine. You’re the best, Marty.
One more thing, how do I remove the header that says “More Categories” and “Sub-Pages”? Also, I noticed the sidebar displays all the categories regardless of their parent. How can we have just the children of that parent displayed instead of the whole family tree? Lol
good stuff.. :)
well to remove the More Categories and Sub Pages title..
just remove the call to them in the
wp_list_categories('depth=2orderby=id&title_li=<h2>More Categories</h2>&child_of='.$getParentCatId);so it reads just..
wp_list_categories('depth=2orderby=id&title_li=&child_of='.$getParentCatId);As for the rest, do you have a link to your test site?
ill edit the comment to remove it, if you dont want it published?
Its an e-comm site xxx and Yes, please remove the link. I won’t be using paypal or any e-payment.
– comment edited
I already tried to remove the titles. Didn’t have much success.
hi Azukah, appologies, i edited the comment and lost your link :|
to take the titles off just remove the bit in the code were it says title_li=
and leave that value blank, so just remove
also if you want to email a copy of your sidebar.php file I can edit the changes :)
marty@martin-gardner.co.uk
Great post Marty.
I successfully integrated the most recent code from the comments and it works like a charm, slight issue though. When I click on a child, which are page posts essentially, it shows the list of child pages towards the bottom of the page.
Is there any way for it to show only page itself.
ie. Go to my footer, click Journal and that takes you to the parent page called Journal Essays, then you’ll see the children below as your code describes. Then click on any of those child pages and you’ll enter those pages with all their corresponding information but towards the end it shows all the child pages of the Parent page.
My goal would be for the child pages not to have those entries in the bottom, so the reader essentially has to click Journal in the footer to enter the parent page.
Looking forward to your response. thanks,
regards,
JL
thanks for posting this. looking for this all day :D
hi Pete,
i would really need to see your site, but normally, this code would be placed in your header.php file, just were you want it placed?
Hi Martin, I tried in the header file initially but didn’t seem to work. I’m using quite a complicated theme which would be why it won’t work. I’ll email you the site details throgh the contact form if that’s ok?
I got the same problem as Bob and it was cause its in the sidebar…
This solution works for me:
post->post_parent) {
$children = wp_list_pages(‘sort_column=menu_order&title_li=&child_of=’.$wp_query->post->post_parent.’&echo=1′);
}
else {
$children = wp_list_pages(‘sort_column=menu_order&title_li=&child_of=’.$wp_query->post->ID.’&echo=1′);
}
/*
$page_id = $wp_query->post->ID;
$children = wp_list_pages(‘sort_column=menu_order&title_li=&child_of=’.$page_id.’&echo=0′);
*/
if ($children) {
?>
ups corrected code:
if ( is_page() ) {
global $wp_query;
if($wp_query->post->post_parent) {
$children = wp_list_pages(‘sort_column=menu_order&title_li=&child_of=’.$wp_query->post->post_parent.’&echo=1′);
}
else {
$children = wp_list_pages(‘sort_column=menu_order&title_li=&child_of=’.$wp_query->post->ID.’&echo=1′);
}
if ($children) {
?>
<?php
} // End If Post
} // End if is page
You can also use the Hierarchical Pages widget which lets you list only children of the current page… and optionally all the top-level pages, plus a variety of other options. It also includes a Hierarchical Taxonomy widget that works for built-in Categories and user-defined taxonomies.