Sidebar menu with Child Page (SubPage) active
-
Hello world, I have read all about list_pages codex for SubPages at http://codex.wordpress.org/Function_Reference/wp_list_pages#List_Sub-Pages but I don’t find a solution to my problem because all these options display only the list of subpages when we are on the parent page.
I need a different structure like another user asked yet on this forum in a different topic ( http://wordpress.org/support/topic/sidebar-menu-show-only-parent-pages-and-children-of-current-parent?replies=2 ) .
I need this structure with the list of all pages, the “mother page” that when is clicked shows her subpages like this site: http://www.nbr.eu/de/Lieferprogramm/Uebersicht (it isn’t a wp site).
All the function in wordpress codex about list_pages shows the list of subpages only when we are in parent page and not showing the other pages of the menu…
I hope to be clear…Please help me, if there is some hack! Is very important!
Thank you
-
Hi Accordo,
I’d try something like this<?php $pages = get_pages( array( 'sort_order' => 'ASC', 'sort_column' => 'post_title', 'parent' => 0 ) ); ?> <ul> <?php foreach ($pages as $page):?> <li> <?php echo $page->post_title ?> <?php //var_dump($post); $subpages = get_pages(array("child_of"=>$post->ID)); #var_dump($subpages); if ( ($subpages != null) && ($page->ID == $post->ID) ): ?> <ul> <?php foreach($subpages as $subpage): ?> <li> <?php echo $subpage->post_title; ?> </li> <?php endforeach; ?> </ul> <?php endif; ?> </li> <?php endforeach;?> </ul>
I used the get_pages() API and “walk” inside pages structure: if subpages was found I retreive subpages in the same manner, then print only those ones.
In this example I print only titles but you can easily extend this, adding links structure or some other stuff.
You can customize the array of args passed looking herehttp://codex.wordpress.org/Function_Reference/get_pages
and assign your custom css class or ids to html elemets.
Hope it helps.
See you.PS: You could try
get_permalink($id)
to quick retreive permalinks of pages.
Reference:Many thanks webeingnet, I have just tried your code and the pages are printed well.
I noticed some things:
– when visiting a child page, I see only the main parent page and I need to display also the other child pages;– I need a different class for the selected top level page and for the selected child page so I can style it with css.
One more thing, I very appreciate, if is simple for you to explain to me how to add links to the respective pages.
Many thanks!!
PS: You could try get_permalink($id) to quick retreive permalinks of pages.
Reference:Thanks,
I have tryed with this:<a href="<?php get_permalink(); ?> "><?php echo $page-> post_title ?></a>
but he apply the same visited page link to all pages of the list…
If can help you this is quite perfect for me:
<?php $output = wp_list_pages('echo=0&depth=1&title_li=<h2>Top Level Pages </h2>' ); if (is_page( )) { $page = $post->ID; if ($post->post_parent) { $page = $post->post_parent; } $children=wp_list_pages( 'echo=0&child_of=' . $page . '&title_li=' ); if ($children) { $output = wp_list_pages ('echo=0&child_of=' . $page . '&title_li=<h2>Child Pages</h2>'); } } echo $output; ?>
I’ve taken it here: http://codex.wordpress.org/Function_Reference/wp_list_pages#List_Pages_by_Page_Order (List subpages even if on a subpage)
This display all the pages structure links correctly but the problem is that when you visit the parent or a child of parent he display only the child and not all the pages structure…
OK Accordo, I misunderstood some things… π
Here’s a new version (it could be correct now):<?php $pages = get_pages( array( 'sort_order' => 'ASC', 'sort_column' => 'post_title', 'parent' => 0 ) ); ?> <?php if ($post->post_parent) //I am a subpage $id = $post->post_parent; else //I am a page $id = $post->ID; $subpages = get_pages(array("child_of"=>$id)); ?> <ul> <?php foreach ($pages as $page):?> <li> <a href="<?php echo get_permalink($page->ID); ?> "><?php echo $page->post_title ?></a> <?php if ( ($page->ID == $post->ID) || ($post->post_parent == $page->ID) ): ?> <ul> <?php foreach($subpages as $subpage): ?> <li> <a href="<?php echo get_permalink($subpage->ID); ?> "><?php echo $subpage->post_title ?></a> </li> <?php endforeach; ?> </ul> <?php endif; ?> </li> <?php endforeach;?> </ul>
You could see the right use of
get_permalink()
API (you’ve missed the ID of post and the echo to print it out π )
Check if it works.
Bye.Wow! Great work webeingnet! All perfect, you have been very helpful. So I can understand also the usage of the various functions.
Only one more thing (!!): is possible to add a specific class to the main parent page link when is selected (current-page-item) and also to the child page if is selected (child-current-item)?
Many many thanks!
ByeHere we are!
Replace the first
<li>
with
<li <?php if ($page->ID == $post->ID) echo 'class="current-page-item"'?>>
and the one inside the second loop
<?php foreach($subpages as $subpage): ?> <!-- this one above --> <li>
with
<li <?php if ($subpage->ID == $post->ID) echo 'class="current-page-item"'?>>
This solution doesn’t cover
current-page-ancestor
andcurrent-page-item
hierarchy (to higlight parent and child items togheter), but if you start delegate some parts with custom functions in yourfunctions.php
you could cover that and let your code more readable.
See you.Sorry but I need all links highlighted when I’m inside it.
For example if I’m visiting a SubPage of a Parent page I need the SubPage and the Parent page link both highlighed…
I don’t know how to fix this problem, is possible by functions.php?
A simple way is like this
<li><?php if ( ($page->ID == $post->ID) || ($post->post_parent == $page->ID) ) echo 'class="current-page-item"'?></li>
for the first
<li>
, I simply add a check for post parent, when it’s found.
With this you can’t choose a different style for “father” and “son” items,
they will be highlighted with “current-page-item” class, both.
It could be ok?Different ways are possible if you write a function that discover if you are in a page or in a subpage. I advice you to do that just to keep your code clean, it’s not mandatory.
Try this, then let me know.
For me the better solutions is to have an html like this:
<li><a href="link1">Link1</a></li> <li class="current-page-item"><a href="link2">Link2</a> <ul> <li class="current-submenu-item"><a href="submenulink">Submenulink</a> <li><a href="submenulink">Submenulink</a> <li><a href="submenulink">Submenulink</a> </ul></li> <li><a href="link3">Link3</a></li> <li><a href="link4">Link4</a></li> </ul>
OK, try this, simply replace the second
<li <?php if ($subpage->ID == $post->ID) echo 'class="current-page-item"'?>>
with
<li <?php if ($subpage->ID == $post->ID) echo 'class="current-subpage-item"'?>>
Now you have the same structure, but I don’t test it so much, so let me know if it’s ok.
ByeAwesome! Finally all is perfect!
Many thanksHey,
I’ve used this at my website too, and it works perfect… except for two things.
1. I would like the second level (sub-menu) to sort by ID and not alphabetically.
2. The third level on the menu is now included in the second level. I don’t want the third to be displayed at all.Any ideas? Here’s my code.
<?php $pages = get_pages( array( 'sort_order' => 'ASC', 'sort_column' => 'menu_order', 'parent' => 0 ) ); ?> <?php if ($post->post_parent) //I am a subpage $id = $post->post_parent; else //I am a page $id = $post->ID; $subpages = get_pages(array("child_of"=>$id)); ?> <ul id="navcatlist"> <?php foreach ($pages as $page):?> <li <?php if ( ($page->ID == $post->ID) || ($post->post_parent == $page->ID) ) echo 'class="current-page-item"'?>> <a href="<?php echo get_permalink($page->ID); ?>"><?php echo $page->post_title ?></a> <?php if ( ($page->ID == $post->ID) || ($post->post_parent == $page->ID) ): ?> <ul> <?php foreach($subpages as $subpage): ?> <li <?php if ($subpage->ID == $post->ID) echo 'class="current-subpage-item"'?>> <a href="<?php echo get_permalink($subpage->ID); ?>"><?php echo $subpage->post_title ?></a> </li> <?php endforeach; ?> </ul> <?php endif; ?> </li> <?php endforeach;?>
Hi Linosa (and others),
I’m wondering if you found a way to sort the sub pages, other than alphabetically? I’m looking to sort by menu_order.
Many thanks in advance.
- The topic ‘Sidebar menu with Child Page (SubPage) active’ is closed to new replies.