How to add a custom field in the advanced menu properties?

This will add a custom field to the menu item edit. However, you will not see the custom field until you have saved the menu for the newly added menu item. When you first add an item, you will only see the standard fields. After save, the new field will be available also for edit. If you add additional menu items, you will again have to save the menu to see and edit the custom field for the newly added items. I hope that explanation makes sense.

I was able to create and user a custom walker for creating the menu item edit fields. When you first add a menu item to the menu it seems to be entirely creating it with jQuery instead of the walker which is why you won’t see the custom field until after save.

I have creatively called the custom field I added “custom”. So you can change/edit/duplicate for whatever values you need. There are comments in the walker to show where I added the new field.

I hope this is helpful.

<?php
/**
 * @package nav-menu-custom-fields
 * @version 0.1.0
 */
/*
Plugin Name: Nav Menu Custom Fields
*/

/*
 * Saves new field to postmeta for navigation
 */
add_action('wp_update_nav_menu_item', 'custom_nav_update',10, 3);
function custom_nav_update($menu_id, $menu_item_db_id, $args ) {
    if ( is_array($_REQUEST['menu-item-custom']) ) {
        $custom_value = $_REQUEST['menu-item-custom'][$menu_item_db_id];
        update_post_meta( $menu_item_db_id, '_menu_item_custom', $custom_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','custom_nav_item' );
function custom_nav_item($menu_item) {
    $menu_item->custom = get_post_meta( $menu_item->ID, '_menu_item_custom', 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) {}

/**
 * @see Walker_Nav_Menu::end_lvl()
 * @since 3.0.0
 *
 * @param string $output Passed by reference.
 */
function end_lvl(&$output) {
}

/**
 * @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, $args) {
    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)' ), $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 = empty( $item->label ) ? $title : $item->label;

    ?>
    <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"><?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="https://wordpress.stackexchange.com/questions/33342/<?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'); ?>">&#8593;</abbr></a>
                        |
                        <a href="https://wordpress.stackexchange.com/questions/33342/<?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'); ?>">&#8595;</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" 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>
            <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
            /*
             * This is the added field
             */
            ?>      
            <p class="field-custom description description-wide">
                <label for="edit-menu-item-custom-<?php echo $item_id; ?>">
                    <?php _e( 'Custom' ); ?><br />
                    <input type="text" id="edit-menu-item-custom-<?php echo $item_id; ?>" class="widefat code edit-menu-item-custom" name="menu-item-custom[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->custom ); ?>" />
                </label>
            </p>
            <?php
            /*
             * end added field
             */
            ?>
            <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,
                        ),
                        remove_query_arg($removed_args, admin_url( 'nav-menus.php' ) )
                    ),
                    'delete-menu_item_' . $item_id
                ); ?>"><?php _e('Remove'); ?></a> <span class="meta-sep"> | </span> <a class="item-cancel submitcancel" id="cancel-<?php echo $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 $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();
    }
}

?>

Related Posts:

  1. Adding a custom field to the site identity menu
  2. Add meta data to the menu
  3. Create a select drop down of available menus
  4. Dynamic User State & City selection
  5. Creating a custom menu/widget area
  6. Nav Menu – Add class based on meta keys
  7. Add image to menu item with ACF
  8. Declaring in variables [closed]
  9. How to add a custom field in the advanced menu properties?
  10. Walker class for sub-menu with ACF fields
  11. Populate wordpress menu with link to custom field value (file download)
  12. Show Custom field value instead of title in WP Menu
  13. How to make menu country specific?
  14. How to check custom fields from functions.php
  15. Override edit_custom_walker.php to conditionally show input depending on menu position
  16. How to use page metadata while using wp_list_pages()?
  17. Add custom fields to specific menus
  18. Add CSS class to posts with certain meta key
  19. WP_Query – Order results by meta value
  20. How to filter post listing (in WP dashboard posts listing) using a custom field (search functionality)?
  21. What is “meta_input” parameter in wp_insert_post() used for?
  22. Query Posts or Get Posts by custom fields, possible?
  23. Saving custom data for each user
  24. How can I append custom data to images in the editor?
  25. How do you add a custom option to user data?
  26. Fetch and show multiple custom fields via AJAX
  27. Filter results with custom field values and dropdown
  28. Retrieve custom fields on Categories, using WP-API
  29. Order by custom field date?
  30. can you set a default value to a custom field
  31. Adding Properties to User Profile and Displaying in List
  32. use get_posts to get custom field data, but in one array
  33. automatically set “Featured Image” the same as the og:i that is set in a custom field
  34. Display value of custom field not working
  35. WP_query : meta_key with custom rule for specific value
  36. How to get the db table row that has the biggest value in the meta value?
  37. making sense of admin-ajax
  38. Add url from Custom Field as ‘Featured Image’. Code not working
  39. Metabox will not save
  40. Masking Affiliate URL using $post_slug after “/go/”
  41. How to update a meta field of type array in Gutenberg
  42. Create WordPress shortcode with php code inside
  43. Bulk remove post meta
  44. Is it better practice to use ‘This Name Format’ or ‘this-name-format’ for custom fields?
  45. Storing a DateTime Value in a Sortable Custom Field?
  46. WordPress Rest API to call page data associate with custom meta
  47. How to show a post if was published less than two hours ago?
  48. Custom field as Slug
  49. How to save the date/time of last update of an extra user profile field?
  50. How to populate custom field dropdown box based on prior selection?
  51. Define a post’s title and slug from Custom Fields
  52. How can you include custom post meta in search without calling each key?
  53. Custom wysiwyg editor doesn’t execute shortcodes?
  54. How to hide a div based on contents of custom field
  55. Hook after meta created
  56. What is the largest value you can store in a custom field (as meta data for a post)?
  57. Where does this field get its value?
  58. Get all the posts where meta field with multiple choice has several values checked
  59. Warn user that data may be lost for custom pages
  60. List custom field values ​​in alphabetical order without repetition
  61. Can’t query by meta_key
  62. Display MP3 as media using an URL from a custom field
  63. Inserting data into MagicFields using mysql queries
  64. Custom Field box history
  65. WordPress custom fields feature is missing in my installation
  66. Print Posts if Custom Field Value Date equal or greater than Today Date
  67. Update post meta custom field using block editor
  68. If I update WordPress my custom data will be deleted from the wp_users table?
  69. Get emails from users by custom field SQL
  70. Convert all dates stored in custom field
  71. Why am I getting a “Call to member function format() on a non-object” error?
  72. Plugin or shortcode for ISBN number?
  73. HM CMB: Role Select
  74. WP-eComerce Advance Meta Tag data in descending order [closed]
  75. Custom Query Fields – Altering Meta Value
  76. Adding re-type email and check it if the email match
  77. show a specific metabox dependent on the page template
  78. excluding posts by an ACF field in pagination
  79. Search & column order by meta value in admin
  80. Exclude URL’s from sanitize_html_classes
  81. Best way to insert a list of links into a post outside of the_content
  82. How to add a post’s view count into the WordPress API response
  83. How can I ‘check’ the “custom fields” box from the Screen Options?
  84. How to get all wp_posts in wordpress fetched from database
  85. Update custom field on the fly
  86. Search fails when using the radio buttons
  87. automatically add custom fields to post title
  88. Custom Fields Permalink Plugin not observing hyphens
  89. will wp_insert_post write a new custom field to the database?
  90. How to repeate custom field group with bulk image field
  91. Extra text’n’image field in a page
  92. Get first URL from custom field, download and set as featured image on post publish
  93. Media Attachment Custom Meta Fields not saving in Media Uploader when using jQuery UI Autocomplete
  94. How to add an option to admin to add image that could be used as header?
  95. Include custom fields into the content of a regular page
  96. Bypassing a Form Options
  97. How to query posts that have certain post meta keys, and sort by meta key and/or value
  98. How to implement jquery-ui autocomplete into custom fields?
  99. Add image custom attribute [closed]
  100. Foreach giving one too many list items, how can I remove the last empty line?

Leave a Comment

tech