When I add a custom menu to my theme via a widget I get this line of code:
<ul id="menu-insurance" class="menu"><li id="menu-item-294" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-294">test</li>
I need to remove the class="menu", but I can not figure out how this is getting added to my custom menu when I use a widget. This style is creating style issues in my theme.
How can I remove the class="menu" from this widget?
My register sidebar is like this, I am not sure if it is doing it or if the wordpress code looks for css styling for menu when you use the custom menu widget:
register_sidebar(array(
'id' => 'sidebar',
'name' => __('Main Sidebar'),
'description' => __('Sidebar used on most pages'),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
The custom menus are (or should be) created in functions.php inside your them. Find a piece of code like this one, and check or add the menu_class parametter and set to "".
wp_nav_menu(array(
'container' => false, // remove nav container
'container_class' => 'menu clearfix', // class of container
'menu' => 'The Main Menu', // nav name
'menu_class' => 'top-nav clearfix', // This is it!!!
'theme_location' => 'main-nav',
'before' => '', // before the menu
'after' => '', // after the menu
'link_before' => '', // before each link
'link_after' => '', // after each link
'depth' => 0, // limit the depth of the nav
'show_home' => '1', // show home link
'fallback_cb' => 'bones_main_nav_fallback' // fallback function
));
Related
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__) );
});
Looking at the Wordpress code I am struggling to find where the menus are been put together, (to be rendered).
For example, if I want to output 'menu-1' where is the function/class that creates the output result?
Does it use a class to do the creation? Does it follow a specific pattern?
Walker_Nav_Menu And wp_nav_menu is behind the wordpress Navigation. According to your requirement you need to customize the wp_nav_menu
$defaults = array(
'theme_location' => '',
'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 id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
);
wp_nav_menu( $defaults );
For adding the custom menu option that allows users to add and organize menus, you'll add this in your function.php
add_theme_support( 'menus' );
And then you can paste this code anywhere you want to display the custom menu
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>
the wp_nav_menu is the main function that displays menus on the WordPress page with a few arguments stored as an array. Sort_column instructs WordPress to follow the order in the options, and the container_class :.menu-header is the CSS class to style this menu. For displaying multiple menus, you can specify the id, slug, menu name with $id, $slug, $menu
I am very new to wordpress themeing . I am trying to create a Twitter Bootstrap menu to my newly created theme as below in header.php page.
$defaults = array(
'theme_location' => 'header-menu',
'menu' => '',
'container' => '',
'container_class' => '',
'container_id' => '',
'menu_class' => 'navbar-collapse collapse',
'menu_id' => 'navbar',
'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 );
With the above codes, I am expecting to add a class to navbar-collapse collapse to ul, but instead it produces HTML as below :
<div class="navbar-collapse collapse"><ul><li class="page_item page-item-11"> etc. How can I add class ul ?
Check you've actually registered 'header-menu' via register_nav_menus.
Removing theme_location => 'header-menu' will resolve the issue until you've registered your navigation ID correctly.
You should have this in your functions.php
register_nav_menus( array(
'header-menu' => __( 'Header Menu', 'domain' ),
) );
Try checking out a function that's already been made like this one. It will create the correct syntax for the menu to work.
Due to the fact that no one solved your problem. I want to provide a solution for future users. The solution is in the container parameter of the wp_nav_menu function.
Documentation:
https://developer.wordpress.org/reference/functions/wp_nav_menu/
container string - Whether to wrap the ul, and what to wrap it with.
Default 'div'.
To make parameter menu_class add it`s valuse to correct element, in your case it is ul element, you have to define container parameter as div, like below. Then parameter container_class will have default class 'menu-{menu slug}-container' because it`s not have any value given. container_id parameter also will be empty becouse there is no value given.
$defaults = array(
'theme_location' => 'header-menu',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_id' => 'navbar',
'menu_class' => 'navbar-collapse collapse',
);
wp_nav_menu( $defaults );
Then menu_class and menu_id parameters will be added to the ul element and ul element will look this <ul id="navbar" class="navbar-collapse collapse">.
In case you don`t want to have div container delete container_class and container_id and leave container parameter with ul value like this:
'theme_location' => 'header-menu',
'container' => 'ul',
'menu_id' => 'navbar',
'menu_class' => 'navbar-collapse collapse',
I developed a custom theme and register_sidebar in function.php to show menus on sidebar using Custom Menu (widget).
Then create a menu through Appearance-> Menu and set it in Widget's Sidebar area by using Custom Menu
Now I need to add an extra link for login page. This link should use extra class , which all other links/menu aren't using.
I added extra link through Appearance-> Menu but please help me to know how can I add a class for only that extra link (login)
$args = array(
'name' => __( 'Sidebar name', 'theme_text_domain' ),
'id' => 'unique-sidebar-id',
'description' => '',
'class' => 'PUT YOUR CLASS HERE', <=== here you can mention your class
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>' ); ?>
register_sidebar( $args );
Register sidebar Refer here
I'm working on a new wordpress site and I'm building it with the Foundation framework. I'd like to add the class "main" to the links in the navigation that is built with wp_nav_menu. Eventually, I'll probably want to add the class "has-flyout" to others. Any idea on how to do this? I'm assuming I need to extend Walker (or can I do this with 'items_wrap'?), but that seems like overkill.
Currently, I have:
wp_nav_menu( array(
'theme_location' => 'primary_navigation',
'container' =>false,
'menu_class' => '',
'echo' => true,
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'items_wrap' => '<ul class="nav-bar">%3$s</ul>'
));
You could use:
wp_nav_menu( array(
...
'menu_class' => 'main-menu',
...
And in your CSS (if that is what you want) access it like so:
ul.main-menu li { background: white; }
To add your "flyout" list-items maybe you could look into superfish? That system automatically adds "sf-with-ul" classes to list-items containing dropdowns.