How to Add Custom Fields to WordPress Menu Items (Step-by-Step)

Table of Contents

1. Why You Might Need Custom Menu Fields
2. Two Ways to Add Them: Code or Plugin
3. Adding Custom Fields via Code
   • Step 1: Display the Field in the Menu Editor
   • Step 2: Save the Field Value
   • Step 3: Output the Field in the Menu
4. Example Use Case: Adding data-hystmodal Attribute
5. Adding Custom Fields with ACF (Alternative Method)
6. SEO & Accessibility Tips
7. Final Thoughts

1. Why You Might Need Custom Menu Fields

By default, WordPress lets you edit only the basics: title, URL, and a few options like “open in new tab”.

But what if you need to add attributes such as:

• data-hystmodal="#menu-services" for modal windows
• target="_blank" only for specific links
• icons, subtitles, or analytics tracking parameters

That’s where custom fields for menu items come in. They give developers more flexibility to attach extra data directly to each navigation link.

2. Two Ways to Add Them: Code or Plugin

There are two main approaches:

Method	Best For	Pros
Custom PHP code	Developers comfortable editing functions.php	Clean, lightweight, no plugins
Plugins (e.g. ACF, Menu Item Custom Fields)	Non-developers	Visual interface, no coding required

If you want full control, the code method is faster and more reliable. Let’s go through it.

3. Adding Custom Fields via Code

The process has three parts:

1. Show the field in the menu editor
2. Save its value when you hit “Save Menu”
3. Display it on the frontend

Step 1: Display the Field in the Menu Editor

Add this snippet to your functions.php (or a small plugin):

add_action( 'wp_nav_menu_item_custom_fields', function( $item_id, $item ) {
  $value = get_post_meta( $item_id, '_menu_item_hystmodal', true );
  ?>
  <p class="field-custom description description-wide">
    <label for="edit-menu-item-hystmodal-<?php echo esc_attr( $item_id ); ?>">
      data-hystmodal<br>
      <input type="text" id="edit-menu-item-hystmodal-<?php echo esc_attr( $item_id ); ?>"
             name="menu-item-hystmodal[<?php echo esc_attr( $item_id ); ?>]"
             value="<?php echo esc_attr( $value ); ?>"
             class="widefat code edit-menu-item-custom" placeholder="#id" />
    </label>
  </p>
  <?php
}, 10, 2 );

Now you’ll see a new input called data-hystmodal for every menu item in Appearance → Menus.

Step 2: Save the Field Value

add_action( 'wp_update_nav_menu_item', function( $menu_id, $menu_item_db_id ) {
  if ( isset( $_POST['menu-item-hystmodal'][ $menu_item_db_id ] ) ) {
    $value = sanitize_text_field( $_POST['menu-item-hystmodal'][ $menu_item_db_id ] );
    update_post_meta( $menu_item_db_id, '_menu_item_hystmodal', $value );
  } else {
    delete_post_meta( $menu_item_db_id, '_menu_item_hystmodal' );
  }
}, 10, 2 );

This ensures your value is saved in the database as _menu_item_hystmodal.

Step 3: Output the Field in the Menu

Finally, read this field in your custom Walker or use the nav_menu_link_attributes filter:

add_filter( 'nav_menu_link_attributes', function( $atts, $item, $args, $depth ) {
  $hystmodal = get_post_meta( $item->ID, '_menu_item_hystmodal', true );
  if ( ! empty( $hystmodal ) ) {
    $atts['data-hystmodal'] = esc_attr( $hystmodal );
  }
  return $atts;
}, 10, 4 );

That’s it — the attribute will now appear automatically in your rendered menu.

4. Example Use Case: Adding data-hystmodal Attribute

If you’re using modals or dynamic pop-ups (e.g. with HystModal.js), this is a clean and scalable solution.

Example output:

<li class="header-menu__item">
  <a href="/services/" class="header-menu__link" data-hystmodal="#menu-services">Services</a>
</li>

You can repeat this pattern for any attribute: data-analytics, data-scroll, aria-label, etc.

5. Adding Custom Fields with ACF (Alternative Method)

If you prefer not to touch code, install Advanced Custom Fields and:

1. Create a new field group.
2. Set Location → Menu Item.
3. Add a text field called data_hystmodal.
4. In your theme, output it with:

$hystmodal = get_field( 'data_hystmodal', $item );
if ( $hystmodal ) {
  echo ' data-hystmodal="' . esc_attr( $hystmodal ) . '"';
}

This works identically, just managed through ACF’s admin UI.

6. SEO & Accessibility Tips

• Keep custom attributes valid — use data-* or aria-* only.
• Avoid adding visual data (like icons) directly via attributes — use CSS classes instead.
• Test with screen readers if you modify navigation behaviour.

7. Final Thoughts

Adding custom fields to WordPress menu items unlocks a whole new level of flexibility — you can inject data attributes, custom classes, or even build fully dynamic navigation systems.

If you’re developing a modern theme (like I often do for Australian businesses), this approach keeps your menus clean, structured, and SEO-friendly.