WordPress.org

Support

Support » Plugins and Hacks » Hacks » [Resolved] Sidebar menu with Child Page (SubPage) active

[Resolved] Sidebar menu with Child Page (SubPage) active

Viewing 15 replies - 1 through 15 (of 19 total)
  • 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.

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

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

    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:

    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…

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

    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.

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

    Awesome! Finally all is perfect!
    Many thanks

    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;?>

    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.

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘[Resolved] Sidebar menu with Child Page (SubPage) active’ is closed to new replies.