I want to add numbers in front of each item in my Wordpress Menu.
01 Home
02 About
03 Portfolio
04 Contact
etc.
I know you have to use a walker but I haven't been able to get the counter to work right.
<?php
class my_nav_walker extends Walker {
// Tell Walker where to inherit it's parent and id values
var $db_fields = array(
'parent' => 'menu_item_parent',
'id' => 'db_id'
);
function start_lvl( &$output, $depth = 0, $args = array() ) {
if (!isset($_GLOBALS['menu_counter'])) {
$GLOBALS['menu_counter'] = array();
}
$GLOBALS['menu_counter'][$depth] = 0;
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"sub-menu\">\n";
}
/**
* At the start of each element, output a <li> and <a> tag structure.
*
* Note: Menu objects include url and title properties, so we will use those.
*/
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $menu_counter;
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= ($args->has_children && $depth == 0) ? ' <span class="caret"></span></a>' : '</a>';
$item_output .= $args->after . '<span class="navnum">' . str_pad(++$menu_order[$depth], 2, "0", STR_PAD_LEFT) . '.</span>';
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
This what I tried to piece together from others.
This out puts:
Home01 About01 Portfolio01 Contact01
Related
I have a menu in the WordPress backend that looks like this:
What we do
Solutions
Solution 1
Solution 2
Services
Service 1
Contact
Items What we do and Contact are top level links and I only want these level 1 links to show in my main header.
As such, I created a custom walker to achieve this:
<?php
class simple_header extends Walker_Nav_Menu{
/*
* start_lvl : Responsible for start of a new level, such as <ul>
* end_lvl : Responsible for end of a level, such as </ul>
* start_el : Responsible for start of inner element, such as <li>
* end_el : Responsible for end of inner element, such as <\li>
*/
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
}
public function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
}
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = $item->ID;
$class_names = 'header__nav-menu-li';
if (in_array('current-menu-item', $classes)) {
$class_names .= ' header__nav-menu-li--active';
}
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
if ($depth === 0) {
$output .= $indent . '<li data-test' . $class_names .'>';
}
$atts = array();
$atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
// New
if ($depth === 0) {
$atts['class'] = 'header__nav-menu-anchor link-header';
}
if (in_array('current-menu-item', $item->classes)) {
$atts['class'] .= ' link-header--active';
}
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
/** This filter is documented in wp-includes/post-template.php */
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
public function end_el( &$output, $item, $depth = 0, $args = array() ) {
if ($depth === 0) {
$output .= "</li>\n";
}
}
}
?>
However, with the above walker, it still prints out the child markup. The HTML looks like this:
<li class="header__nav-menu-li header__nav-menu-li--active">
What we do
Solutions
Services
</li>
I have defined $depth === 0 in my walker, so unsure why it's printing child links?
Normally, at the start_lvl and end_lvl you would output <ul> and </ul> tags respectively to start and end a new list.
Every item in your menu consists of an anchor tag wrapped inside a list item:
<li>Target</li>
In your code you only have an 'if' statement around the code that adds the list item tags to the output.
On the last line of your start_el function you still add the anchor.
Instead of wrapping an if statement around the parts where you want to output markup, my advice would be to add the following line of code as the first line of your start_el function:
if($depth !== 0) { return; }
That way you skip execution of code for items that are not in the first level.
I wanted to add number of posts for menu items that are categories.
For example:
Category 1 (5)
Category 2 (8)
Category 3 (2)
etc...
I edit walker:
get number:
$item_count = $depth == 0 ? get_posts( array(
'post_type' => 'post',
'numberposts' => -1,
'orderby' => 'category',
'order' => 'ASC'
) ) : false;
output:
$item_output .= $item_count ? ' <span>(' . count( $item_count ) . ')</span>' : '';
The result is a postscript to each menu item the number of all posts.
How to modify?
use wp_list_categories
<?php wp_list_categories(array('show_count' => true)); ?>
UPDATE for your instance:
with the full code from the link you provided in the comments we add an if statement right before the closing <a>
if($item->type == 'taxonomy'){
$cat = get_category( $item->object_id);
$item_output .= ' ('.$cat->count.')</a>';
}
FULL CODE:
/* Bootstrap_Walker for Wordpress
* Author: George Huger, Illuminati Karate, Inc
* More Info: http://illuminatikarate.com/blog/bootstrap-walker-for-wordpress
*
* Formats a Wordpress menu to be used as a Bootstrap dropdown menu (http://getbootstrap.com).
*
* Specifically, it makes these changes to the normal Wordpress menu output to support Bootstrap:
*
* - adds a 'dropdown' class to level-0 <li>'s which contain a dropdown
* - adds a 'dropdown-submenu' class to level-1 <li>'s which contain a dropdown
* - adds the 'dropdown-menu' class to level-1 and level-2 <ul>'s
*
* Supports menus up to 3 levels deep.
*
*/
class Bootstrap_Walker extends Walker_Nav_Menu
{
/* Start of the <ul>
*
* Note on $depth: Counterintuitively, $depth here means the "depth right before we start this menu".
* So basically add one to what you'd expect it to be
*/
function start_lvl(&$output, $depth)
{
$tabs = str_repeat("\t", $depth);
// If we are about to start the first submenu, we need to give it a dropdown-menu class
if ($depth == 0 || $depth == 1) { //really, level-1 or level-2, because $depth is misleading here (see note above)
$output .= "\n{$tabs}<ul class=\"dropdown-menu\">\n";
} else {
$output .= "\n{$tabs}<ul>\n";
}
return;
}
/* End of the <ul>
*
* Note on $depth: Counterintuitively, $depth here means the "depth right before we start this menu".
* So basically add one to what you'd expect it to be
*/
function end_lvl(&$output, $depth)
{
if ($depth == 0) { // This is actually the end of the level-1 submenu ($depth is misleading here too!)
// we don't have anything special for Bootstrap, so we'll just leave an HTML comment for now
$output .= '<!--.dropdown-->';
}
$tabs = str_repeat("\t", $depth);
$output .= "\n{$tabs}</ul>\n";
return;
}
/* Output the <li> and the containing <a>
* Note: $depth is "correct" at this level
*/
function start_el(&$output, $item, $depth, $args)
{
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
/* If this item has a dropdown menu, add the 'dropdown' class for Bootstrap */
if ($item->hasChildren) {
$classes[] = 'dropdown';
// level-1 menus also need the 'dropdown-submenu' class
if($depth == 1) {
$classes[] = 'dropdown-submenu';
}
}
/* This is the stock Wordpress code that builds the <li> with all of its attributes */
$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 ) .'"' : '';
$item_output = $args->before;
/* If this item has a dropdown menu, make clicking on this link toggle it */
if ($item->hasChildren && $depth == 0) {
$item_output .= '<a'. $attributes .' class="dropdown-toggle" data-toggle="dropdown">';
} else {
$item_output .= '<a'. $attributes .'>';
}
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
/* Output the actual caret for the user to click on to toggle the menu */
if ($item->hasChildren && $depth == 0) {
$item_output .= '<b class="caret"></b></a>';
}elseif($item->type == 'taxonomy'){
$cat = get_category( $item->object_id);
$item_output .= ' ('.$cat->count.')</a>';
} else {
$item_output .= '</a>';
}
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
return;
}
/* Close the <li>
* Note: the <a> is already closed
* Note 2: $depth is "correct" at this level
*/
function end_el (&$output, $item, $depth, $args)
{
$output .= '</li>';
return;
}
/* Add a 'hasChildren' property to the item
* Code from: http://wordpress.org/support/topic/how-do-i-know-if-a-menu-item-has-children-or-is-a-leaf#post-3139633
*/
function display_element ($element, &$children_elements, $max_depth, $depth = 0, $args, &$output)
{
// check whether this item has children, and set $item->hasChildren accordingly
$element->hasChildren = isset($children_elements[$element->ID]) && !empty($children_elements[$element->ID]);
// continue with normal behavior
return parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
}
}
If you are using some custom post taxonomie you can change the code for this one :
if ($item->type == 'taxonomy'){
$term = get_term($item->object_id);
$item_output .= '<div class="meni-item-badge"> '.$term->count .'</div>';
}
Hope this help someone !!
Regards Mario
I have a custom Walker_Page class that I have extended like this:
class List_Nav extends Walker_Page {
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class='ListNav'>\n";
}
function start_el(&$output, $page, $depth = 0, $args = array(), $current_page = 0) {
$output .= '<li class="ListNav-item">';
$output .= '<a class="ListNav-link" href="' . get_permalink($page->ID) . '">' . apply_filters( 'the_title', $page->post_title, $page->ID ) . '</a>';
$output .= '</li>';
}
function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent</ul>\n";
}
}
But I’m not getting any output from the start_lvl or end_lvl functions. Is there something I’m missing here or that I need to return? I’m getting the <li> output from start_el().
Update with usage
Here’s how I’m using the walker:
if ($post->post_parent) {
$ancestors=get_post_ancestors($post->ID);
$root = count($ancestors) - 1;
$top_parent = $ancestors[$root];
} else {
$top_parent = $post->ID;
}
$page_list_args = array(
'child_of' => $top_parent,
'depth' => 0,
'title_li' => false,
'walker' => new List_Nav
);
wp_list_pages($page_list_args);
Looks like start_lvl() and end_lvl() is always called within the loop and never on a first level. This goes for all WordPress Walkers like Walker_Nav_Menu, Walker_Page and Walker_Category.
It’s not super clear but you could guess it when you look at the Core Walker code or when you read the Walker documentation about start_lvl().
But in the documentation for Walker::start_lvl it just says that it...
Starts the list before the elements are added.
So perhaps what should be done is an update in the docs.
I am trying to add sequential numbering after each link in a menu in wordpress. They should be in tag and as a text. so i can style.
Tried this one below but since its CSS, I can't style those numbers.
How to add sequential numbering for wordpress menu
I've got no knowledge of JS. so I did this in navwalker.php
if(! empty( $item->attr_title )){
$item_output .= '<a'. $attributes .'><i class="' . esc_attr( $item->attr_title ) . '"></i> ';
} else {
$item_output .= '<a'. $attributes .'>';
}
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= ($args->has_children && $depth == 0) ? ' <span class="caret"></span></a>' : '</a>';
$item_output .= $args->after . '<span class="navnum">' . str_pad(esc_attr( $item->menu_order ), 2, "0", STR_PAD_LEFT) . '.</span>';
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
And it works.
Only problem it counts childs (submenus) in a collapsable menu, so it creates something like this:
01
03
04
07
08
Any idea about how to number only parents?
(If solution is JS I would appreciate if you explain it very simple)
If what you are trying to do is number only the top-level menu, you can just test for depth.
Change:
$item_output .= $args->after . '<span class="navnum">' . str_pad(esc_attr( $item->menu_order ), 2, "0", STR_PAD_LEFT) . '.</span>';
to:
$item_output .= $args->after . ($depth == 0 ? '<span class="navnum">' . str_pad(esc_attr( $item->menu_order ), 2, "0", STR_PAD_LEFT) : '') . '.</span>';
To number the menu items sequentially, set up your own global counter when a new level starts:
public function start_lvl( &$output, $depth = 0, $args = array() ) {
if (!isset($_GLOBALS['menu_counter'])) {
$GLOBALS['menu_counter'] = array();
}
$GLOBALS['menu_counter'][$depth] = 0;
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"sub-menu\">\n";
}
Then in start_el:
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $menu_counter;
....
and in the code example you gave in your question:
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= ($args->has_children && $depth == 0) ? ' <span class="caret"></span></a>' : '</a>';
$item_output .= $args->after . '<span class="navnum">' . str_pad(++$menu_order[$depth], 2, "0", STR_PAD_LEFT) . '.</span>';
What this does is set a variable, starting at zero, when you set a new level. Then, for each item at that level, it adds one to that variable and uses the result as the number of the menu item.
I'm in the process of creating a custom category walker for my WordPress site. This will be part of my main menu and will show all top level categories with the children of the categories shown in a dropdown menu.
What I'd like to do is create a mega menu effect and as a result I'd like to repeat the parent category name in my dropdown inside a span so I can use it as a heading.
The code for my walker so far is as follows:
class Nav_Catwalker extends Walker_Category {
// Configure the start of each level
function start_lvl(&$output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
$output .= "<div class='sub-categories'>\n<span>" . $parent_category . "</span>\n$indent<ul class='sub-nav'>\n";
}
// Configure the end of each level
function end_lvl(&$output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul>\n</div>\n";
}
// Configure the start of each element
function start_el( &$output, $category, $depth = 0, $args = array(), $id = 0) {
// Set the category name as a variable for later use
$cat_name = esc_attr( $category->name );
$cat_name = apply_filters( 'list_cats', $cat_name, $category );
// Configure the output for the top list element and its URL
if ( $depth === 0 ) {
$link = '' . $cat_name . '';
$output .= "\t<li class='parent-category'>$link\n";
}
// Configure the output for lower level list elements and their URL's
if ( $depth > 0 ) {
$link = '<a href="' . esc_url( get_term_link($category) ) . '"' . '>' . $cat_name . '</a>';
$output .= "\t<li class='sub-category'>$link\n";
}
}
// Configure the end of each element
function end_el(&$output, $page, $depth = 0, $args = array() ) {
$output .= "</li>";
}
}
What I need to do is create a variable that will replace the $parent_category variable in the first output (start_lvl) that will show the parent category of the sub-menu. I can't figure out how to do this.
Any help would be appreciated.
Thanks,
James
For future reference, I achieved this by restructuring my walker so I could use the existing $cat_name variable. The code is below.
class Navigation_Catwalker extends Walker_Category {
// Configure the start of each level
function start_lvl(&$output, $depth = 0, $args = array()) {
$output .= "";
}
// Configure the end of each level
function end_lvl(&$output, $depth = 0, $args = array()) {
$output .= "";
}
// Configure the start of each element
function start_el( &$output, $category, $depth = 0, $args = array(), $id = 0) {
// Set the category name and slug as a variables for later use
$cat_name = esc_attr( $category->name );
$cat_name = apply_filters( 'list_cats', $cat_name, $category );
$cat_slug = esc_attr( $category->slug );
// Configure the output for the top list element and its URL
if ( $depth === 0 ) {
$link = '<a class="parent-category-dropdown" href="' . esc_url( get_term_link($category) ) . '"' . '>' . $cat_name . '</a>';
$indent = str_repeat("\t", $depth);
$output .= "\t<li class='parent-category " . $cat_slug . "'>$link\n<div class='category-dropdown'>\n<span class='parent-category-title'>" . $cat_name . "</span>\n$indent<ul class='submenu'>\n";
}
// Configure the output for lower level list elements and their URL's
if ( $depth > 0 ) {
$link = '<a href="' . esc_url( get_term_link($category) ) . '"' . '>' . $cat_name . '</a>';
$output .= "\t<li class='sub-category'>$link\n";
}
}
// Configure the end of each element
function end_el(&$output, $page, $depth = 0, $args = array() ) {
if ( $depth === 0 ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul>\n</div>\n";
}
if ( $depth > 0 ) {
$output .= "</li>";
}
}
}