Overview As you set your parameters for auto-population queries, the shortcode will update to create the menu that you configure. If you leave this page and come back, all the settings will reset. If you want to save this group of settings (known as a “query”, because these are the parameters we use to query to database for matching posts), then you can use the Save Query feature Saved Queries have a unique ID that references a specific set of auto population settings, and can be referenced with the simpler shortcode [bellows_menu qid=”76″] The advantage of Saved Queries If you are only using a menu once, then the difference between a saved query menu and normal menu is minimal. For example, these two shortcodes might produce the same output: [bellows_terms config_id=”secondary” taxonomies=”genre” orderby=”id”] [bellows_menu qid=”76″] The former is a normal auto-population menu using the bellows_terms shortcode, and the latter is a saved query auto-population menu using the bellows_menu shortcode, which retrieves the same parameters from the saved query. The shortcodes produce the same menu, so what’s the difference? Let’s say that you’re using the same menu on 3 different pages. So you are adding the same shortcode 3 times. You could use either shortcode above. But now let’s say a week later you want to change to a new Configuration you’ve created. If you use the non-saved query, you need to go change the configuration in each of the 3 shortcode instances from [bellows_terms config_id=”secondary” taxonomies=”genre” orderby=”id”] to [bellows_terms config_id=”new_config” taxonomies=”genre” orderby=”id”] However, if you’re using a saved query, you can leave the same shortcode ([bellows_menu qid=”76″]) in place. Just go back to the Code Generator and open up your Saved Query. Change the Configuration setting, re-save your Query, and the menu will automatically be updated. Note that if you […]

Bellows Lite and Bellows Pro share a common codebase, but are two independent plugins. You will only have one activated at a time. Installing the Upgrade When you purchase Bellows Pro, you’ll receive a zip file to download. Follow the Installation Instructions to install the Bellows Pro plugin. If you currently have Bellows Lite active, the Bellows Pro installation process will attempt to disable Bellows Lite. Check that the Lite plugin has been disabled Double check that the Bellows Accordion Menu plugin is disabled and only Bellows Pro – Accordion Menu is enabled. Leaving both active may cause errors. Settings Your settings will automatically be inherited by the Bellows Pro plugin. There is no need to do any settings migration when upgrading to Bellows Pro Check out the new settings Bellows Pro adds Menu Item Settings, Customizer style settings, Autopopulation capabilities, the Menu Code Generator UI, and more!

Installation & Activation Install Bellows Lite by going to Plugins > Add New and Search for “Bellows Accordion Menu”. Click “Install”, then “Activate” 1. Search for the menu 2. Click “Install” and wait for the installation to finish 3. Click “Activate” to activate the menu 4. You’ll be redirected to the Plugins page after activation Creating a menu Visit Appearance > Menus You can create a new menu, or work with an existing menu. This is where you will manage the structure and contents of your accordion menu. Drag items into your menu to create your menu structure. Child items (those that are indented below another item) will be revealed in the accordion menu when toggled from the parent item. Not sure how to manage your menus in WordPress? See the detailed How to create a menu guide. Configuring the menu The main menu settings are set via the Bellows Control Panel, which can be accessed via Appearance > Bellows Menu Here you can change settings such as the menu skin, folding strategy, menu position, and more. For detailed instructions on using the Control Panel, visit Menu Settings & Configuration Configuring Individual Menu Items (Pro version) The Pro version of Bellows allows you to configure individual menu item settings, such as icons, images, widgets, etc. Learn more about Menu Item Settings or check out the Bellows Pro Features Inserting the menu To add a Bellows accordion menu to your site, you can use a shortcode, widget, or PHP code. Most users will use a shortcode or widget. For detailed information on integration, please see the Integration – Insert an Accordion Menu section of the Knowledgebase. Shortcode To generate the shortcode you need, visit the Control Panel and click on the Integration section. You can select the menu you want to […]

If you already have a way to add custom javascript to your site, you can use that. Otherwise, you can follow this guide to create and enqueue a custom JS file for your Bellows customizations. 1. Where to put your code While there are many places you could put your code, a common solution is to add it to a child theme. You should never edit a plugin or theme directly since these may be updated and overwrite your changes in the future. Adding code in a child theme will preserve your changes. If you’re not sure how to set up a child theme, this plugin can generate one for you: Child Theme Configurator 2. Create your custom javascript file: bellows-custom.js In your child theme, create a bellows-custom.js file. If you wish to place this in a subfolder (such as assets/js), be sure to adjust the paths accordingly in the enqueue code in step 3. Inside your new file, here’s some sample code to get you started: This will run your custom code when the site loads, after Bellows has been initialized. Add your custom code where it says “place your custom code here” 3. Enqueue your new JS file So far we’ve created the file, now we need to tell WordPress to actually load it on your site. To do this, add this PHP in your child theme functions.php file. 4. Minify and concatenate your JS files (optional) Separating your scripts into individual files per module is good practice for development, but you don’t want to load many different JS files on your site in production. You can use a plugin like Autoptimize to automatically minify and concatenate your JS and CSS files to optimize your assets and improve your site load speed.

Bellows Control Panel > Main Configuration > Basic Configuration > Default Submenu State Out of the box, all submenus will be closed by default. To have them toggled open by default, change the Default Submenu State to Open You can also control this on a per-submenu basis in the menu item settings Inherit will use the global Default Submenu State setting, while the other options will override the global value.

Resources for developers Filters Constants

Bellows provides the following filters for developers looking for extra control All Menus bellows_menu_item_data bellows_icon_custom_class bellows_menu_toggle_content Automatic population menus bellows_auto_posts_query_args bellows_auto_terms_query_args bellows_auto_post_title bellows_auto_term_title

bellows_auto_posts_query_args This filter allows you to filter the get_posts() query arguments for Post Hierarchy Autopopulation menus $query_args An array of query arguments to be passed to get_posts(). The filter callback should return $query_args. For a full list of parameters that can be passed, please see The WordPress Codex: WP Query Parameters Example: Show public private posts to logged in users Example: Exclude post 50 from menu

bellows_auto_terms_query_args This filter allows you to filter the get_terms() query arguments for Taxonomy Term Hierarchy Autopopulation menus $query_args An array of query arguments to be passed to get_terms(). The filter callback should return $query_args. For a full list of parameters that can be passed, please see The WordPress Codex: WP Term Query Parameters Example: Exclude specific terms from appearing in menu The following would exclude terms 22 and 67 from appearing in the menu.

bellows_auto_post_title This filter allows you to filter the the title of menu items that are displayed in Post Hierarchy Autopopulation menus $item_title The title of the menu item (the post’s title). $post The Post object Example: Replace item title with a custom meta field