wp_nav_menu_item_custom_fields

Description

Usage

add_action( 'wp_nav_menu_item_custom_fields', 'your_function_name', 10, 5 );

Parameters

$item_id (mixed)

The ID of the menu item being edited.

$item (mixed)

The `$item_id` parameter represents the unique identifier of the menu item currently being processed.

$depth (mixed)

This parameter contains the menu item object itself, providing access to all its properties like title, URL, and status.

$args (mixed)

This parameter represents the current depth of the menu item being processed within the navigation menu.

$id (mixed)

This parameter contains an object of the current menu item being edited.

Examples

<?php
/**
 * Add a custom field to menu items to specify a custom CSS class.
 *
 * This function hooks into the 'wp_nav_menu_item_custom_fields' action,
 * which fires after the standard menu item fields are displayed in the
 * WordPress admin menu editor. It adds an input field where users can
 * enter a custom CSS class for a specific menu item.
 *
 * @param int    $item_id The ID of the menu item.
 * @param object $item    The menu item object.
 * @param int    $depth   The depth of the menu item.
 * @param array  $args    An array of arguments for the menu.
 * @param int    $id      The ID of the menu.
 */
function my_custom_menu_item_class_field( $item_id, $item, $depth, $args, $id ) {
    // Retrieve the previously saved custom class for this menu item.
    $custom_class = get_post_meta( $item_id, '_menu_item_custom_class', true );

    // Output the HTML for the custom field.
    ?>
    <p class="field-custom-class description description-wide">
        <label for="edit-menu-item-custom-class-<?php echo esc_attr( $item_id ); ?>">
            <?php _e( 'Custom CSS Class' ); ?>
            <input type="text"
                   id="edit-menu-item-custom-class-<?php echo esc_attr( $item_id ); ?>"
                   class="widefat code edit-menu-item-custom-class"
                   name="menu-item-custom-class[<?php echo esc_attr( $item_id ); ?>]"
                   value="<?php echo esc_attr( $custom_class ); ?>" />
            <span class="description"><?php _e( 'Optional: Enter any custom CSS classes to apply to this menu item.' ); ?></span>
        </label>
    </p>
    <?php
}
add_action( 'wp_nav_menu_item_custom_fields', 'my_custom_menu_item_class_field', 10, 5 );

/**
 * Save the custom CSS class field data when a menu item is updated.
 *
 * This function hooks into the 'wp_update_nav_menu_item' action and
 * saves the submitted custom CSS class to the menu item's post meta.
 *
 * @param int $menu_id The ID of the menu being updated.
 * @param int $item_id The ID of the menu item being updated.
 */
function my_custom_menu_item_class_save( $menu_id, $item_id ) {
    // Check if the custom class data was submitted.
    if ( isset( $_POST['menu-item-custom-class'][$item_id] ) ) {
        $custom_class = sanitize_text_field( $_POST['menu-item-custom-class'][$item_id] );
        update_post_meta( $item_id, '_menu_item_custom_class', $custom_class );
    } else {
        // If not submitted, ensure it's deleted or empty.
        delete_post_meta( $item_id, '_menu_item_custom_class' );
    }
}
add_action( 'wp_update_nav_menu_item', 'my_custom_menu_item_class_save', 10, 2 );

/**
 * Add custom CSS classes to menu items when rendering the menu.
 *
 * This function hooks into the 'nav_menu_css_class' filter to add
 * our saved custom CSS class to the array of classes for a menu item.
 *
 * @param array $classes An array of CSS classes for the menu item.
 * @param object $item The menu item object.
 * @param array $args An array of arguments for the menu.
 * @param int $depth The depth of the menu item.
 * @return array The modified array of CSS classes.
 */
function my_custom_menu_item_class_render( $classes, $item, $args, $depth ) {
    // Retrieve the custom class from post meta.
    $custom_class = get_post_meta( $item->ID, '_menu_item_custom_class', true );

    // If a custom class exists, add it to the $classes array.
    if ( ! empty( $custom_class ) ) {
        // Ensure we're not adding duplicates and split if multiple classes are entered.
        $classes = array_unique( array_merge( $classes, explode( ' ', $custom_class ) ) );
    }

    return $classes;
}
add_filter( 'nav_menu_css_class', 'my_custom_menu_item_class_render', 10, 4 );
?>

Placement

This code should be placed in the functions.php file of your active theme, a custom plugin, or using a code snippets plugin.

Source Code

src/includes/custom-walker-nav-menu.php:199

<span class="description"><?php _e('The description will be displayed in the menu if the current theme supports it.'); ?></span>
					</label>
				</p>

				<?php
				// This is the added section
				//do_action( 'wp_nav_menu_item_uo_fields', $item_id, $item, $depth, $args );
				do_action( 'wp_nav_menu_item_custom_fields', $item_id, $item, $depth, $args, $id );
				// end added section
				?>

				<fieldset class="field-move hide-if-no-js description description-wide">
					<span class="field-move-visual-label" aria-hidden="true"><?php _e( 'Move' ); ?></span>
					<button type="button" class="button-link menus-move menus-move-up" data-dir="up"><?php _e( 'Up one' ); ?></button>
					<button type="button" class="button-link menus-move menus-move-down" data-dir="down"><?php _e( 'Down one' ); ?></button>