Been developing a solution for a new corporate site in development. Utilizing WordPress as a fully blown CMS, a major priority was developing a dynamic sub navigation solution within the theme. I found loads of sub menu and section navigation plug-ins but there where all a little too complicated.
Additionally I came up against two other issues:
Finding out the depth of the page within the hierarchy of the site.
Control over whether the menu displayed “sibling” links or “children” links.
A lot of the existing tutorials are great, but their implementation is very broad. The “wp_list_pages” function within WordPress is great, very flexible and well documented. Yet swapping between section or child menu based on page depth seemed to be a dead end. Until I read this great tutorial by Jake Goldman talking about a hardly mentioned but great function, called “get_post_ancestors();”. This cool function will create an array of the current posts ancestors. Using this I expanded on Jake Goldman’s great article, adding a little more finite control over the submenu.
Page depth and sibling / child code for WordPress
Heres the PHP code I dropped into the sidebar.php of my WordPress theme. Hopefully should be of use. My example displays the sibling/ section links into the navigation. While displaying the child links for all the pages higher in the hiarachy. Hope this code is usefull.
#Creates Array from the pages ancestors post ID's
$post_ancestors = get_post_ancestors($post);
#Un-comment array for guidence
#print_r($post_ancestors);
#Gets the base post id
$top_page = array_pop($post_ancestors);
#Get post depth
#After a certain depth into the page hierarchy the page displays sibling menu items in sub menu.
if (count($post_ancestors) <= 1) {
#Shallow Link Display Children
$children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0&depth=1');
} elseif (count($post_ancestors) >= 2) {
#Deep Link Display Siblings or Section Links
$children = wp_list_pages('title_li=&child_of='.$post->post_parent.'&echo=0&depth=1');
} elseif (is_page()) {
#Default Display Children
$children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0&depth=1');
}
if ($children) {
#Outputs the submenu if it exists
echo('
Wordress sub-menu navigation
Been developing a solution for a new corporate site in development. Utilizing WordPress as a fully blown CMS, a major priority was developing a dynamic sub navigation solution within the theme. I found loads of sub menu and section navigation plug-ins but there where all a little too complicated.
Additionally I came up against two other issues:
A lot of the existing tutorials are great, but their implementation is very broad. The “wp_list_pages” function within WordPress is great, very flexible and well documented. Yet swapping between section or child menu based on page depth seemed to be a dead end. Until I read this great tutorial by Jake Goldman talking about a hardly mentioned but great function, called “get_post_ancestors();”. This cool function will create an array of the current posts ancestors. Using this I expanded on Jake Goldman’s great article, adding a little more finite control over the submenu.
Page depth and sibling / child code for WordPress
Heres the PHP code I dropped into the sidebar.php of my WordPress theme. Hopefully should be of use. My example displays the sibling/ section links into the navigation. While displaying the child links for all the pages higher in the hiarachy. Hope this code is usefull.
#Creates Array from the pages ancestors post ID's $post_ancestors = get_post_ancestors($post); #Un-comment array for guidence #print_r($post_ancestors); #Gets the base post id $top_page = array_pop($post_ancestors); #Get post depth #After a certain depth into the page hierarchy the page displays sibling menu items in sub menu. if (count($post_ancestors) <= 1) { #Shallow Link Display Children $children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0&depth=1'); } elseif (count($post_ancestors) >= 2) { #Deep Link Display Siblings or Section Links $children = wp_list_pages('title_li=&child_of='.$post->post_parent.'&echo=0&depth=1'); } elseif (is_page()) { #Default Display Children $children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0&depth=1'); } if ($children) { #Outputs the submenu if it exists echo('Sub Menu'); echo($children); echo('
');Example of the hierarchy of the site