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

2 comments

1. 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="<?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" 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();
       }
   }
   
   ?>
   

   Log in to Reply

2. WordPress has the ability to allow post authors to assign custom fields to a post.

   http://codex.wordpress.org/Custom_Fields

   But – changing the functionality of the menu UI is probably something you’d have to do with a plugin. Not sure if WordPress supports such modifications out of the box.

   You could write a plugin that uses Javascript and adds those input fields where needed, then saves them, and adds a filter to the menu items when they are used on the site.

   Log in to Reply