Creating sidebar navigation using wp_list_pages

Aw, come on Guido, it’s not that bad ??

Though there’s currently a syntax error, some <?php ?> tags are either missing or there’s too many. I say there’s too many. No need for a set on every line. I’d remove them all except for the first <?php on the page. Only close it out with ?> if there’s a sizable block of HTML to output. Otherwise echo out all content.

That’s my style. Some prefer to avoid echoes any time they can.

How to output mixed content on a single line is also a stylistic choice. Concatenating everything like you’ve done is pretty common and just fine. Apparently echoing a comma delimited list is faster than concatenating. For example:

echo '<div class="sidebar-nav"><ul>', $current, $children, '</ul></div>';
//need an extra line to keep the above on one line

Because it will likely confuse some people, I’m not sure I like this idea. I’m actually even confused by concatenation, especially when there’s a lot of quotes. I prefer this style:

echo "<div class='sidebar-nav'><ul>{$current}{$children}</ul></div>";
//need an extra line to keep the above on one line

If you don’t like single quotes in HTML you can use escaped double quotes:
echo "<div class=\"sidebar-nav\">";

The {curly braces} are probably not required in the example before last, but I think they help readability. You generally only need them in complex variable constructs like {$query->my_var[3]} or ambiguous situations like "$count {$post_type}s updated"

I like to use trailing commas in arrays so modifying them later is easier and less error prone. Totally optional of course. And only do this with arrays, doing so with function parameters would cause a syntax error.

array(
  'depth' => 1,
  'echo' => 0, 
);

• This reply was modified 7 years, 9 months ago by bcworkz.

Hi BC,

Yes, I forgot an opening php tag before $current and a closing php tag after $siblings. You’re right, using those tags can be minimized.

I don’t have a problem with my HTML part (it’s clear and simple). But I don’t like:

• Using wp_list_pages several times to create 1 list
• Hiding current page via CSS to make page ordering look good

Any thoughts about this?

Guido

Hi again,

Maybe it’s a better idea to create a page list using wp_nav_menu and exclude certain pages based on the current page. And for example using this method. And, now all pages are listed in correct (menu)order as well which is not the case using wp_list_pages.

Guido

OK, now I see what you’re after. I don’t know about relying on the menu. What if the user defines a different menu unrelated to pages?

You should be able to consolidate the list pages call by using the “depth” argument to get current level and immediate children to any depth all at once. I’m not sure how that works with “child_of”, but shouldn’t be hard to figure out.

To achieve a hierarchical list you’d need to define a walker class to sort through the list. The code reference also has some interesting examples down in the notes that could inspire some other ideas.

I’m not keen about hiding the current page either, but I don’t have a problem with it being in the list, though it ought to be styled differently to indicate it’s the current page.

Hi BC,

Using wp_nav_menu isn’t the right choice here..
So I have worked on my previous code snippet again and using “sort_column” (to order pages) and “exclude” (not include current page in siblings list) it looks much better..

<?php
$current = '<li class="current"><a href="'.get_permalink( $post->ID).'">'.get_the_title( $post->ID).'</a></li>';
$children = wp_list_pages( array( 
	'title_li' => 0, 
	'child_of' => $post->ID, 
	'depth' => 1,
	'sort_column'=>'menu_order',
	'echo' => 0 
) ); 
$siblings = wp_list_pages( array( 
	'title_li' => 0, 
	'child_of' => $post->post_parent, 
	'depth' => 1,
	'sort_column'=>'menu_order',
	'exclude' => $post->ID,
	'echo' => 0 
) ); 
?>
<?php if ( $post->post_parent ) { ?>
	<?php echo '<div class="sidebar-nav"><ul>'.$current.$children.$siblings.'</ul></div>'; ?>
<?php } else { ?>
	<?php echo '<div class="sidebar-nav"><ul>'.$current.$children.'</ul></div>'; ?>
<?php } ?>

Yes, still have to clean up all those open/close php tags.. ??

Guido

Hi again,

Found a way to display whole tree on both parent page and it’s children:

<?php if ( is_singular('page') ) {
	while ($post->post_parent != 0) {
		$post = get_post($post->post_parent);
	}
	$title = $post->post_title;
	$output = wp_list_pages(array( 
		'title_li' => '',
		'child_of' => $post->ID,
		'sort_column' => 'menu_order, post_title',
		'echo' => 0
	));
	if (!empty($output)) {
		echo '<div class="sidebar-nav"><ul>'.$output.'</ul></div>';		
	} 
} ?>

And in dashboard you can order your (sub)pages via quick edit… NICE!

Guido

Ah! Nicely done. Thanks for sharing ??