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;
}
Related
I want to create menu like below code but wordpress generate other code.
help me to generate code like below HTML code
Thanks in advance.
help me to generate below code using wordpress
You can do this by using menu walker class like this:
wp_nav_menu( array(
'container' => false,
'menu' => 'main-menu',
'menu_class' => 'nav navbar_menu',
'walker' => new Custom_Walker_Nav_Menu
)
);
add_theme_support('menu');
function register_newtheme_menu(){
register_nav_menus(
array(
'main-menu'=>_('Main Menu')
)
);
}
add_action('init','register_newtheme_menu');
function add_menuclass($ulclass) {
return preg_replace('/<a /', '<a class="navigation-link w-nav-link" ', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');
?>
<nav class="menu-hamburger w-nav-menu" role="navigation">
<?php
$defaults = array(
'container' => 'false',
'echo' => false,
'fallback_cb' => false,
//'items_wrap' => '<a id="%1$s" class="%2$s">%3$s</a>',
'depth' => 0
);
//echo wp_nav_menu( $defaults );
echo strip_tags(wp_nav_menu( $defaults ),'<a>');
?>
</nav>
How I can get child pages for each page, if a page dont have any child then there must be shown right menu.
For Example:
Parent Page
child page 1
child page 2
if parent don't have any child then display any menu
Right now I am using following code in:
FUNCTION.PHP
function get_top_ancestor_id() {
global $post;
if ($post->post_parent) {
$ancestors = array_reverse(get_post_ancestors($post->ID));
return $ancestors[0];
}
return $post-> ID;
}
HEADER.PHP
<?php
$args = array(
'child_of' => get_top_ancestor_id(),
'title_li' => ''
);
?>
<?php wp_list_pages($args); ?>
This is the default menu calling in wordpress
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
Directly use this function
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
Ahmad, if you just want to list the children of the page that you're currently on, you can use the function wp_get_post_parent_id (http://codex.wordpress.org/Function_Reference/wp_get_post_parent_id)
So, your code might be simplified to
<?php
global $post;
//If the page has children - print the list
if(wp_get_post_parent_id( $post->ID ))
{
$args = array(
'child_of' => wp_get_post_parent_id( $post->ID ),
'title_li' => ''
);
wp_list_pages($args);
}
else{
$args = array(
'child_of' => $post->ID,
'title_li' => ''
);
wp_list_pages($args);
}
?>
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.
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'm trying to remove the wrapper from the wp_nav_menu() function.
I've passed container => false to the arguements array and added a hook in my functions.php, but it still shows the wrapper.
function my_wp_nav_menu_args( $args )
{
$args['menu'] = false;
$args['menu_class'] = false;
$args['container'] = false;
$args['container_class'] = false;
$args['show_home'] = true;
return $args;
}
Any ideas why?
Reading the codex: Function Reference/wp nav menu
You may need to set the Theme Location in your functions.php file and then assign your menu to it?
This is what is says in the codex:
In order to remove navigation container, theme location specified in
functions.php and used among arguments in function wp_nav_menu ( eg.
'theme_location' => 'primary-menu' ) must have a menu assigned to it
in administration! Othervise argument 'container' => 'false' is
ignored.
If you need to register a location you can use the following:
// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'Your_Theme' ),
) );
Then pass it in the wp_nav_menu() function
wp_nav_menu( array( 'theme_location' => 'primary', 'container' => false ) );
Hope this helps!
I have passed null to container and menu is not wrapped in div tag.
wp_nav_menu(
array('menu' => 'Bočni',
'container' => null
)
);
I think the boolean data type it's not available for this Parameters, please read this Function Reference/wp nav menu
So the best way to remove this div wrapper replace it with ul, like this example
wp_nav_menu( array(
'menu' => 'header-nav_menu',
'theme_location' => 'header-nav_menu',
'container' => 'ul', //To replace div wrapper with ul
'menu_class' => 'YOUR CLASS'//Add classes to your ul
)
);
wp_nav_menu(array(
'container' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'theme_location' => 'footer-1',
));
An existing menu have to be associated to your location ('footer-1' in my example), otherwise, there is always a div wrapper.
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'
));