Components of a Menu Instance
There are multiple components that come together to generate the accordion menu that you see on the front end of your site
In short:
WordPress Menu Structure + Bellows Configuration → Accordion Menu
1. A WordPress Menu (The Content)
In your WordPress admin, under Appearance > Menus, you will design your menu structure. This is best thought of as simply a collection of menu items organized into a hierarchy, which will make up the content of your menu. It’s basically an outline/tree. This is the core WordPress menu system, which allows you to design your menu’s structure in a standard way. What Bellows does is then adds a presentation layer which takes the collection of menu items you’ve created and displays them on the front end in an accordion menu interface.
Side note: as a Pro user, if you’re using the Autopopulation feature, rather than explicitly building your menu item collection in the Apperance > Menus screen, the collection of menu items is automatically generated based on the Query you define in the Menu Generator. Same concept, different source.
2. Control Panel Settings (The Style and Functionality)
The Control Panel has two types of settings – those that control a specific Configuration, and those that control Bellows menus globally.
Configuration Settings
A Configuration is a group of settings that can be applied to a specific menu. Bellows comes with a main configuration, but you can create as many as you like, and they are reusable. So you could create Configuration 1 with a pink skin and left alignment, and Configuration 2 with a blue skin and right alignment. Then you could apply those skins to different accordion menu instances on your site.
These Configuration settings include
- Skin
- Accordion folding
- Current submenu expansion
- Layout/positioning
- Image sizes
- Customizer settings (colors)
- Font
General Settings
The settings in the General Settings tab are global settings that apply to the plugin in general or all accordion menus. This includes
- Custom CSS
- Asset loading
- Admin notices
3. Individual Menu Item Settings
Bellows-specific menu items are accessed on the Appearance > Menus screen by clicking on the Bellows button that appears when hovering over any menu item.
These settings are optional, but allow you to control settings specific to the individual menu item, like setting icons, images, custom content, disabling the link, and more
All together now
Putting it all together, the accordion menu on the front end is the result of the Bellows plugin taking a set of menu items (from the WordPress Menus screen), applying a Bellows configuration, and then tweaking individual menu items with their specific settings to get the final result.
The different integration options (Shortcode, Widget, PHP), simply take your choice of Configuration and Menu Item Collection (menu or autopoulation) and pass it off to Bellows for processing.
Let’s take the shortcode as an example, though the same parameters would be passed to widgets (via the widget settings) or PHP (as function parameters). With the shortcode, you set the Configuration and Menu to produce a specific output (remember you can use the settings in the Control Panel to generate this shortcode for you to simply copy/paste, but it’s good to understand what’s going on):
[bellows config_id="main" menu="27"]
By changing the configuration, you can display the same menu items in a different style:
[bellows config_id="secondary" menu="27"]
Or you can use the same configuration with a different set of menu items to create a menu that has the same style, but with different contents:
[bellows config_id="main" menu="26"]
If you’re wondering why things are done this way, the answer is flexibility. By separating content, style, and function, it means you can reuse these components in different ways and eliminate redundancy, making your complex tasks more efficient.