Pro users can add advanced content to their individual menu items, such as Icons, Images, Custom Content (including shortcodes), and Widgets.

You can add multiple Bellows accordion menus to your site, and per page. Each Bellows menu that appears is referred to as an instance of the menu. If you have 5 accordion menus on the page, you have 5 instances of Bellows. To add multiple instances of Bellows to your site, simply add multiple shortcodes, or widgets, or PHP functions – or a combination thereof. The rendering of each instance is based on (1) a set of menu items, the “menu”, which is created either via Appearance > Menus or automatically generated via the Autopopulation functionality (Pro users only) and (2) a Configuration, which is a group of settings applied to the menu, such as the skin, toggle functionality, custom styles, etc. By default, you have one Configuration, known as the Bellows Main Configuration. So you could have 5 instances of Bellows, with 5 different menus, but all with the same configuration. That means their look and functionality would all be consistent, but their content would all be different. Bellows Pro allows you to define multiple Configurations, so you could have 5 instances of Bellows with 5 different Configurations. So your menus might have different contents and different styles (for example, a blue menu and a red menu). Learn more about creating Multiple Configurations

Overview Pro users can automatically generate accordion menus based on Taxonomy or Post hierarchies. This is in contrast to creating a menu via the interface in Appearance > Menus to use as the source of menu contents. Rather than building the menu item-by-item, you can auto-generate the menu contents menu based on your Taxonomy or Post hierarchies. Please note that Autopopulation does not provide an option to create a menu with Taxonomy parents and Post children (a mixture of the two), as this requires many database queries and would be very inefficient. Examples For example, let’s say you have a hierarchical custom post type called “Places” that looks like this: You can turn that into an accordion menu, with the shortcode [bellows_posts post_type=”place”] Or if you have a custom taxonomy called “Film Genres” that looks like this: You can turn that into an accordion menu, with the shortcode [bellows_terms taxonomies=”genre”] Learn more about: Post Hierarchy Autopopulation Taxonomy Term Hierarchy Autopopulation

Overview You can auto-generate an accordion menu based on your Pages, or hierarchical Custom Post Types (note that standard Posts are not generally useful as they are not a hierarchical post type – one post cannot be the parent of another). Generating the menu To create an auto-populated accordion menu, you can use the Menu Code Generator UI 1. Open the Menu Code Generator Go to Appearance > Bellows Menu and click on the Code Generator tab 2. Select Source: Auto Population Click the Auto Population button to build an auto-populated menu. 3. Select Content Type: Posts To create a menu based on your Post (or custom post type) hierarchy, click Posts 4. Configure your auto-population query In the Code Generator interface, use the settings on the left to filter, restrict, and organize your Post query. Hint: For those familiar with WordPress development, you are configuring a WordPress Posts query, just like the Loop. As you change settings on the left, the Preview will update on the right. The shortcode/PHP code will also update to reflect your current selections. Configuration This determines which configuration to apply to your menu. By default, you have one Configuration (Main Configuration), but you can set up Multiple Configurations if you have multiple menus that should be styled or function differently. Post Type Defaults to Pages Use the Post Type parameter to select which type of posts (Pages or a custom post type) should be displayed in the menu. Note: You can select multiple Post Types, however, bear in mind that Taxonomies tend to only apply to one Post Type, so this is generally not very useful or logical. Post Parent By default, the menu will display posts in the hierarchy beginning with root level posts (those with no parents). If you wish to only […]

Overview You can auto-generate an accordion menu based on your Categories or hierarchical custom taxonomy terms (note that standard tags are not generally useful as they are not hierarchical – one tag cannot be the parent of another). Generating the menu To create an auto-populated accordion menu, you can use the Menu Code Generator UI 1. Open the Menu Code Generator Go to Appearance > Bellows Menu and click on the Code Generator tab 2. Select Source: Auto Population Click the Auto Population button to build an auto-populated menu. 3. Select Content Type: Terms To create a menu based on your Category (or custom taxonomy) hierarchy, click Terms 4. Configure your auto-population query In the Code Generator interface, use the settings on the left to filter, restrict, and organize your Terms query. Hint: For those familiar with WordPress development, you are configuring a WordPress Terms query. It’s very similar to a Posts query that you might use in the Loop, except for taxonomies. As you change settings on the left, the Preview will update on the right. The shortcode/PHP code will also update to reflect your current selections. Configuration This determines which configuration to apply to your menu. By default, you have one Configuration (Main Configuration), but you can set up Multiple Configurations if you have multiple menus that should be styled or function differently. Taxonomy (required) Select the taxonomy from which to generate terms for this menu. In almost all cases, you will select a single taxonomy. Number The maximum number of terms to return. Depth (Menu Levels) The maximum number of levels to display. If you have 4 levels in your hierarchy, but only want to display the first two, you can set this value to 2. Offset If you were to set the offset to 2 and […]

1. Download the plugin First, download the plugin as a zip file from the link in your purchase receipt or your account downloads page. 2. Begin the installation Go to your WordPress admin panel and navigate to Plugins > Add New 3. Upload & Install the plugin Click Upload Plugin Then click “Choose File” or drag your .zip file onto the Choose File button. Then click Install Now 4. Activate the plugin When the installation completes, click Activate Plugin Installation Complete The plugin is now installed and activated. You can visit the Appearance > Bellows Menu panel to get started using the plugin.

A high level overview of how the Bellows Accordion Menu plugin works

You can use the WordPress Customizer to customize certain Bellows settings. The Customizer Screen In your admin panel, visit Appearance > Customize. Or on the top admin bar, just click the “Customize” button. On the left side of the screen, click one of the Bellows sections. There will be one section for each Configuration you create. By default, there will be 1 Configuration – Bellows [main]. Inside the Bellows configuration section, you will see multiple sub sections. Previewing and Saving Each subsection has various settings you can configure. When you change a setting, a preview will appear on the right of the screen. Once you are satisfied with your changes, you can click Save & Publish to make your changes live on your site. If you want to discard your changes, just close the Customizer. General The General section is for settings that apply to the menu globally, including the Skin, Folding, Alignment, etc. For example, change the skin and preview the result Top Level Styles These settings are available in Bellows Pro The Top Level Styles section controls the styles specifically of the top level of the menu – the part visible when all submenus are collapsed. These settings will override the styles for the currently selected skin. You can change the colors however you like Submenu Styles These settings are available in Bellows Pro The Submenu Styles section specifically focuses on the styles of submenus and their items. These settings will override the styles for the currently selected skin. You can change the styles and preview them before applying. Font These settings are available in Bellows Pro The font section allows you to change and preview the Font Remember, this does not actually load any font assets, it just set the CSS font-family property.

You can add custom CSS styles quickly and easily through the Bellows Control Panel. Visit Bellows Control Panel > General Settings > Custom CSS Place any styles in the Custom CSS Tweaks These styles will be placed in the site <head> after the plugin’s stylesheets and Customizer-generated CSS so that these styles will override the standard plugin styles with the same specificity.

Bellows Pro includes the Font Awesome Icon set which allows you to place an icon beside any item in your menu. To set an icon, open the Menu Item Settings panel by hovering over the item you wish to edit and clicking the Bellows button Then navigate to the Icon tab within the menu item settings panel. To select your icon, click on the “Set Icon” button, then click on the icon you wish to use You can search for an icon by typing in the Type to search box to filter the icons Your chosen icon will appear Click Save Menu Item to save your settings for this menu item. The icon will appear beside the menu item text. Using a custom icon If you have a font icon set other than Font Awesome already loaded on your site, which uses the markup to create a font icon, then you can add the {my-icon-class} class in the Custom Icon Class setting to add your custom icon.