How to add classes to Wordpress navigation menu items based on custom advanced menu options
Question
I found this code which has allowed me to add custom fields to the advanced options in the Wordpress menu editor:
/*
* Saves new field to postmeta for navigation
*/
add_action('wp_update_nav_menu_item', 'megamenu_nav_update',10, 3);
function megamenu_nav_update($menu_id, $menu_item_db_id, $args ) {
if ( is_array($_REQUEST['menu-item-megamenu']) ) {
$megamenu_value = $_REQUEST['menu-item-megamenu'][$menu_item_db_id];
update_post_meta( $menu_item_db_id, '_menu_item_megamenu', $megamenu_value );
}
if ( is_array($_REQUEST['menu-item-megamenu_col']) ) {
$megamenu_col_value = $_REQUEST['menu-item-megamenu_col'][$menu_item_db_id];
update_post_meta( $menu_item_db_id, '_menu_item_megamenu_col', $megamenu_col_value );
}
if ( is_array($_REQUEST['menu-item-megamenu_alignment']) ) {
$megamenu_alignment_value = $_REQUEST['menu-item-megamenu_alignment'][$menu_item_db_id];
update_post_meta( $menu_item_db_id, '_menu_item_megamenu_alignment', $megamenu_alignment_value );
}
}
/*
* Adds value of new field to $item object that will be passed to Walker_Nav_Menu_Edit_Custom
*/
add_filter( 'wp_setup_nav_menu_item','megamenu_nav_item' );
function megamenu_nav_item($menu_item) {
$menu_item->megamenu = get_post_meta( $menu_item->ID, '_menu_item_megamenu', true );
$menu_item->megamenu_col = get_post_meta( $menu_item->ID, '_menu_item_megamenu_col', true );
$menu_item->megamenu_alignment = get_post_meta( $menu_item->ID, '_menu_item_megamenu_alignment', true );
return $menu_item;
}
add_filter( 'wp_edit_nav_menu_walker', 'custom_nav_edit_walker',10,2 );
function custom_nav_edit_walker($walker,$menu_id) {
return 'Walker_Nav_Menu_Edit_Custom';
}
/**
* Copied from Walker_Nav_Menu_Edit class in core
*
* Create HTML list of nav menu input items.
*
* @package WordPress
* @since 3.0.0
* @uses Walker_Nav_Menu
*/
class Walker_Nav_Menu_Edit_Custom extends Walker_Nav_Menu {
/**
* @see Walker_Nav_Menu::start_lvl()
* @since 3.0.0
*
* @param string $output Passed by reference.
*/
function start_lvl(&$output, $depth = 0, $args = array()) {
}
/**
* @see Walker_Nav_Menu::end_lvl()
* @since 3.0.0
*
* @param string $output Passed by reference.
*/
function end_lvl(&$output, $depth = 0, $args = array()) {
}
/**
* @see Walker::start_el()
* @since 3.0.0
*
* @param string $output Passed by reference. Used to append additional content.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param object $args
*/
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;
$indent = ( $depth ) ? str_repeat( "\t", $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 = $original_object->post_title;
}
$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)','rdesign' ), $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)','rdesign'), $item->title );
}
$title = empty( $item->label ) ? $title : $item->label;
?>
<li id="menu-item-<?php echo esc_attr($item_id); ?>" class="<?php echo implode(' ', $classes ); ?>">
<dl class="menu-item-bar">
<dt class="menu-item-handle">
<span class="item-title"><?php echo esc_html( $title ); ?></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( esc_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','rdesign'); ?>">↑</abbr></a>
|
<a href="<?php
echo wp_nonce_url(
esc_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','rdesign'); ?>">↓</abbr></a>
</span>
<a class="item-edit" id="edit-<?php echo esc_attr($item_id); ?>" title="<?php esc_attr_e('Edit Menu Item','rdesign'); ?>" href="<?php
echo ( isset( $_GET['edit-menu-item'] ) && $item_id == $_GET['edit-menu-item'] ) ? admin_url( 'nav-menus.php' ) : esc_url( 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','rdesign' ); ?></a>
</span>
</dt>
</dl>
<div class="menu-item-settings" id="menu-item-settings-<?php echo esc_attr($item_id); ?>">
<?php if( 'custom' == $item->type ) : ?>
<p class="field-url description description-wide">
<label for="edit-menu-item-url-<?php echo esc_attr($item_id); ?>">
<?php _e( 'URL','rdesign' ); ?><br />
<input type="text" id="edit-menu-item-url-<?php echo esc_attr($item_id); ?>" class="widefat code edit-menu-item-url" name="menu-item-url[<?php echo esc_attr($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 esc_attr($item_id); ?>">
<?php _e( 'Navigation Label','rdesign' ); ?><br />
<input type="text" id="edit-menu-item-title-<?php echo esc_attr($item_id); ?>" class="widefat edit-menu-item-title" name="menu-item-title[<?php echo esc_attr($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 esc_attr($item_id); ?>">
<?php _e( 'Title Attribute','rdesign' ); ?><br />
<input type="text" id="edit-menu-item-attr-title-<?php echo esc_attr($item_id); ?>" class="widefat edit-menu-item-attr-title" name="menu-item-attr-title[<?php echo esc_attr($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 esc_attr($item_id); ?>">
<input type="checkbox" id="edit-menu-item-target-<?php echo esc_attr($item_id); ?>" value="_blank" name="menu-item-target[<?php echo esc_attr($item_id); ?>]"<?php checked( $item->target, '_blank' ); ?> />
<?php _e( 'Open link in a new window/tab','rdesign' ); ?>
</label>
</p>
<p class="field-css-classes description description-thin">
<label for="edit-menu-item-classes-<?php echo esc_attr($item_id); ?>">
<?php _e( 'CSS Classes (optional)','rdesign' ); ?><br />
<input type="text" id="edit-menu-item-classes-<?php echo esc_attr($item_id); ?>" class="widefat code edit-menu-item-classes" name="menu-item-classes[<?php echo esc_attr($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 esc_attr($item_id); ?>">
<?php _e( 'Link Relationship (XFN)','rdesign' ); ?><br />
<input type="text" id="edit-menu-item-xfn-<?php echo esc_attr($item_id); ?>" class="widefat code edit-menu-item-xfn" name="menu-item-xfn[<?php echo esc_attr($item_id); ?>]" value="<?php echo esc_attr( $item->xfn ); ?>" />
</label>
</p>
<?php
/* New fields insertion starts here */
?>
<p class="field-megamenu-status description description-wide">
<label for="edit-menu-item-megamenu-<?php echo esc_attr($item_id); ?>">
<input type="checkbox" id="edit-menu-item-megamenu-<?php echo esc_attr($item_id); ?>" value="megamenu" name="menu-item-megamenu[<?php echo esc_attr($item_id); ?>]"<?php checked( $item->megamenu, 'megamenu' ); ?> />
<?php _e( 'Enable megamenu','rdesign' ); ?>
</label>
</p>
<p class="field-megamenu-columns description description-wide">
<label for="edit-menu-item-megamenu_col-<?php echo esc_attr($item_id); ?>">
<?php _e( 'Megamenu columns (from 2 to 6)','rdesign' ); ?><br />
<?php $saved_megamenu_col = esc_attr( $item->megamenu_col ); ?>
<select id="edit-menu-item-megamenu_col-<?php echo esc_attr($item_id); ?>" class="widefat code edit-menu-item-custom" name="menu-item-megamenu_col[<?php echo esc_attr($item_id); ?>]">
<option value="2" <?php if($saved_megamenu_col == "2"){echo("selected");} ?>>2</option>
<option value="3" <?php if($saved_megamenu_col == "3"){echo("selected");} ?>>3</option>
<option value="4" <?php if($saved_megamenu_col == "4"){echo("selected");} ?>>4</option>
<option value="5" <?php if($saved_megamenu_col == "5"){echo("selected");} ?>>5</option>
<option value="6" <?php if($saved_megamenu_col == "6"){echo("selected");} ?>>6</option>
</select>
</label>
</p>
<p class="field-megamenu-alignment description description-wide">
<label for="edit-menu-item-megamenu_alignment-<?php echo esc_attr($item_id); ?>">
<?php _e( 'Megamenu alignment','rdesign' ); ?><br />
<?php $saved_megamenu_alignment = esc_attr( $item->megamenu_alignment ); ?>
<select id="edit-menu-item-megamenu_alignment-<?php echo esc_attr($item_id); ?>" class="widefat code edit-menu-item-custom" name="menu-item-megamenu_alignment[<?php echo esc_attr($item_id); ?>]">
<option value="left" <?php if($saved_megamenu_alignment == "left"){echo("selected");} ?>>Left</option>
<option value="center" <?php if($saved_megamenu_alignment == "center"){echo("selected");} ?>>Center</option>
<option value="right" <?php if($saved_megamenu_alignment == "right"){echo("selected");} ?>>Right</option>
<option value="space-around" <?php if($saved_megamenu_alignment == "space-around"){echo("selected");} ?>>Space Around</option>
<option value="space-evenly" <?php if($saved_megamenu_alignment == "space-evenly"){echo("selected");} ?>>Space Evenly</option>
<option value="space-between" <?php if($saved_megamenu_alignment == "space-between"){echo("selected");} ?>>Space Between</option>
</select>
</label>
</p>
<?php
/* New fields insertion ends here */
?>
<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','rdesign'), '<a href="' . esc_attr( $item->url ) . '">' . esc_html( $original_title ) . '</a>' ); ?>
</p>
<?php endif; ?>
<a class="item-delete submitdelete deletion" id="delete-<?php echo esc_attr($item_id); ?>" href="<?php
echo wp_nonce_url(
esc_url( add_query_arg(
array(
'action' => 'delete-menu-item',
'menu-item' => $item_id,
),
remove_query_arg($removed_args, admin_url( 'nav-menus.php' ) ) )
),
'delete-menu_item_' . $item_id
); ?>"><?php _e('Remove','rdesign'); ?></a> <span class="meta-sep"> | </span> <a class="item-cancel submitcancel" id="cancel-<?php echo esc_attr($item_id); ?>" href="<?php echo esc_url( add_query_arg( array('edit-menu-item' => $item_id, 'cancel' => time()), remove_query_arg( $removed_args, admin_url( 'nav-menus.php' ) ) ) );
?>#menu-item-settings-<?php echo esc_attr($item_id); ?>"><?php _e('Cancel','rdesign'); ?></a>
</div>
<input class="menu-item-data-db-id" type="hidden" name="menu-item-db-id[<?php echo esc_attr($item_id); ?>]" value="<?php echo esc_attr($item_id); ?>" />
<input class="menu-item-data-object-id" type="hidden" name="menu-item-object-id[<?php echo esc_attr($item_id); ?>]" value="<?php echo esc_attr( $item->object_id ); ?>" />
<input class="menu-item-data-object" type="hidden" name="menu-item-object[<?php echo esc_attr($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 esc_attr($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 esc_attr($item_id); ?>]" value="<?php echo esc_attr( $item->menu_order ); ?>" />
<input class="menu-item-data-type" type="hidden" name="menu-item-type[<?php echo esc_attr($item_id); ?>]" value="<?php echo esc_attr( $item->type ); ?>" />
</div><!-- .menu-item-settings-->
<ul class="menu-item-transport"></ul>
<?php
$output .= ob_get_clean();
}
}
This code has allowed me to add a checkbox field to enable Megamenu, a dropdown field to select 2 - 6 columns for the Megamenu and a dropdown field to select the megamenu item alignment.
What I need to know now, however, is having saved these options, how can I now add classes to the navigation menu items based on the saved values? ie, if Megamenu is enabled, I need the class "mega-menu" to be added to the menu item <li>.
1 answers
solution1
0 2020-11-10 08:48:54
Ok, I have managed to get this working using the following code:
add_filter('nav_menu_css_class' , 'megamenu_nav_classes' , 10 , 2);
function megamenu_nav_classes($classes, $item){
$item_id = esc_attr( $item->ID );
$mega_menu = $item->$megamenu['_menu_item_megamenu'][0];
$mega_menu_col = $item->$megamenu['_menu_item_megamenu_col'][0];
$mega_menu_alignment = $item->$megamenu['_menu_item_megamenu_alignment'][0];
if($mega_menu == 'megamenu'){
$classes[] = 'mega-menu';
$classes[] = 'col-'.$mega_menu_col;
$classes[] = $mega_menu_alignment;
}
return $classes;
}
This does work, but can anyone tell me if this is the best way of going about this? Or is there a better, 'cleaner' method?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Wordpress Advanced Custom Fields menu
Add custom navigation menu in wordpress template
Add a div and change the classes or navigation menu using wordpress walker?
How to select and edit (add menu items) a custom Wordpress menu in functions.php?
Add (BEM) classes to Wordpress menu list-items and anchors
Wordpress posts in menu and custom classes
WordPress: Add HTML to navigation menu
What is the best way to add a custom search form to the wordpress navigation menu?
Need to add 'active' class to custom WordPress Navigation Menu
How to add custom fields to customize menu in Wordpress
Related Tags