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
Related
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'm having troubles removing the WordPress wrapper div from my wp_nav_menu(). I've passed container => false to my menu args but the div keeps displaying. I'm using the following arguments:
$defaults = array(
'container' => false,
'theme_location' => 'menu',
'menu_class' => 'main-nav',
);
wp_nav_menu( $defaults );
I have also declared the menu in my functions.php file.
register_nav_menus( array(
'main-nav' => __( 'Main Nav', 'ldsshop' ),
));
I have used these arguments with previous themes with no problems, but in this instance the wrapper keeps displaying, and I'm at a point where I need some extra eyes and help, no doubt I've missed something.
Thanking you all in advance,
Stu :)
Use container empty like this
'container' => '',
So it will like this
$defaults = array(
'container' => '',
'theme_location' => 'menu',
'menu_class' => 'main-nav',
);
wp_nav_menu( $defaults );
It will work, even it's working on my hand.
Update About Solved This Question
Try to the following using array in wp_nav_menu
wp_nav_menu( array(
'theme_location' => 'menu',
'container' => '',
'menu_class' => 'main-nav'
) );
use same '' about container if false not to work
Here is an article finding some helpful
See more in the codex https://developer.wordpress.org/reference/functions/wp_nav_menu/
In my case "container" => false doesn't work, It only works when you write "items_wrap" => "%3$s" but it removes all wraps including <ul> if you want to remove <div> and have your menu wrapped in <ul> I recommend to do this way
wp_nav_menu(array(
'theme_location' => 'header_menu',
'menu' => 'header_menu',
'items_wrap' => '<ul>%3$s</ul>',
'container' => false,
'menu_class' => 'nav',
'list_item_class' => 'nav-item',
'link_class' => 'nav-link',
'menu_id' => 'menu-main-menu'
));
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've used a HTML 5 Blank template and converted it to a WordPress theme successfully.
But when I use this code: <?php html5blank_nav(); ?> to auto populate the main navigation it of course looses the template styling.
I've enqueued all the css but from what I understand I need to use the below code to tell the menu how to be styled:
PHP:
function html5blank_nav()
{
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'menu' => '',
'container' => 'div',
'container_class' => 'menu-{menu slug}-container',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul>%3$s</ul>',
'depth' => 0,
'walker' => ''
)
);
}
If you take a look at http://geekcloud.co.uk - this is the header navigation menu style im trying to achieve using this code: .
Any help would be greatly appreciated.
Thank you.
You might want to look into the wp_enqueue_style page on the Wordpress developer documentation.
You have to register the stylesheet in your functions.php file with
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
Good luck developing!
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',