wp_nav_menu - add class on UL
First of all, you need to create a custom navigation menu from Appearance -> Menus
.
Then, use the wp_nav_menu
with the following parameters:
<?php
$args = array(
'menu_class' => 'nav nav-tabs',
'menu' => '(your_menu_id)'
);
wp_nav_menu( $args );
?>
There's a lot you can read about Wordpress Menus. I suggest the following:
http://codex.wordpress.org/Navigation_Menus
http://www.paulund.co.uk/how-to-register-menus-in-wordpress
Add classes to Wordpress Menu ul element
To add CSS classes to a WordPress menu, first go to Appearance > Menus in your WordPress theme.
Next, find the Screen Options tab at the top right of the screen. Click to open the panel, and check the box labelled CSS Classes.
If you want to add Class to your Menu.
function main_menu()
{
wp_nav_menu( array( 'theme_location' => 'main-menu', 'container'=> false, 'menu_class'=>'nav-link nav-fill w-100'
) );
}
if you want to add class to your menu a
tag element:
function add_class_to_all_menu_anchors( $atts ) {
$atts['class'] = 'nav-link nav-fill w-100';
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_class_to_all_menu_anchors', 10 );
Adding class to li elements in wp_nav_menu
The menu_class
parameter of wp_nav_menu()
controls the class added to the <ul>
wrapper element, rather than the individual <li>
's. To add classes to the menu items, you want to use the nav_menu_css_class
filter.
Here's how it works (add this to your theme's functions.php
file):
add_filter ( 'nav_menu_css_class', 'so_37823371_menu_item_class', 10, 4 );
function so_37823371_menu_item_class ( $classes, $item, $args, $depth ){
$classes[] = 'menu-li';
return $classes;
}
This will add the menu-li
class to every menu item.
You can also do this conditionally based on the $item
, $args
etc. passed to this filter if you like.
How to add class to link in wp_nav_menu?
Thanks to Sergiu Paraschiv comment the issue was in regards of limiting to 1.
Therefore it should be in function.php:
function add_menuclass($ulclass) {
return preg_replace('/<a /', '<a class="list-group-item"', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');
UPDATE
There is a better way actually which gives us much more control and the piece of code is provided by Jeff Starr on this post
NOTE: this isn't adding the current class tho
Create your menu on wp, then remember to click the location in the menu editor then in your function you'd do:
// custom menu example @ https://digwp.com/2011/11/html-formatting-custom-menus/
function clean_custom_menus() {
$menu_name = 'nav-primary'; // specify custom menu name
if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
$menu = wp_get_nav_menu_object($locations[$menu_name]);
$menu_items = wp_get_nav_menu_items($menu->term_id);
$menu_list = '<nav>' ."\n";
$menu_list .= "\t\t\t\t". '<ul>' ."\n";
foreach ((array) $menu_items as $key => $menu_item) {
$title = $menu_item->title;
$url = $menu_item->url;
$menu_list .= "\t\t\t\t\t". '<li><a href="'. $url .'">'. $title .'</a></li>' ."\n";
}
$menu_list .= "\t\t\t\t". '</ul>' ."\n";
$menu_list .= "\t\t\t". '</nav>' ."\n";
} else {
// $menu_list = '<!-- no list defined -->';
}
echo $menu_list;
}
Finally we can call our menu:
<?php if (function_exists(clean_custom_menus())) clean_custom_menus(); ?>
The code above is taken from the post linked above, I thought to include this answer as it appears this question has many visits.
UPDATE 2
Another solution would be (maybe the best):
header.php:
<?php
wp_nav_menu( array(
'theme_location' => 'topnav',
'menu' =>'topnav',
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarCollapse',
'menu_class' => 'menu',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'items_wrap' => '<ul class="nav justify-content-end w-100 %2$s">%3$s</ul>',
'depth' => 0
) );
?>
function.php:
// register the nav
function register_my_menu() {
register_nav_menu('topnav',__( 'topnav' ));
}
add_action( 'init', 'register_my_menu' );
// let's add "*active*" as a class to the li
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
if( in_array('current-menu-item', $classes) ){
$classes[] = 'active ';
}
return $classes;
}
// let's add our custom class to the actual link tag
function atg_menu_classes($classes, $item, $args) {
if($args->theme_location == 'topnav') {
$classes[] = 'nav-link';
}
return $classes;
}
add_filter('nav_menu_css_class', 'atg_menu_classes', 1, 3);
function add_menuclass($ulclass) {
return preg_replace('/<a /', '<a class="nav-link"', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');
How to add class to wp_nav_menu() function
You should try and read the documentation for issues like this as the WordPress documentation is extensive and very good.
https://developer.wordpress.org/reference/functions/wp_nav_menu/
To solve this issue, below 'theme_location' => 'top'
add in 'menu_class' => 'menu vertical medium-horizontal expanded medium-text-center'
. So your final code will be:
<div class="top-bar" id="main-menu">
<?php
$args = array(
'theme_location' => 'top',
'menu_class' => 'menu vertical medium-horizontal expanded medium-text-center'
);
?>
<?php wp_nav_menu($args); ?>
</div>
wp_nav_menu() doesn't assign ul class
If the menu (WP admin area) is not set, then the "nav navbar-nav navbar-left" is applied to "container".
In other words, it overwrites the "container_class".
If the menu is set, then the "menu_class" is applied to "ul".
Related Topics
Wordpress Will Only Fully Load on Localhost
CSS3 Transitions Want to Add a Colour and Fade It Away
How to Left Align Bootstrap 3 Dropdown Menu
Font Awesome Icons Are Not Working in Some Browsers
Lesscss Method with Ie Filter Alpha Opacity CSS
How to Add Image Background to Btn-Default Twitter-Bootstrap Button
How to Add Vertical Spacing Between Block Elements, But Not Top and Bottom
CSS How to Position an Element in a Middle (Half Height/Vertical 50%) of Another Element
How to Prevent Fractional Pixels in an Element with Width Set to Auto
Bootstrap Container-Fluid - Remove Margins The Right Way (Overflow)
Bootstrap 4 Vertical Align Text Won't Center on Card
React Native - Why Padding Does Not Work
Why Clear: Right Doesn't Work as Intended
What's The Point of Gutters in CSS Grid Frameworks
Em Vs Px... for Mobile Browsers
Overriding Google Recaptcha CSS to Make It Responsive
Internet Explorer Doesn't Honor My Min-Height: 100% with Flexbox