Working on Wordpress menu: with Bootstrap
My ul li gets wrap within Ul and creates Div.
Screenshot attached:
It seems it automatically adds classes to menu li and and prevents the bootstrap styles and classes
My wp menu function :
/**
* Get our wp_nav_menu() fallback, wp_page_menu(), to show a home link.
*/
function register_my_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
'extra-menu' => __( 'Extra Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );
Try changing in the theme template the nav menu function like this :
<?php
$defaults = array(
'theme_location' => '',
'menu' => '',
'container' => '', // <- This empty = no container
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
);
wp_nav_menu( $defaults );
?>
Source : https://codex.wordpress.org/Function_Reference/wp_nav_menu
Take a look at the container index of the defaults array.
Related
Encountered a menu which needed a fontawesome icon appended. The icon works in before but not in after:
function mobile_menu()
{
$mobile = array(
'theme_location' => 'mobile',
'container' => false,
'container_class' => '',
'container_id' => '',
'menu_class' => '',
'menu_id' => '',
'echo' => true,
'fallback_cb' => false,
'before' => '',
'after' => '<span><i class="fas fa-chevron-right"></i></span>',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul>%3$s</ul>',
'depth' => 0,
'walker' => new CUSTOM_Walker()
);
wp_nav_menu($mobile);
}
Problem persists with both different and no wrapper elements.
No CSS or JS is used to manipulate the menu.
How do I get the fontawesome icon to work with the after class?
Nobody could have answered this with the above input. In the custom walker I have the following line:
$output .= sprintf("\n <li%s>%s<a href='%s' target='%s'>%s</a>\n", $li_class, $before, $item->url, $target, $item->title, $after);
The way sprintf works this would never append the after pseudo element. I was missing a %s right after the closing a tag.
This is how it should be:
$output .= sprintf("\n <li%s>%s<a href='%s' target='%s'>%s</a>%s\n", $li_class, $before, $item->url, $target, $item->title, $after);
I have built WP templates before but I used to build them from scratch and I didn't have any issues like this. This time I decided to use html5blank boilerplate. Now I have this issue in the wp_nav_menu() where WordPress overrides the attributes I try to add in the items_wrap:
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'menu' => '',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul class="nav navbar-nav">%3$s</ul>',
'depth' => 0,
'walker' => ''
)
);
The WordPress docs state that the items_wrap should be assigned properly as <ul id="%1$s" class="%2$s">%3$s</ul>. There's also this filter function below that should supposedly replace the string values but there are no docs that I could find whatsoever that show an example of how do I approach it.
function my_wp_nav_menu_args($args = '')
{
$args['container'] = false;
return $args;
}
Don't know if I got it right – do you want the ul element contain the classes "nav" and "navbar-nav"? Then you only need to change "menu_class" within your array:
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'menu_class' => 'nav navbar-nav'
)
);
I solved this by removing item_wrap completely from the array and assigning in the menu_class .
I don't understand why it's impossible for me to get my custom menu on my front-end page
I use:
<?php
wp_nav_menu( array(
'theme_location' => 'jdsMainMenu',
'depth' => '1',
'menu_class' => 'jds-main-menu-list',
'menu_id' => 'jds-nav',
'container' => '',
'items_wrap' => '<ul class="jds-main-menu-list">%3$s</ul>'
));
?>
I have my menu in WordPress back office.
I try to make:
var_dump(get_registered_nav_menus());
My menu is available: but nothing display with wp_nav_menu...
Maybe some one have an idea...
I am sure you are using correct ID for theme location
screenshot
function register_my_menus() { register_nav_menus(
array(
'jdsMainMenu' => __( 'Navigation Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );
wp_nav_menu( array(
'theme_location' => 'jdsMainMenu',
'depth' => '1',
'menu_class' => 'jds-main-menu-list',
'menu_id' => 'jds-nav',
'container' => '',
'items_wrap' => '<ul class="jds-main-menu-list">%3$s</ul>'
));
I need to implement menu navigation shown in front same in backend in wordpress, need to show hierarchy of main page (as menu) and sub-pages as sub-menu in backend. I also searched for plugin also (https://wordpress.org/plugins/admin-collapse-subpages/ and https://wordpress.org/plugins/cms-tree-page-view/) but these plugins are also not fulfilling the required behaviour. Can anyone please help me on this.
// create page in admin panel
add_action('admin_menu', function(){
add_menu_page( 'Some admin', 'Admin page', 'manage_options', 'site-options', 'add_my_setting', '', 4 );
} );
function add_my_setting(){
// get the menu
wp_nav_menu( array(
'theme_location' => '',
'menu' => 'main_menu',
'container' => 'div',
'container_class' => 'some-container-class',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => '',
) );
}
// and add you styles for menu with some-container-class
add_action('admin_enqueue_scripts', function(){
wp_enqueue_style( 'myPluginStylesheet', plugins_url('stylesheet.css', __FILE__) );
});
I have problem with wp_nav_menu in wordpress. I want to make structure of Li elements, where all of them will have class "menu-li". But It doesn't work for me. I have this in function.php file:
register_nav_menus(
array(
'primary-menu' => __( 'Primary Menu' ),
'secondary-menu' => __( 'Secondary Menu' )
));
Then I created Menu in Wordpress admin panel and now I want to add my menu to my theme.
<?php
$defaults = array(
'theme_location' => 'primary-menu',
'menu' => '',
'container' => '',
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu-li',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul>%3$s</ul>',
'depth' => 0,
'walker' => ''
);
wp_nav_menu( $defaults );
?>
It displays all elemnet as li in ul but there is no class "menu-li". How can I add it to all li elements?
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.
If you need add class in custom menu, use next code:
add_filter('nav_menu_css_class','arg_menu_classes',110,3);
function arg_menu_classes($classes, $item, $args) {
if($args->menu == 'FooterMenu') { // name need menu
$classes[] = 'col-6 col-sm-6'; // add classes
}
return $classes;
}