Menu Code Generator UI [Pro]

Overview

The Menu Code Generator UI is an interface for configuring, previewing, and generating code for your accordion menus.

The Menu Code Generator UI can be used to create either WordPress menu-based accordion menus, or auto-populated accordion menus.

To access the Menu Generator UI, visit Appearance > Bellows Menu in your WordPress admin, then click the Code Generator tab.

Design & Usage

The Menu Code Generator UI is designed to walk you through the workflow of configuring a menu. It helps you pick the pieces (menu source, configuration), combine them and preview the result.

The Auto Population is covered in detail in the Autopopulation Guide, so we’ll focus on the WordPress Menu based option here.

1. Choose your accordion menu content source

The first step is to decide how your menu will be populated.

WordPress Menu – the contents of the menu will be defined by a menu that you manually create and organize in the Appearance > Menus panel (a standard WordPress menu)

Auto Population – the contents of the menu will be automatically generated, based on either the Post or Term structure of your site, and the options you configure.

2. WordPress Menu – Select Configuration and Menu

Click the WordPress Menu as your menu source, and you’ll be shown options for configuring this menu source.

Configuration – set the Configuration to use for this menu. The Configuration is the set of settings that defines the look and functionality of your accordion menu. By default you will have a single Configuration – Main Configuration – but you can create Multiple Configurations

Menu – set the menu (set of menu items defined in Appearance > Menus) to be used as the content for this menu

3. Preview

As you update your settings on the left, the menu preview will refresh on the right. You can see how each of your settings changes will affect the menu in real time.

4. Copy the generated code

The Menu Code Generator UI will also continually update the shortcode and PHP code for your configured menu. When you have your menu the way you want it, just copy the shortcode and paste it in your site. Alternatively, you can use the PHP to add it to a theme template.

On this page