sub-submenu walker method - wordpress

i have a walker class applied for my submenu but how do i get the sub-submenu item into this code?
below is my code
functions.php
<?php
class wp_submenu_class extends Walker_nav_menu {
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"submenu\">\n";
}
}
?>
header.php
<div class="navi">
<?php wp_nav_menu( array(
'menuitems' => 'mymenu',
'container' => '',
'container_id' => '',
'menu_class' => 'topmenu',
'menu_id' => '',
'items_wrap' => '<ul id="" class="%2$s">%3$s</ul>',
'walker' => new wp_submenu_class() ));
?>
</div>

you haven't specified an end_lvl for your class.
<?php wp_nav_menu( array(
'menu' => 'Menu 1', // REPLACE NAME WITH YOUR MENU
'container_class' => 'menu-header',
'menu_class' => 'nav-menu',
'depth'=> 3, // CHANGE THE VALUE WHICH LAVEL YOU CAN DISPLAY.
'menuitems' => 'mymenu',
'container' => '',
'container_id' => '',
'menu_class' => 'menu-header', // MENU CLASS
'menu_id' => '',
'items_wrap' => '<ul id="" class="%2$s">%3$s</ul>',
'walker' => new wp_submenu_class() //function
));
?>
class wp_submenu_class extends Walker_Nav_Menu {
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"submenu\">\n";
}
function end_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul>\n";
}
}

Related

How can I add custom class to menu item in WordPress. Below is my code, it does not work

header.php
/*Render menu*/
<div class="main-nav">
<?php wp_nav_menu(
array(
'theme_location' => 'header-menu',
'container' => 'ul',
'menu_class' => 'nav'
)
);
?>
</div>
functions.php
/*Register menu*/
function register_main_menu(){
register_nav_menus(array(
'Primary' => __('Header Menu'),
'Footer' => __('Footer Menu')
));
}
add_action('after_setup_theme', 'register_main_menu');
/*Custom menu class*/
function add_class_to_li($classes, $item){
$classes[] = "nav-item";
return $classes;
}
add_filter('nav_menu_css_class','add_class_to_li', 10, 4);
This does not add 'nav-item' class to 'li'. Is there anything that I need to update.
Your theme_location should be exactly like the one you have in your functions.php file. So your reader menu will be:
/*Render menu*/
<div class="main-nav">
<?php wp_nav_menu(
array(
'theme_location' => 'Primary', //this will be Primary, not header-menu
'container' => 'ul',
'menu_class' => 'nav'
)
);
?>
</div>

Display all categories in WP, with the selected in bold

I want to display all the categories existing in my Wordpress in the bottom of the content, with the selected for the current post in bold, as follows.
For example, for an existing post I selected category2 of 3 existing.
category1 category2 category3
How can I do this?
My code (now only display the selected category):
<div class="entry-meta">
<span class="term-links">
<?php foreach ( get_the_terms( $post->ID, 'category') as $term ) :
?>
<a href="<?php echo esc_url( get_term_link( $term->term_id ) )
?>"><span class="<?php echo $term->slug ?>"><?php echo $term->name ?>
</span></a>
<?php endforeach; ?>
</span>
<style>
.term-links .category2 {
display: inline-block;
font-weight:bold;
</style>
list of all category
add below code in your template
<style type="text/css">
.single-product div.product .product_meta .product_cat ul li{ list-style-type:circle;}
.single-product div.product .product_meta .product_cat ul li.current-cat{list-style-type:circle;}
.single-product div.product .product_meta .product_cat ul li.current-cat a{display: inline-block;font-weight:bold;}
</style>
<?php
global $post;
$terms = get_the_terms( $post->ID, 'product_cat' );
$product_cat_id_array = array();
foreach ($terms as $term ) {
$product_cat_id_array[] = $term->term_id;
}
$product_cat_id_string = implode(",",$product_cat_id_array);
$args = array(
'child_of' => 0,
'current_category' => $product_cat_id_string,
'depth' => 0,
'echo' => 1,
'exclude' => '',
'exclude_tree' => '',
'feed' => '',
'feed_image' => '',
'feed_type' => '',
'hide_empty' => 0,
'hide_title_if_empty' => false,
'hierarchical' => true,
'order' => 'ASC',
'orderby' => 'name',
'separator' => '',
'show_count' => 0,
'show_option_all' => '',
'show_option_none' => __( 'No categories' ),
'style' => 'list',
'taxonomy' => 'product_cat',
'title_li' => __( 'Categories' ),
'use_desc_for_title' => 0,
);
wp_list_categories($args);
?>

wordpress wp_nav_menu before after

<nav>
<ul class="menu sf-js-enabled">
<li class="item1">
<span>menuitem-1</span>
<ul>
<li>submenu-1-1</li>
<li>submenu-1-2</li>
</ul>
</li>
<li class="item2">
<span>menuitem-2</span>
<ul>
<li>submenu-2-1</li>
<li>submenu-2-2</li>
<li>submenu-2-3</li>
<li>submenu-2-4</li>
</ul>
</li>
</ul>
</nav>
I am trying to make a custom wordpress menu, but i have a problem with this code. As you can see there is a span tag before menuitem-1 and menuitem-2 and a close span tag too, but there isn't around submenu items.
I tried to do with this:
<?php wp_nav_menu(array('container' => 'nav', 'container_class' => ' ', 'theme_location' => 'primary', 'menu_class' => 'menu sf-js-enabled', 'before' => '<span>', 'after' => '</span>') );?>
but if i use this method there are also span tags around submenu items but i dont need those tags.
Is there any solution for this?
I created a custom class "my_nav_walker" insert to my function.php and modified these lines of the original class from class-walker-nav-menu.php
now works fine!
$item_output = ($depth == 0 ? $args->before . '<span>' : $args->before); //MODIFIED LINE original --> $item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . $title . $args->link_after;
$item_output .= '</a>';
$item_output .= ($depth == 0 ? $args->after . '</span>' : $args->after); //MODIFIED LINE original --> //$item_output .= $args->after;
then put this to my header
<?php
$walker = new my_nav_walker;
wp_nav_menu(array(
'container' => 'nav',
'container_class' => ' ',
'theme_location' => 'primary',
'menu_class' => 'menu sf-js-enabled',
'walker' => $walker));
?>

wp_nav_menu change & add sub-menu & li>a class name?

I found lots of methods to change the "sub-menu", but the problem is my friend coded a new Walker_Nav_Menu and here is the code.
All I want is:
to add a class in 3rd line where CLASS="ADD New HERE"
to change the class in 4th line, from <ul class="sub-menu"> to <ul class="dropdown">
again add a class in the 5th line, just like the 3rd line.
<ul id="menu-herid" class="nav navbar-nav" data-breakpoint="800">
<li id="menu-item-2821" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">
<a CLASS="ADD New HERE" href="http://theme.dev/home/">Home</a>
<ul class="sub-menu">
<li id="menu-item-2838" class="menu-item menu-item-type-post_type menu-item-object-page">
Blog with Slideshow
</li>
</ul>
</li>
</ul>
// Navigation with description
if (! class_exists('hs_description_walker')) {
class hs_description_walker extends Walker_Nav_Menu {
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = 'class="dropdown"';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="'. esc_attr( $class_names ) . '"';
$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
$description = ! empty( $item->description ) ? '<span class="desc">'.esc_attr( $item->description ).'</span>' : '';
if($depth != 0) {
$description = $append = $prepend = "";
}
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before;
if (isset($prepend))
$item_output .= $prepend;
$item_output .= apply_filters( 'the_title', $item->title, $item->ID );
if (isset($append))
$item_output .= $append;
$item_output .= $description.$args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
}
Now the thing is I wanted the sub-menu to be changed to ""
$defaults = array(
'theme_location' => '',
'menu' => 'menu-name',
'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' => new My_Walker_Nav_Menu() //call walker
);
//Add this in your theme functions.php file
class My_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"dropdown\">\n";
}
}
you try to this code...
HTML DEMO
Reference link
Wordress Code
<nav class="navbar-collapse collapse photoshoot-menu">
<?php wp_nav_menu(array('theme_location' => 'primary','container' => ' ')); ?>
</nav>

I want remove last after wp_nav_menu

This is my file:
<?php
$defaults = array(
'theme_location' => '',
'menu' => '',
'container' => 'div',
'container_class' => true,
'container_id' => 'btn',
'menu_class' => true,
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '<li class="btn_bar"><img src="img/pic-btn_bar.jpg"/></li>',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul>%3$s</ul>',
'depth' => 0,
'walker' => ''
);
wp_nav_menu( $defaults );
?>
Here, I insert class="btn_bar">
<ul>
<li class="menu-item-xxx">ABC</li>
<li class="btn_bar"><img width="18" height="38" src="img/pic-btn_bar.jpg"></li>
<li class="menu-item-xxx">DEF</li>
<li class="btn_bar"><img width="18" height="38" src="img/pic-btn_bar.jpg"></li>
</ul>
I want to put the code in the menu first or last menu. Please help me
It sounds like you could just do this with CSS instead of PHP/HTML. With CSS you could target a specific menu item and use pseudo after to insert an image.
.menu-item-82:after {
content: " ";
position: relative;
background: url(images/nav-image.png) -1px -32px #ddd;
display: block;
height: 25px;
width: 25px;
}
Another simple css hack, aslong as you have determined your menu item id
#menu-item-1244 .delimiter {display:none;}
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#doctype li:first").after("<li class='btn_bar'><img src='http://i.stack.imgur.com/VNk7r.jpg?s=24&g=1'/></li>");
jQuery("#doctype li:last").after("<li class='btn_bar'><img src='http://i.stack.imgur.com/VNk7r.jpg?s=24&g=1'/></li>");
});
</script>
<?php
$defaults = array(
'theme_location' => 'primary',
'menu' => 'Menu 1',
'container' => 'div',
'container_class' => '',
'container_id' => 'doctype',
'menu_class' => '',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul class="filter">%3$s</ul>',
'depth' => 0,
'walker' => ''
);
wp_nav_menu( $defaults );
?>

Resources