I am currently working on a nav menu for a wordpress theme using wp_nav_menu.
I have a few questions as I am now STUCK!
This is how I create my menu:
wp_nav_menu(array(
'sort_column' => 'menu_order',
'menu_class' => 'nav',
'theme_location' => 'primary-menu'
));
which outputs:
<div class="nav">
<ul>
<li class="page_item page-item-5">Home</li>
<li class="page_item page-item-7 current_page_item">Why Renewal
<ul class='children'>
<li class="page_item page-item-14">Fibrex
<ul class='children'>
<li class="page_item page-item-22">What is fibrex</li>
<li class="page_item page-item-24">History of firex</li>
</ul>
</li>
<li class="page_item page-item-16">What to look for</li>
<li class="page_item page-item-18">Renewal Warranty</li>
<li class="page_item page-item-20">Green Seal Cert</li>
</ul>
</li>
<li class="page_item page-item-9">About</li>
<li class="page_item page-item-11">Windows</li>
<li class="page_item page-item-13">Doors</li>
</ul>
</div>
So what I am trying to figure out is how can I change the ul 'children' to say 'grandchildren' if the page is a child of a child?
The idea is that their is 3 tiers and when why is clicked the sub menu appears below and when one of the kids is clicked if it has kids then its kids appear below that.
I have tried many work arounds using get_children and get_pages, returning an object and pulling out some of the objects but that takes too long to load and is not practical.
My next question is I have tried to format the output of the wp_nav_menu us item_wrap but I still cannot get it to work.
What I am trying to achieve is to take this http://renewmywindows.com navigation and get it going in wordpress - the jQuery stuff.
I have read through many different boards and posts to try and find an answer but am still stumped.
Thanks,
C
Related
How to convert static HTML5 navigation menu to WordPress dynamic menu.
I want to output this HTML menu in WordPress.and I don't know how to make ul and li in this form.
Thanks for your help.
This is my HTML5 navigation menu
<ul class="nav topnav">
<li class="dropdown active">
<i class="icon-home"></i> Home <i class="icon-angle-down"></i>
<ul class="dropdown-menu">
<li>Homepage 2</li>
<li>Homepage 3</li>
<li>Parallax slider</li>
<li>Landing page</li>
</ul>
</li>
<li class="dropdown">
Features <i class="icon-angle-down"></i>
<ul class="dropdown-menu">
<li>Typography</li>
<li>Components</li>
<li>Icons</li>
<li>Icon variations</li>
<li class="dropdown">3rd menus<i class="icon-angle-right"></i>
<ul class="dropdown-menu sub-menu-level1">
<li>Sub menu</li>
<li>Sub menu</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
Pages <i class="icon-angle-down"></i>
<ul class="dropdown-menu">
<li>About us</li>
<li>FAQ</li>
<li>Team</li>
<li>Services</li>
<li>Pricing boxes</li>
<li>404</li>
</ul>
</li>
<li class="dropdown">
Portfolio <i class="icon-angle-down"></i>
<ul class="dropdown-menu">
<li>Portfolio 2 columns</li>
<li>Portfolio 3 columns</li>
<li>Portfolio 4 columns</li>
<li>Portfolio detail</li>
</ul>
</li>
<li class="dropdown">
Blog <i class="icon-angle-down"></i>
<ul class="dropdown-menu">
<li>Blog left sidebar</li>
<li>Blog right sidebar</li>
<li>Blog fullwidth</li>
<li>Post left sidebar</li>
<li>Post right sidebar</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
I want to convert it to WordPress menu with
wp_nav_menu()
How can I make this custom menu?
I don't want to use any plugins to make custom menu.
First, you need to register nav menu in functions.php like this:
function register_menu(){
register_nav_menu('main-menu', 'Main menu');
}
add_action('init', 'register_menu');
When you do this, new option will appear in your admin panel. Go to Appearance > Menus and start adding links, pages or whatever you want to be in your menu. You can specify depth as well. Once you are done with your menu, select location of the menu, which will in this case be your newly created 'Main menu'. Now you want to go back to your page template in code editor to display that menu. It is very hard to use wp_nav_menu() function to display such complex menu so we will use different approach. We will grab menu items for start:
$menuLocation = get_nav_menu_locations();
$mainMenuID = $menuLocation['main-menu'];
$topMenuItems = wp_get_nav_menu_items($mainMenuID);
Now goes the main part. We are looping through menu items and displaying it's data in combination with custom html elements:
<?php
$menuLocation = get_nav_menu_locations();
$mainMenuID = $menuLocation['main-menu'];
$topMenuItems = wp_get_nav_menu_items($mainMenuID);
// check if menu has items
if(!empty($topMenuItems)){
?>
<ul>
<?php
foreach ($topMenuItems as $topMenuItem){
//Check if menu_item_parent property is set to 0.
That means that menu item is top level item.
if($topMenuItem->menu_item_parent == 0){
$topItemID = $topMenuItem->ID;
$submenuItems = array();
//check if there are submenu items for current top menu
item.
foreach ($topMenuItems as $submenuItem){
if($submenuItem->menu_item_parent == $topItemID){
$submenuItems[] = $submenuItem;
}
}
?>
<li>
<?php echo $topMenuItem->title ?>
<?php
// If there are submenu items for current item, display
them.
if(!empty($submenuItems)){
?>
<ul class="submenu">
<?php
foreach ($submenuItems as $subitem){
?>
<li>
<?php echo $subitem->title ?>
</li>
<?php
}
?>
</ul>
<?php
}
?>
</li>
<?php
}
}
?>
</ul>
<?php
}
?>
// Using this logic, you can go in depth how much you want to.
I'm a newbie to WordPress core and development process. As I have a little knowledge of WordPress functions. But I need the help from you guys.
Actually, i'm developing my first theme and i already have the CSS for my menu. The menu has been registered in functions.php.
I've used the code posted below to add my class "mainnav-section".
<?php
$args = [
'theme_location' => 'header-menu',
'container' => 'ul',
'container_class'=> '',
'menu_class' => 'mainnav-section'
];
wp_nav_menu($args);
?>
And it executed this.
<ul id="menu-header" class="mainnav-section">
<li id="menu-item-511" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-511">
Latest
<ul class="sub-menu">
<li id="menu-item-512" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-512">
HardFork
</li>
</ul>
</li>
<li id="menu-item-513" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-513">
Innovations
</li>
</ul>
All I want to to do is to add my CSS class to main-menu items, sub-menu and list items. Because I have the CSS and JS completed to get the desired menu.
I am calling a wordpress menu inside my header of wordpress site. I am using the following code:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => false, 'items_wrap' => '<ul>%3$s</ul>' ) ); ?>
It return me exactly what I need but it puts different classes on <ul> and <li> within the menu. What I need is exactly as follows:
<ul>
<li class="active">Home
<ul>
<li>Libero</li>
<li>Maecenas</li>
<li>Mauris</li>
<li class="last">Suspendisse</li>
</ul>
</li>
<li>Style Demo
<ul>
<li>Lorem ipsum dolor</li>
<li>Suspendisse in neque</li>
<li class="last">Praesent et eros</li>
</ul>
</li>
<li>Our Services</li>
<li class="last">Long Link Text</li>
</ul>
No classes on any <ul> or <li> but "active" class on the current menu item. Any help would be much much appreciated.
Thank you for reading... I have a 2 layer of navigation. which sort the content by good, bad and comment count. if user clicks on good it will bring another nav which is sort the content by time. such as today, last one week, last one month.
I can add class='active' using $_SERVER['PHP_SELF'] but twitter bootsrap dropdown menu does not have simple class='active' it is complicated. I am not able to come up with a solution. should I use for? foreach? I don't know. please see the html command in the code. this is my code.
<ul class="nav nav-tabs">
<li <?php if (basename($_SERVER['PHP_SELF']) == '/?Top'): ?> class="active"<?php endif; ?>>Top Content</li>
<li <?php if (basename($_SERVER['PHP_SELF']) == '/?Bad'): ?> class="active"<?php endif; ?>>Bad Content</li>
<li <?php if (basename($_SERVER['PHP_SELF']) == '/?Comments'): ?> class="active"<?php endif; ?>>Most Commented</li>
<!-- It's confusing me when It comes here... because as you see active option is not li tag. it's bunch of html code and also any url bellow can ben any of those up -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-time"></i> Today <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="URL=week" />Last 1 Week</a></li>
<li><a href="URL=month" />Last 1 Month </a></li>
<li><a href="URL=all" />All</a></li>
</ul>
</li>
</ul>
html commend: It's confusing me when It comes here... because as you see active li is not li it's bunch of html code and also also any url below can be any of those up
You can use the "active" class for the outter li (the one has class "dropdown") and another "active" class in your child dropdown.
This is an example
<ul class="nav nav-tabs">
<li class="">Home</li>
<li>Help</li>
<li class="dropdown active">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li class="active">Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
A live demo in JSBin
I would like to list my site's (built in php and wordpress) pages in the footer in such a away that all of the top level pages are listed vertically with no bullet, and those top level pages that have child pages are listed when the top-level page is clicked on. The child pages hide when it's parent page is clicked on again. I'd like it all to be in plain text with no graphics.
So essentially it'd be like this:
Home
About The Motel V
Meet The Owners | Rooms | Facilities | Galleries | Guest's Feedback
City and Country > (if clicked, it would show 'Things To Do And See | Event Calendar')
Bookings
Contact
Blog
EDIT
I see what you're suggesting, but the list is generated by wordpress by adding the "pages list" to the footer widget area, so I can't add a unique id...
This is what is in the source when the page is finished loading.
<div class="widget widget_pages" id="pages-2">
<h4 class="widgettitle">Pages</h4>
<ul>
<li class="page_item page-item-14 current_page_ancestor current_page_parent">About the Motel
<ul class="children">
<li class="page_item page-item-295">Meet The Owners</li>
<li class="page_item page-item-17">Rooms</li>
<li class="page_item page-item-19 current_page_item">Facilities</li>
<li class="page_item page-item-21">Galleries</li>
<li class="page_item page-item-2">Visitor Feedback</li>
</ul>
</li>
<li class="page_item page-item-10">City and Country
<ul class="children">
<li class="page_item page-item-292">Things To Do And See</li>
<li class="page_item page-item-4">Events Calendar</li>
<li class="page_item page-item-53">Local Links</li>
</ul>
</li>
<li class="page_item page-item-5">Bookings</li>
<li class="page_item page-item-50">Contact</li>
<li class="page_item page-item-47">Blog</li>
</ul>
</div>
You can do it with jquery. Instead of using the "onclick" property of an anchor try putting a unique id and use it for your jquery click event
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(function(){
$(".page-item-10").click(function(){
$(this+" ul").fadeToggle("slow");
});
$(".page-item-14").click(function(){
$(this+" ul").fadeToggle("slow");
});
});
</script>
You dont need to worry about multiple submenus since the main menus have unique class properties