Usage

How to use the Menu handler plugin in your theme's menu.

Installation

Normal WP plugin install and activation.

Then the plugin adds fields to the normal menu items, found in Appearance > Menu

The plugin adds support, doesn't modify the theme.

Example usage

This menu item is related to the Sports section and marked red.

What it does

The menu handler plugin can be used to return color and section values with the menu item.

This is what the plugin does:

/**
 * Define menu custom field value for color.
 */    
public function add_custom_nav_field_color( $menu_item ) {
  $menu_item->color = get_post_meta( $menu_item->ID, '_menu_item_color', true );
  return $menu_item;
}

/**
 * Define menu custom field value for section.
 */    
public function add_custom_nav_field_section( $menu_item ) {
  $menu_item->section = get_post_meta( $menu_item->ID, '_menu_item_section', true );
  return $menu_item;
}

Example of how these might be used in a template

{% block main_menu_nav %}
	<ul class="navbar-nav mr-auto flex-row navbar-nav-main" aria-expanded="true">
		{% for item in menu %}
			<li class="nav-item {% if get_permalink()|lower == item.url|lower  %}active{% endif %}">
				<a class="nav-link" data-color="{{ item.color }}" data-section="{{ item.section }}" href="{{ item.url }}" id="menu-id-{{ item.ID }}">{{ item.title }}
				</a>
			</li>
		{% endfor %}
	</ul>
{% endblock %}

Using it in your own custom theme

Your theme might be different and might have a different menu set-up. This plugin gives you the option to set the values and you can do with them what you want.

In the theme you could use it like this:

if ($id . ‘menu_item_color’) {
  //do this
}