WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Sidebar menu with Child Page (SubPage) active (20 posts)

  1. Accordo
    Member
    Posted 3 years ago #

    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

  2. webeingnet
    Member
    Posted 3 years ago #

    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 here

    http://codex.wordpress.org/Function_Reference/get_pages

    and assign your custom css class or ids to html elemets.

    Hope it helps.
    See you.

  3. webeingnet
    Member
    Posted 3 years ago #

    PS: You could try get_permalink($id) to quick retreive permalinks of pages.
    Reference:

    http://codex.wordpress.org/Function_Reference/get_permalink

  4. Accordo
    Member
    Posted 3 years ago #

    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!!

  5. Accordo
    Member
    Posted 3 years ago #

    PS: You could try get_permalink($id) to quick retreive permalinks of pages.
    Reference:

    http://codex.wordpress.org/Function_Reference/get_permalink

    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...

  6. Accordo
    Member
    Posted 3 years ago #

    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...

  7. webeingnet
    Member
    Posted 3 years ago #

    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.

  8. Accordo
    Member
    Posted 3 years ago #

    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!
    Bye

  9. webeingnet
    Member
    Posted 3 years ago #

    Here 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 and current-page-item hierarchy (to higlight parent and child items togheter), but if you start delegate some parts with custom functions in your functions.php you could cover that and let your code more readable.
    See you.

  10. Accordo
    Member
    Posted 3 years ago #

    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?

  11. webeingnet
    Member
    Posted 3 years ago #

    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.

  12. Accordo
    Member
    Posted 3 years ago #

    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>
  13. webeingnet
    Member
    Posted 3 years ago #

    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.
    Bye

  14. Accordo
    Member
    Posted 3 years ago #

    Awesome! Finally all is perfect!
    Many thanks

  15. Linosa
    Member
    Posted 3 years ago #

    Hey,

    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;?>
  16. rhammond
    Member
    Posted 3 years ago #

    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.

  17. rhammond
    Member
    Posted 3 years ago #

    Found my own answer:

    $subpages = get_pages(array("child_of"=>$id,'sort_column' => 'menu_order'));
  18. TheGentAtWPforum
    Member
    Posted 3 years ago #

    Hi there!
    As this thread title says "in sidebar", what exactly is to do? Put those codes above in a page.php?
    And if: I'm using a child theme of the graphene theme, unfortunately it has no page-php. What do about that? I just posted a page.php within the Child folder, would that do the trick?

    If I have done all that, how to put that menu into the sidebar?

    Any help is really appreciated!!

  19. nichart
    Member
    Posted 3 years ago #

    Hi TheGentAtWPforum,

    What I did is place the code in a php code widget from this plugin:
    http://wordpress.org/extend/plugins/php-code-widget/

    Hope it works for you!

  20. ncowen22
    Member
    Posted 3 years ago #

    Hi,
    Can anyone tell me how to change my sidebar from page to page? I have a six page website but I want to use a different sidebar on a couple of the pages. I see the different sidebar options in the widget area, I just don't know how to assign them to particular pages.

    Thank you for any assistance.

Topic Closed

This topic has been closed to new replies.

About this Topic