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.
Related
This is what I am trying to achieve with a custom walker:
I am trying to get the following layout:
<nav id="nav-primary" class="mobile-menu">
<div id="menu-test-menu" class="menu genesis-nav-menu menu-primary js-superfish">
<div id="menu-item-25937"
class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-25937"> //this is the first tier
Products
</div>
<div class="sub-menu"> // this is the second tier
<div id="menu-item-25932"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25932">phone system overview</div>
<div id="menu-item-25931"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25931">phone system features</div>
<div id="menu-item-26230"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-25 current_page_item current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-26230">
dedivvery options
</div>
<div class="sub-menu"> // this is the third tier
<div id="menu-item-26234"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-25 current_page_item menu-item-26234">
CLOUD PHONE SYSTEM
</div>
<div id="menu-item-26235"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-25 current_page_item menu-item-26235">
MANAGED SIP TRUNKING
</div>
</div>
</div>
</nav>
PHP
function register_additional_menu() {
register_nav_menu( 'third-menu' ,__( 'Third Navigation Menu' ));
}
add_action( 'init', 'register_additional_menu' );
add_action( 'genesis_header', 'add_third_nav_genesis' );
function add_third_nav_genesis() {
wp_nav_menu( array(
'theme_location' => 'third-menu',
'menu' => '',
'container' => 'nav',
'container_id' => 'nav-primary',
'container_class' => 'mobile-menu',
'items_wrap' => '<div id="menu-test-menu" class="menu genesis-nav-menu menu-primary js-superfish">%3$s</div>',
'item_spacing' => 'discard',
'depth' => 3,
'walker' => new My_Custom_Nav_Walker
) );
}
I am basically trying to have a three tier menu like
menu item >> sub menu item >> sub sub menu item
sub menu item sub sub menu item
sub menu item sub sub menu item
And I need to have the third sub menu be aligned side by side with the first sub menu
Any help with this would be greatly appreciated.
I have a wordpress website. I use archive-meetings.php to display all the meetings (meetings is a CPT). When I am on this page, I have an active class in the menu for "meetings". But, when I click on one meeting the single-meeting.php display the content but the active class desappear. How can I keep the active class ?
This is my code in header.php :
wp_nav_menu(
array(
'theme_location' => 'main-menu',
'container' => '',
'menu_class' => 'navbar-nav me-auto my-5',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
)
);
I read that By default, WordPress applies ancestor classes to the parents of active items. But not in my case.
The code when I am on archive page :
<ul id="menu-menu-principal" class="navbar-nav me-auto my-5">
<li id="menu-item-122" class="menu-item menu-item-type-custom menu-item-object-custom nav-item menu-item-122"><a title="Events" href="/events" class="nav-link">Events</a></li>
<li id="menu-item-123" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item nav-item menu-item-123"><a aria-current="page" title="Meetings" href="/meetings" class="nav-link active">Meetings</a></li>
</ul>
When I am on single meeting :
<ul id="menu-menu-principal" class="navbar-nav me-auto my-5">
<li id="menu-item-122" class="menu-item menu-item-type-custom menu-item-object-custom nav-item menu-item-122"><a title="Events" href="/events" class="nav-link">Events</a></li>
<li id="menu-item-123" class="menu-item menu-item-type-custom menu-item-object-custom nav-item menu-item-123"><a aria-current="page" title="Meetings" href="/meetings" class="nav-link active">Meetings</a></li>
</ul>
Thanks for help
I am trying to create a custom markup for my WordPress menu, when I add a menu in WordPress, the HTML that shows is as follows:
<div class="menu-menu-container">
<ul id="menu-menu" class="menu">
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-13">
Home
</li>
<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14">
Another Sample
</li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-15">
Sample Page
<ul class="sub-menu">
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-22">
Hello world!
</li>
</ul>
</li>
</ul>
</div>
I'm trying to change the code so that it will display using the anchor and div tags instead of ul and li. This is to work with the Bulma framework.
Normal link code:
<a class="navbar-item" href="#">Home</a>
Dropdown link code:
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="#">Sample Page</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="#">Sample Link</a>
</div>
</div>
Another reason I am trying to do this is to remove all of the unnecessary class and id attributes that WordPress automatically adds.
Is this possible with WordPress by using a walker?
Yes it is, you can use
https://github.com/wp-bootstrap/wp-bootstrap-navwalker (most common)
You can also check
1) https://github.com/wp-bootstrap/wp-bootstrap-navlist-walker
2) https://github.com/jprieton/wp-bootstrap4-navwalker
3) https://github.com/dupkey/bs4navwalker
I am making a wordpress theme using _s as a basis. I am trying to style the menu. So far I don't have any particular CSS on the menu. I have looked at the (responsive) menu for the Twenty Sixteen theme, and I want to have the same the of menu, but only the "responsive" menu for smaller screens. On my site, the menu does not have to be responsive though. The menu (on smaller screens) looks like this, which is what I want:
Twenty Sixteen theme demo: https://twentysixteendemo.wordpress.com/ (You have to resize to a small screen to see the menu I am talking about)
I want that type of menu largely because it has the ability for a "expand/drop-down button" that can show sub-content in the menu.
So my question is: how can I style my menu so that it looks like the Twenty Sixteen theme's (mobile/tablet) menu including the button that expands the menu sub-categories?
I have searched the web for days without finding info on this. It seems every article that merely address the issue are just copy-paste of other badly explained articles.
This is the rendered HTML I have for my menu right now:
<ul id="primary-menu" class="main-menu"><li class="has-children menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1706">Group 1
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1707">Sub Group 1
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1708">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1709">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1710">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1711">Sub Group 2
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1712">Sub Group Level 3
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1713">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1714">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1715">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1730">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1731">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1718">Group 2
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1719">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1720">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1721">Group 3
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1722">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1723">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1724">Group 4
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1725">Sub Group 3
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1726">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1727">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1728">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1729">Image</li>
</ul>
</li>
</ul>
This is the menu in my header.php
<div class="menu-container">
<nav id="site-navigation" class="main-navigation" role="navigation">
<?php wp_nav_menu(array(
'theme_location' => 'primary',
'sort_column' => 'menu_order',
'menu' => 'Categories',
'container_class' => 'main-menu',
'menu_id' => 'primary-menu',
'menu_class' => 'main-menu'
) ); ?>
</nav><!-- #site-navigation -->
</div><!-- #menu-container -->
What my menu looks like now:
You can achieve this with javascript (jquery) or only with css.
Css example: https://codyhouse.co/gem/css-multi-level-accordion-menu/
jquery example: https://perishablepress.com/jquery-accordion-menu-tutorial/
hope this helps
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