I spent hours on tutorials on how to make a custom nav walker.
But still don’t manage to do anything right with my theme (block theme).
Not even to change the class of the nav or the ul elements…
For exemple I don’t even understand where to find the ‘theme_location’ name (once I have created a menu in the WP appearence>editor)…
Also, I don’t understand what is the difference between the menu location, the menu name, and the navigation ‘ref’ number that I can see in my header.html template…
So, do you know where I can find an ultra simple step by step tutorial on how to build a Walker_Nav_Menu when using a block theme ?
Thank you! ]]>
<div id="nav-bottom">
<div class="container">
<!-- nav -->
<ul class="nav-menu">
<li class="has-dropdown">
<a href="index.html">Home</a>
<div class="dropdown">
<div class="dropdown-body">
<ul class="dropdown-list">
<li><a href="category.html">Category page</a></li>
<li><a href="blog-post.html">Post page</a></li>
<li><a href="author.html">Author page</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contacts</a></li>
<li><a href="blank.html">Regular</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#">Fashion</a></li>
<li><a href="#">Lifestyle</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Health</a></li>
<li><a href="#">Travel</a></li>
</ul>
</div>
</div>
<!-- /Main Nav -->Menu form as follows:
<div id="nav-bottom">
<div class="container">
<!-- nav -->
<ul class="nav-menu">
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'walker' => new Callie_Walker_Nav_Menu(),
));
?>
</ul>
</div>
</div>I want to attach images to items, and then get items using filter, like this:
function wpse19375_nav_class( $classes, $item ){
if( in_array( 'current-menu-item', $classes ) )
{
get_post_meta($item->ID, 'custom_image_data_' . $item_id, true);
}
return $classes;
}
add_filter( 'nav_menu_css_class', 'wpse19375_nav_class', 10, 2 );I have problem with upload images
1)If I come to the page then page (nav-menus.php) have error because $_REQUEST[‘menu’] is empty and I cannot get current nav menu ID
2)I cannot make js script for every item, I try to use loop but get a lot of error
functions.php
Problem:
– $menuItems = wp_get_nav_menu_items($_REQUEST[‘menu’]);
– wp_localize_script(
‘wp_img_upload’,
‘customUploads_’ . $items_id[$i],
array(
‘imageData’ => get_post_meta($items_id[$i++],
‘custom_image_data_’ . $items_id[$i],
true ) ) );
function register_admin_script()
{
$menuItems = wp_get_nav_menu_items($_REQUEST['menu']);
$items_id;
$i = 0;
wp_enqueue_script( 'wp_img_upload', CURRENT_DIR_URL . '/include/uploader.js', array('jquery', 'media-upload'), '0.0.1', true );
foreach ($menuItems as $currentItem) {
$items_id[$i] = $currentItem->ID;
wp_localize_script(
'wp_img_upload',
'customUploads_' . $items_id[$i],
array(
'imageData' => get_post_meta($items_id[$i++],
'custom_image_data_' . $items_id[$i],
true ) ) );
}
wp_localize_script( 'wp_img_upload', 'currentItemsID', array('itemsID' => $items_id));
wp_enqueue_media();
}
add_action( 'admin_enqueue_scripts', 'register_admin_script' );uploader.js
Problem: I cannot make js script for every item
var addButton = document.getElementById( 'image-upload-button_' + currentItemsID.itemsID[0] );
var deleteButton = document.getElementById( 'image-delete-button_' + currentItemsID.itemsID[0] );
var img = document.getElementById( 'image-tag_' + currentItemsID.itemsID[0] );
var hidden = document.getElementById( 'img-hidden-field_' + currentItemsID.itemsID[0] );
var customUploader = wp.media({
title: 'Select an Image',
button: {
text: 'Use this Image'
},
multiple: false
});
addButton.addEventListener( 'click', function() {
if ( customUploader ) {
customUploader.open();
}
} );
customUploader.on( 'select', function() {
var attachment = customUploader.state().get('selection').first().toJSON();
img.setAttribute( 'src', attachment.url );
hidden.setAttribute( 'value', JSON.stringify( [{ id: attachment.id, url: attachment.url }]) );
toggleVisibility( 'ADD' );
} );
deleteButton.addEventListener( 'click', function() {
img.removeAttribute( 'src' );
hidden.removeAttribute( 'value' );
toggleVisibility( 'DELETE' );
} );
var toggleVisibility = function( action ) {
if ( 'ADD' === action ) {
addButton.style.display = 'none';
deleteButton.style.display = '';
img.setAttribute( 'style', 'width: 100%;' );
}
if ( 'DELETE' === action ) {
addButton.style.display = '';
deleteButton.style.display = 'none';
img.removeAttribute('style');
}
};
window.addEventListener( 'DOMContentLoaded', function() {
if ( "" === customUploads.imageData || 0 === customUploads.imageData.length ) {
toggleVisibility( 'DELETE' );
} else {
img.setAttribute( 'src', customUploads.imageData.src );
hidden.setAttribute( 'value', JSON.stringify([ customUploads.imageData ]) );
toggleVisibility( 'ADD' );
}
} );The files below have no problem
Important part of edit_custom_walker.php file (151-156)
<div id="metabox_wrapper">
<img id="image-tag_<?=$item_id?>">
<input type="hidden" id="img-hidden-field_<?=$item_id?>" name="custom_image_data_<?=$item_id?>">
<input type="button" id="image-upload-button_<?=$item_id?>" class="button" value="Add Image">
<input type="button" id="image-delete-button_<?=$item_id?>" class="button" value="Delete Image">
</div>edit_custom_walker.php
<?php
class Walker_Nav_Menu_Edit_Custom extends Walker_Nav_Menu {
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $_wp_nav_menu_max_depth;
$_wp_nav_menu_max_depth = $depth > $_wp_nav_menu_max_depth ? $depth : $_wp_nav_menu_max_depth;
ob_start();
$item_id = esc_attr( $item->ID );
$removed_args = array(
'action',
'customlink-tab',
'edit-menu-item',
'menu-item',
'page-tab',
'_wpnonce',
);
$original_title = '';
if ( 'taxonomy' == $item->type ) {
$original_title = get_term_field( 'name', $item->object_id, $item->object, 'raw' );
if ( is_wp_error( $original_title ) )
$original_title = false;
} elseif ( 'post_type' == $item->type ) {
$original_object = get_post( $item->object_id );
$original_title = get_the_title( $original_object->ID );
}
$classes = array(
'menu-item menu-item-depth-' . $depth,
'menu-item-' . esc_attr( $item->object ),
'menu-item-edit-' . ( ( isset( $_GET['edit-menu-item'] ) && $item_id == $_GET['edit-menu-item'] ) ? 'active' : 'inactive'),
);
$title = $item->title;
if ( ! empty( $item->_invalid ) ) {
$classes[] = 'menu-item-invalid';
/* translators: %s: title of menu item which is invalid */
$title = sprintf( __( '%s (Invalid)' ), $item->title );
} elseif ( isset( $item->post_status ) && 'draft' == $item->post_status ) {
$classes[] = 'pending';
/* translators: %s: title of menu item in draft status */
$title = sprintf( __('%s (Pending)'), $item->title );
}
$title = ( ! isset( $item->label ) || '' == $item->label ) ? $title : $item->label;
$submenu_text = '';
if ( 0 == $depth )
$submenu_text = 'style="display: none;"';
?>
<li id="menu-item-<?php echo $item_id; ?>" class="<?php echo implode(' ', $classes ); ?>">
<dl class="menu-item-bar">
<dt class="menu-item-handle">
<span class="item-title"><span class="menu-item-title"><?php echo esc_html( $title ); ?></span> <span class="is-submenu" <?php echo $submenu_text; ?>><?php _e( 'sub item' ); ?></span></span>
<span class="item-controls">
<span class="item-type"><?php echo esc_html( $item->type_label ); ?></span>
<span class="item-order hide-if-js">
<a href="<?php
echo wp_nonce_url(
add_query_arg(
array(
'action' => 'move-up-menu-item',
'menu-item' => $item_id,
),
remove_query_arg($removed_args, admin_url( 'nav-menus.php' ) )
),
'move-menu_item'
);
?>" class="item-move-up"><abbr title="<?php esc_attr_e('Move up'); ?>">↑</abbr></a>
|
<a href="<?php
echo wp_nonce_url(
add_query_arg(
array(
'action' => 'move-down-menu-item',
'menu-item' => $item_id,
),
remove_query_arg($removed_args, admin_url( 'nav-menus.php' ) )
),
'move-menu_item'
);
?>" class="item-move-down"><abbr title="<?php esc_attr_e('Move down'); ?>">↓</abbr></a>
</span>
<a class="item-edit" id="edit-<?php echo $item_id; ?>" title="<?php esc_attr_e('Edit Menu Item'); ?>" href="<?php
echo ( isset( $_GET['edit-menu-item'] ) && $item_id == $_GET['edit-menu-item'] ) ? admin_url( 'nav-menus.php' ) : add_query_arg( 'edit-menu-item', $item_id, remove_query_arg( $removed_args, admin_url( 'nav-menus.php#menu-item-settings-' . $item_id ) ) );
?>"><?php _e( 'Edit Menu Item' ); ?></a>
</span>
</dt>
</dl>
<div class="menu-item-settings wp-clearfix" id="menu-item-settings-<?php echo $item_id; ?>">
<?php if( 'custom' == $item->type ) : ?>
<p class="field-url description description-wide">
<label for="edit-menu-item-url-<?php echo $item_id; ?>">
<?php _e( 'URL' ); ?><br />
<input type="text" id="edit-menu-item-url-<?php echo $item_id; ?>" class="widefat code edit-menu-item-url" name="menu-item-url[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->url ); ?>" />
</label>
</p>
<?php endif; ?>
<p class="description description-thin">
<label for="edit-menu-item-title-<?php echo $item_id; ?>">
<?php _e( 'Navigation Label' ); ?><br />
<input type="text" id="edit-menu-item-title-<?php echo $item_id; ?>" class="widefat edit-menu-item-title" name="menu-item-title[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->title ); ?>" />
</label>
</p>
<p class="description description-thin">
<label for="edit-menu-item-attr-title-<?php echo $item_id; ?>">
<?php _e( 'Title Attribute' ); ?><br />
<input type="text" id="edit-menu-item-attr-title-<?php echo $item_id; ?>" class="widefat edit-menu-item-attr-title" name="menu-item-attr-title[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->post_excerpt ); ?>" />
</label>
</p>
<p class="field-link-target description">
<label for="edit-menu-item-target-<?php echo $item_id; ?>">
<input type="checkbox" id="edit-menu-item-target-<?php echo $item_id; ?>" value="_blank" name="menu-item-target[<?php echo $item_id; ?>]"<?php checked( $item->target, '_blank' ); ?> />
<?php _e( 'Open link in a new window/tab' ); ?>
</label>
</p>
<p class="field-css-classes description description-thin">
<label for="edit-menu-item-classes-<?php echo $item_id; ?>">
<?php _e( 'CSS Classes (optional)' ); ?><br />
<input type="text" id="edit-menu-item-classes-<?php echo $item_id; ?>" class="widefat code edit-menu-item-classes" name="menu-item-classes[<?php echo $item_id; ?>]" value="<?php echo esc_attr( implode(' ', $item->classes ) ); ?>" />
</label>
</p>
<p class="field-xfn description description-thin">
<label for="edit-menu-item-xfn-<?php echo $item_id; ?>">
<?php _e( 'Link Relationship (XFN)' ); ?><br />
<input type="text" id="edit-menu-item-xfn-<?php echo $item_id; ?>" class="widefat code edit-menu-item-xfn" name="menu-item-xfn[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->xfn ); ?>" />
</label>
</p>
<?php
// This is the added section
do_action( 'wp_nav_menu_item_custom_fields', $item_id, $item, $depth, $args );
// end added section
?>
<p class="field-description description description-wide">
<label for="edit-menu-item-description-<?php echo $item_id; ?>">
<?php _e( 'Description' ); ?><br />
<textarea id="edit-menu-item-description-<?php echo $item_id; ?>" class="widefat edit-menu-item-description" rows="3" cols="20" name="menu-item-description[<?php echo $item_id; ?>]"><?php echo esc_html( $item->description ); // textarea_escaped ?></textarea>
<span class="description"><?php _e('The description will be displayed in the menu if the current theme supports it.'); ?></span>
</label>
</p>
<?php
/* New fields insertion ends here */
//$locations = get_nav_menu_locations();
?>
<div id="metabox_wrapper">
<img id="image-tag_<?=$item_id?>">
<input type="hidden" id="img-hidden-field_<?=$item_id?>" name="custom_image_data_<?=$item_id?>">
<input type="button" id="image-upload-button_<?=$item_id?>" class="button" value="Add Image">
<input type="button" id="image-delete-button_<?=$item_id?>" class="button" value="Delete Image">
</div>
<?php
/* End New fields insertion ends here */
/*Save field*/
update_post_meta($item_id, 'custom_image_data_' . $item_id, $_POST['custom_image_data']);
?>
<div class="menu-item-actions description-wide submitbox">
<?php if( 'custom' != $item->type && $original_title !== false ) : ?>
<p class="link-to-original">
<?php printf( __('Original: %s'), '<a href="' . esc_attr( $item->url ) . '">' . esc_html( $original_title ) . '</a>' ); ?>
</p>
<?php endif; ?>
<a class="item-delete submitdelete deletion" id="delete-<?php echo $item_id; ?>" href="<?php
echo wp_nonce_url(
add_query_arg(
array(
'action' => 'delete-menu-item',
'menu-item' => $item_id,
),
admin_url( 'nav-menus.php' )
),
'delete-menu_item_' . $item_id
); ?>"><?php _e( 'Remove' ); ?></a> <span class="meta-sep hide-if-no-js"> | </span> <a class="item-cancel submitcancel hide-if-no-js" id="cancel-<?php echo $item_id; ?>" href="<?php echo esc_url( add_query_arg( array( 'edit-menu-item' => $item_id, 'cancel' => time() ), admin_url( 'nav-menus.php' ) ) );
?>#menu-item-settings-<?php echo $item_id; ?>"><?php _e('Cancel'); ?></a>
</div>
<input class="menu-item-data-db-id" type="hidden" name="menu-item-db-id[<?php echo $item_id; ?>]" value="<?php echo $item_id; ?>" />
<input class="menu-item-data-object-id" type="hidden" name="menu-item-object-id[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->object_id ); ?>" />
<input class="menu-item-data-object" type="hidden" name="menu-item-object[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->object ); ?>" />
<input class="menu-item-data-parent-id" type="hidden" name="menu-item-parent-id[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->menu_item_parent ); ?>" />
<input class="menu-item-data-position" type="hidden" name="menu-item-position[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->menu_order ); ?>" />
<input class="menu-item-data-type" type="hidden" name="menu-item-type[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->type ); ?>" />
</div><!-- .menu-item-settings-->
<ul class="menu-item-transport"></ul>
<?php
$output .= ob_get_clean();
}
}
What my goal is:
What I have done so far:
What I want to achieve:
Pastebin (Custom Nav Walker class):
https://pastebin.com/3p2QNZMm
Pastebin (Markup):
https://pastebin.com/rzHuYFQ3
I’ve written a custom walker class for my navigation menu, to be able to output:
<ul id="menu-main-menu" class="pull-left"><li><a href="#" class="main-category">onthelogg100</a></li>
<li><a href="#" class="main-category">MainCategoy</a></li>
<li><a href="#" class="main-category">MainCategory</a></li>
<li><a href="#" class="main-category">MainCategory - with children</a>
<div class="sub-menu"><div class="sub-links pull-left"><a href="#">Sub-item</a>
<a href="#">Sub-item</a>
</div></div></li>
</ul>and here’s my code:
class loggmax_class_walker extends Walker_Nav_Menu{
// Start level, beginning tags
function start_lvl(&$output, $depth=0) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$output .= "\n$indent";
$output .= '<div class="sub-menu">';
$output .= '<div class="sub-links pull-left">';
}
function end_lvl(&$output, $depth) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$output .= "</div>";
$output .= '</div>';
}
// Start element (beginning list items)
function start_el( &$output, $item, $depth, $args=array(),$current_object_id=0 ) {
$this->curItem = $item;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$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 : '';
$atts['slug'] = ! empty( $item->slug ) ? $item->slug : '';
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
$item_output = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
// Check if it is a submenu
if ( $depth == 1 ) {
$output .= '<a'. $attributes. '>';
$output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$output .= '</a>';
} elseif ( $depth == 0 ) {
$item_output .= $args->before;
$item_output .= '<li>';
$item_output .= '<a'. $attributes. ' class="main-category">';
$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 );
}
}.
So far, the class is working, but an ending list tag </li> appears on all my sub-menu items, like so:
<ul id="menu-main-menu" class="pull-left"><li><a href="#" class="main-category">MainCategory</a></li>
<li><a href="#" class="main-category">MainCategoy</a></li>
<li><a href="#" class="main-category">MainCategory</a></li>
<li><a href="#" class="main-category">MainCategory - with children</a>
<div class="sub-menu"><div class="sub-links pull-left"><a href="#">Sub-item</a></li>
<a href="#">Sub-item</a></li>
</div></div></li>
</ul>.
Please how do I get rid of that </li> in the sub-menu items?
I use the code below in my functions.php. All it does is remove the standard id’s and classes. And add a ‘dropdown arrow’ icon for each submenu.
How can I add the parent name as an id to the dropdown ul?
add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
function my_css_attributes_filter($var) {
return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
}
class custom_menu extends Walker_Nav_Menu {
function start_lvl(&$output, $depth) {
$output .= '<i class="fa fa-angle-down" aria-hidden="true"></i><ul id="'.$args->parent_id.'">';
}
function end_lvl(&$output, $depth) {
$output .= '</ul>';
}
}Hope someone can help me, thanks.
– Thierry
]]>I’m developing my first WP theme and I would like to include different looks of navigation menus. For most of layouts that I want to do default navigation WP layout is fine but I want to implement navigation from following link:
https://tympanus.net/Blueprints/MultiLevelMenu/
I know that I need to extend Walker_Nav_Menu class but I can’t get a grip on how actually can I arrange methods to output layout that I need to create something like this.
Any help is very welcome.
$depth = 1 unordered lists. I need to add this number as a class to each unordered lists parent <li>, but by the time I’ve counted the number of breaks in the child unordered list, the parent list item has already been generated, so I can’t add the class. I’m’ so close to finishing this walker, I’ve got to be missing something really small. Please help!
// mega menu walker
/*
ONE REMAINING BUG:
- Need to add class to LI containing mega-menu-columns-#
*/
class megaMenuWalker extends Walker_Nav_Menu {
private $column_limit = 3; /* needs to be set for each site */
private $show_widget = false;
private $column_count = 0;
static $li_count = 0;
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
$classes = empty($item->classes) ? array() : (array) $item->classes;
$item_id = $item->ID;
if ($depth == 0) self::$li_count = 0;
if ($depth == 0 && in_array("widget", $classes)) {
$this->show_widget = true;
$this->column_count++;
}
if ($depth == 1 && self::$li_count == 1) {
$this->column_count++;
}
if ($depth == 1 && in_array("break", $classes) && self::$li_count != 1 && $this->column_count < $this->column_limit) {
$output .= "</ul><ul class=\"sub-menu\">";
$this->column_count++;
}
if ($depth == 0 && $this->column_count > 0) {
// always returns 0 unless there's a widget
$mega_menu_class = " mega-menu-columns-" . $this->column_count;
}
$class_names = join(" ", apply_filters("nav_menu_css_class", array_filter($classes), $item));
$class_names = " class=\"" . esc_attr($class_names . $mega_menu_class) . "\"";
$output .= sprintf(
"<li id=\"menu-item-%s\"%s><a href=\"%s\">%s</a>",
$item_id,
$class_names,
$item->url,
$item->title
);
self::$li_count++;
}
function start_lvl(&$output, $depth = 0, $args = array()) {
if ($depth == 0) {
$output .= "<section>";
}
$output .= "<ul class=\"sub-menu\">";
}
function end_lvl(&$output, $depth = 0, $args = array()) {
$output .= "</ul>";
if ($depth == 0) {
if ($this->show_widget) {
ob_start();
dynamic_sidebar("Navigation Callout");
$widget = ob_get_contents();
ob_end_clean();
$output .= $widget;
$this->show_widget = false;
}
$output .= "</section>";
}
}
function end_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
if ($depth == 0 && $this->column_count > 0) {
/* needs to be added to opening level 0 li */
$column_count_class = " mega-menu-columns-" . $this->column_count;
$output .= $column_count_class;
/* end */
$this->column_count = 0;
}
$output .= "</li>";
}
}I was wondering if some one could help me with this.
I was trying to add the attribute data-role=”none” to the
- class=”sub-menu” using Walker Class. However im stuck.
here is my html output…
<li id=”menu-item-132″ class=”menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-21 current_page_item menu-item-has-children menu-item-132″>About
<ul class=”sub-menu” style=”display: block;”>
and here is my custom walker class
class my_nav_walker extends Walker {
var $tree_type = array( ‘post_type’, ‘taxonomy’, ‘custom’ );
var $db_fields = array( ‘parent’ => ‘menu_item_parent’, ‘id’ => ‘db_id’ );
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat(“\t”, $depth);
$output .= “\n$indent<ul class=\”sub-menu\”>\n”;
}function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat(“\t”, $depth);
$output .= “$indent\n”;
}function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( “\t”, $depth ) : ”;
$class_names = $value = ”;
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = ‘menu-item-‘ . $item->ID;
$class_names = join( ‘ ‘, apply_filters( ‘nav_menu_css_class’, array_filter( $classes ), $item, $args ) );
$class_names = $class_names ? ‘ class=”‘ . esc_attr( $class_names ) . ‘”‘ : ”;
$id = apply_filters( ‘nav_menu_item_id’, ‘menu-item-‘. $item->ID, $item, $args );
$id = $id ? ‘ id=”‘ . esc_attr( $id ) . ‘”‘ : ”;
$output .= $indent . ‘<li’ . $id . $value . $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 : ”;
$atts = apply_filters( ‘nav_menu_link_attributes’, $atts, $item, $args );
$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 .’ data-role=”none”>’;
$item_output .= $args->link_before . apply_filters( ‘the_title’, $item->title, $item->ID ) . $args->link_after;
$item_output .= ”;
$item_output .= $args->after;
$output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );
}
function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= “\n”;
}
}?>
any help is appriciated
]]>I’d like to do this with php and not css or javascript. I am using the Roots theme but this should work on any theme.
If you look at function start_lvl this is the start of the sub menu ul tag. I need to add custom html on that but only on active pages. Is this possible?
class Roots_Nav_Walker extends Walker_Nav_Menu {
function check_current($classes) {
return preg_match('/(current[-_])|active|dropdown/', $classes);
}
function start_lvl(&$output, $depth = 0, $args = array()) {
$output .= "\n<ul class=\"sub-nav\">\n";
}
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
$item_html = '';
parent::start_el($item_html, $item, $depth, $args);
if ($item->is_dropdown && ($depth === 0)) {
$item_html = str_replace('<a', '<a class="dropdown-toggle" data-target="#"', $item_html);
$item_html = str_replace('</a>', '</a>', $item_html);
}
elseif (stristr($item_html, 'li class="divider')) {
$item_html = preg_replace('/<a[^>]*>.*?<\/a>/iU', '', $item_html);
}
elseif (stristr($item_html, 'li class="dropdown-header')) {
$item_html = preg_replace('/<a[^>]*>(.*)<\/a>/iU', '$1', $item_html);
}
$item_html = apply_filters('roots_wp_nav_menu_item', $item_html);
$output .= $item_html;
}
function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
$element->is_dropdown = ((!empty($children_elements[$element->ID]) && (($depth + 1) < $max_depth || ($max_depth === 0))));
if ($element->is_dropdown) {
$element->classes[] = 'dropdown';
}
parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
}
}
/**
* Remove the id="" on nav menu items
* Return 'menu-slug' for nav menu classes
*/
function roots_nav_menu_css_class($classes, $item) {
$slug = sanitize_title($item->title);
$classes = preg_replace('/(current(-menu-|[-_]page[-_])(item|parent|ancestor))/', 'active', $classes);
$classes = preg_replace('/^((menu|page)[-_\w+]+)+/', '', $classes);
$classes[] = 'menu-' . $slug;
$classes = array_unique($classes);
return array_filter($classes, 'is_element_empty');
}
add_filter('nav_menu_css_class', 'roots_nav_menu_css_class', 10, 2);
add_filter('nav_menu_item_id', '__return_null');
/**
* Clean up wp_nav_menu_args
*
* Remove the container
* Use Roots_Nav_Walker() by default
*/
function roots_nav_menu_args($args = '') {
$roots_nav_menu_args['container'] = false;
if (!$args['items_wrap']) {
$roots_nav_menu_args['items_wrap'] = '<ul class="%2$s">%3$s</ul>';
}
if (current_theme_supports('bootstrap-top-navbar') && !$args['depth']) {
$roots_nav_menu_args['depth'] = 2;
}
if (!$args['walker']) {
$roots_nav_menu_args['walker'] = new Roots_Nav_Walker();
}
return array_merge($args, $roots_nav_menu_args);
}
add_filter('wp_nav_menu_args', 'roots_nav_menu_args');