Getting started – Divided Menus

NOTE: This documentation is also included in the /documentation/ folder with your plugin download, and is easier to read in that format.

DIVIDED MENUS

A fairly common website design pattern you may see online calls for the header navigation menu to be placed left and right of a central object, like the site logo. WP Nav Plus makes it very easy to build out these “divided menus.”

Build a divided menu with WP Nav Plus using one of the two following methods:

Easy Method (Widget)

The easiest way to get up and running quickly with WP Nav Plus is to make use of the widget. In this section I will show you how to implement a basic divided menu using the WP Nav Plus widget.

1. Login to your WordPress Admin page (usually https://yourdomain.com/wp-admin)
2. Navigate to the Widgets screen (Under “Appearance”)
3. Notice the new widget called “WP Nav Plus” (pictured below)
   
4. Click and drag this widget into the desired sidebar placement (pictured below). NOTE: My sidebar is called “Primary Sidebar”, your sidebar may be named differently. Please see your theme documentation for additional details about your sidebars.
   
5. Add your divider html into the provided textarea.
6. Congratulations, your widget has been successfully installed! Configure the Divider HTML, and Divider Offset as needed to reach your desired output.

Advanced Method (Function)

The documentation above has focused on using the WP Nav Plus widget as the easiest way to get started with WP Nav Plus. However for advanced users who want more control over the output of their menu, WP Nav Plus can be used with the built in WordPress wp_nav_menu function

WP Nav Plus adds five arguments to the wp_nav_menu function for use with divided menus.

• option: divider_html
• type: string
• default: false
• desctiption: Enter any HTML here that you wish to be injected into your menu. WP Nav Plus will wrap your entered html with a container and place it into the middle of your menu output.

• option: divider_offset
• type: int
• default: 0
• desctiption: The Divider HTML will automatically try to place itself into the middle of your menu output, however this can be tweaked using the divider_offset. Pass a positive number to move your Divider HTML down the DOM structure. Pass a negative number to move your Divider HTML up the DOM structure.

• option: divider_class
• type: string
• default: menu-divider-item
• desctiption: Override the Divider HTML element default class with any class name of your choice.

• option: divider_id
• type: string
• default: false
• desctiption: Add an ID to your Divider HTML element.

• option: divider_container
• type: string
• default: li
• desctiption: Override the Divider container type with any valid HTML element of your choice.

Basic Example:

$divider_html = '<a href="/"><img src="/path/to/my/logo.png" /></a>';

wp_nav_menu(
	array(
		'theme_location' => 'my_menu',
		'divider_html' => $divider_html
	)
);

The above example would create a menu with the $divider_html specified above in the middle of the markup. Use divider_offset to tweak the position of the $divider_html.