Hi Experts,
I have a custom built site which utilizes the new Menus feature in WP 3.x
I need assistance in creating a sub navigation.
I need to display the parent page by itself, and then all of the children of that parent right below it. Here is some example code to give you an idea of my desired output.
<h3><a href="#">Parent Page</a></h3>
<ul>
<li><a href="#">Child</a></li>
<li><a href="#">Child</a>
<li><a href="#">Grandchild</a></li>
<li><a href="#">Grandchild</a></li>
</li>
<li><a href="#">Child</a></li>
<li><a href="#">Child</a></li>
</ul>
I greatly appreciate your assistance.
Nilesh shiragave answers:
Hi
do you want to use that? wp 3.0 menu function as you can do it without using it by using wp_list_pages();
<h3><a href="#"><?php echo get_the_title($post->ID)?></a></h3>
<ul>
<?php wp_list_pages('sort_column=menu_order&title_li=&child_of='.$post->ID); ?>
</ul>
in the above code $post->ID is the current page id. you can change that with value if you want to display subpages of a specific page.
And if you want to use wordpress 3.0 feature then let me know.
Nilesh shiragave comments:
And if you still want to use the wp 3.0 nav menu feature.
First login to wp-admin create a new menu add all the pages which you want.
for more details you can check
http://templatic.com/news/wordpress-3-0-menu-management
http://codex.wordpress.org/Function_Reference/wp_nav_menu
then use this code in your template to display the menu
<?php wp_nav_menu( array('menu' => 'Your menu name' )); ?>
just replace "Your menu name" with your menu name.
WP Answers comments:
Hi There.
I am fine with doing it whichever way you think is best.
A few things based on the sample code I sent:
- All links in the sub-nav need to link to the actual page and not link to "#"
- This sub-nav will be hard coded into the page template
- This sub-nav should always look the same on every page within that section. I have modified the names in the sample below to better explain. So for example, if I am on the Leadership page, the h3 item at the top should still be "Company"
<h3><a href="#">Company</a></h3>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Team</a>
<li><a href="#">Board of directors</a></li>
<li><a href="#">Leaderhsip</a></li>
</li>
<li><a href="#">History</a></li>
<li><a href="#">Locations</a></li>
</ul>
Thanks for your help. Please let me know if something doesn't make sense.
Nilesh shiragave comments:
Ok just add this code and replace 10 with page id of the company page.
<h3>Company</h3>
<ul>
<?php wp_list_pages('sort_column=menu_order&title_li=&child_of=10'); ?>
</ul>
All the subpages add to the parent company page will be displayed.
if you dont know what is page id of the company page then you can look at this tutorial to get page id of company.
http://www.techtrot.com/wordpress-page-id/
Nilesh shiragave comments:
<h3><a href="<?php echo get_permalink(10);?>" title="Company">Company</a></h3>
<ul>
<?php wp_list_pages('sort_column=menu_order&title_li=&child_of=10'); ?>
</ul>
Sorry if forgot to add link to the company page in my previous message.
just replace 10 with actual page id of the company page. you have to change that in two places.
WP Answers comments:
Thank you for this code. (and the page id is actually 10) ^_^
The h3 link is working fine, but nothing is being displayed from: <?php wp_list_pages('sort_column=menu_order&title_li=&child_of=10'); ?>
Any ideas why this might be? The navigation is currently in place with the Menus feature. I'm not sure if this has any affect on the code you sent?
Nilesh shiragave comments:
While creating all the subpages do you selected company as the parent page from the dropdown..
does the website is live.. if yes then send me link..
you can contact me at [email protected]
Peter Bouwmeester answers:
Hi,
If your theme indeed supports WP3 menu feature, you should have a admin menu option Appearance | Menus.
Either change any of the existing menus or add a new one.
Use widgets to show secondary navigation.
Be sure to be logged in as administrator otherwise you wont see these options..!
Good luck,
Peter
Denzel Chia answers:
Hi,
Put the following function in your theme's functions.php
function wpe_highest_ancestor(){
global $post;
$ancestors = array($post->ancestors);
$page_ancestors = end( $ancestors );
if ( !empty($page_ancestors) ) {
$child_of = $page_ancestors;
} else {
$child_of = $post->ID;
}
return $child_of;
}
Then in your sidebar add this
<?php
$child_of = wpe_highest_ancestor();
wp_list_pages('child_of='.$child_of.'&title_li=<h5>'.esc_attr(get_the_title($child_of)).'</h5>');
?>
Check for syntax error, the code after $title_li=.... are in continuous one line.
It is being returned to new line here because the webpage is not wide enough.
Hope it helps!
Thanks
Baki Goxhaj answers:
The 3.x custom menu does not order the pages hierarchically automatically by default. In stead, you need to add the page items to the menu you are using and drag & drop them like subpages. This is easy, just drag them a little right side and they will register as subitems - you will notice this by their position.
If you want that the hierarchy is recognized automatically, you need to use wp_list_pages.