<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));
?>
Related
I use a code that displays products under each category on the archive page /shop:
Category 1
product 1 product 2 product 3
Category 2
product 1 product 2 product 3
Here is my code:
<?php
foreach( get_terms( array( 'taxonomy' => 'product_cat' ) ) as $category ) :
$products_loop = new WP_Query( array(
'post_type' => 'product',
'showposts' => -1,
'tax_query' => array_merge( array(
'relation' => 'AND',
array(
'taxonomy' => 'product_cat',
'terms' => array( $category->term_id ),
'field' => 'term_id'
)
), WC()->query->get_tax_query() ),
'meta_query' => array_merge( array(
// You can optionally add extra meta queries here
), WC()->query->get_meta_query() )
) );
?>
<h2 class="category-title"><?php echo $category->name; ?></h2>
<?php
while ( $products_loop->have_posts() ) {
$products_loop->the_post();
/**
* woocommerce_shop_loop hook.
*
* #hooked WC_Structured_Data::generate_product_data() - 10
*/
do_action( 'woocommerce_shop_loop' );
wc_get_template_part( 'content', 'product' );
}
wp_reset_postdata(); ?>
<?php endforeach; ?>
I also use a standard widget to display WooCommerce categories. As I understand it, the file is responsible for it - woocommerce / includes / widget / class-wc-widget-product-categories.php.
How can I modify this file (code for functions.php) to add anchor links? For example, in the categories menu, I select Category 2 and the page moves down to Category 2 with its products.
I just can’t find a ready-made solution, so I ask you for help. I hope this code will be useful to other users.
You need to add some javascript and add "data-link" attribute with a href for category term in your code
<h2 class="category-title" data-link="<?php echo get_term_link( (int) $category->term_id, 'product_cat' ); ?>"><?php echo $category->name; ?></h2>
I created a snippet to demonstrate:
$('.product-categories .cat-item > a').on('click', function(e) {
e.preventDefault();
var href = $(this).attr('href');
$('html, body').animate({
scrollTop: $("[data-link='" + href + "']").offset().top
}, 1000);
});
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
.category-wrapper {
height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left">
<ul class="product-categories">
<li class="cat-item">
Category 1
</li>
<li class="cat-item">
Category 2
</li>
</ul>
</div>
<div class="right">
<div class="category-wrapper">
<h2 class="category-title" data-link="http://category1">Category 1</h2>
</div>
<div class="category-wrapper">
<h2 class="category-title" data-link="http://category2">Category 2</h2>
</div>
</div>
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>
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);
?>
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 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";
}
}