The PHP API offers two functions: ubermenu() The ubermenu() function outputs an UberMenu. You can place it in a theme template to insert an UberMenu wherever you like. ubermenu( $config_id = ‘main’ , $args = array() ) $config_id Default: ‘main’ Defines which Configuration to use for this menu. When you create a new Configuration in the UberMenu Control Panel, you provide an ID – that is the ID used here. The Configuration determines the global properties of the menu, like the skin, transition, trigger, etc. The default menu set in the Configuration will be displayed if no menu or theme location is passed. $args Default: array() An array of arguments, which will eventually be passed to wp_nav_menu. Most will be controlled by UberMenu, but you can pass the theme_location or menu parameters to define which menu from Appearance > Menus will be used. Examples Display an UberMenu with the main configuration using its default Menu or Display an UberMenu with the main configuration for the menu with slug ‘secondary’ Display an UberMenu with the “custom_blue” configuration for the theme location ‘primary’ Generation Note that you can generate basic API code in the UberMenu Control Panel > {Configuration} > Integration > Manual Integration ubermenu_toggle() The ubermenu_toggle() function outputs the toggle button used to toggle UberMenu open and closed below the responsive breakpoint.. You can place it in a theme template to insert a toggle wherever you like. ubermenu_toggle( $target = ‘_any_’ , $config_id = ‘main’ , $echo = true , $args = array() ) $target Default: _any_ The ID of the UberMenu element being targeted (look for the nav element’s ID attribute). The special value _any_ means this toggle will toggle any UberMenu on the page, which is mostly useful if you only have one instance on the page. $config_id Default: […]

Download the beta on Github To construct a WordPress menu, WordPress makes multiple queries to the database to generate the menu content. If you are using advanced UberMenu features like Dynamic Items, Dynamically Inherited Featured Images, or Menu Segments, there can be additional database queries – and these queries can add up. The first line of optimization is to configure your menu efficiently (use ‘Assign Image on Save’ when possible, don’t use Dynamic Items unnecessarily), but once you’ve got your menu in place, you can further reduce your database load by caching the menu output. The WP Menu Cache plugin uses the WordPress Transients API to save the generated menu markup in the database, so that instead of regenerating the entire menu on each page load, the menu is cached and retrieved in a single query instead. Caching Strategies There are some pitfalls to caching WordPress menus – namely, that dynamic properties like current menu items won’t work when cached globally. While there isn’t a universal solution, WP Menu Cache offers several caching strategies which can work for you: Global Cache one version of the menu for all pages. In this case, you’ll want to disable any current item styling, and there won’t be any indicator as to the current page. For some sites, this works just fine. Selected Pages Only WP Menu Cache allows you to choose specific pages to cache the menu for, while other pages will not be cached. This can work well for sites with high traffic on specific pages. Each page’s menu will be cached independently, so current menu items will work properly. Selected Pages with Global Fallback With this strategy, you can again select the pages whose menus will be cached independently. All other pages on the site will be served a common globally […]

Menu Settings Menu Item Settings Submenu Settings

Appearance > UberMenu UberMenu’s settings are located in the UberMenu Control Panel. These settings control the properties of your menus as a whole, while the Menu Item Settings control the properties of individual menu items. The UberMenu Control Panel is broken into several tabs across the top of the page. Note that each tab is independent, so you must save your settings from one tab before making changes in the next tab. Main UberMenu Configuration The Main UberMenu Configuration tab controls settings specific to the main menu that is created automatically with UberMenu (you can create additional configurations as well). This is where you configure settings like the menu skin, orientation, position, etc – anything that pertains to the menu as a whole, rather than an individual menu item. It is also where you can integrate your menu and generate menu code which you can add to your site. General Settings The General Settings tab controls settings that are global, and not just for a specific menu. This is where you configure settings like whether certain assets are loaded, add CSS which will be applied site-wide, configure script settings and the responsive breakpoint. It is also where maintenance tasks like migration and resetting settings are housed. Help The Help tab gives you access to the UberMenu support resources, like a Knowledgebase search, video tutorials, and the Support Forum. Note that there are also quick links in the upper right of the Control Panel to these resources. Additional Configurations When you add additional Configurations, they will each get their own tab. Learn more about Multiple Configurations

Each menu item can be configured individually in the Appearance > Menus Panel. Video Tutorial Configuring Menu Item Settings To access the Menu Item Settings, hover over the menu item you wish to configure. A button labeled Uber will appear. Click the Uber button to open the Menu Item Settings Panel for that item. The Menu Item Settings Panel The Menu Item Settings Panel contains a variety of settings specific to that menu item, including its submenu. Along the top, you’ll see the menu item’s name, ID (useful for CSS), and item type (Page), as well as the Save Menu Item button for this specific item. Click the × in the upper right or press escape on your keyboard to close the panel. Along the left, you’ll see a list of tabs which organize the settings by group. The blue tab is highlighted, and you can click on each tab in succession to reveal its settings. To the right of the tabs is the content panel for each tab, which contains the settings themselves. Note this panel is often scrollable. Setting each have a description and helpful hints which appear over certain items when hovered. When a setting is changed, an alert box appears next to the save button, warning you that there are unsaved changes. Hover over the status icon for details. Save your changes by clicking the blue Save Menu Item Button. The changes will be saved via AJAX, and when the process is complete the status icon will turn green Custom Defaults Out of the box, the Menu Item Settings have defaults which are applied to each newly created menu item (some settings also inherit from their Control Panel counterparts). Say you want to create a series of menu items with similar properties, which differ from the […]

Appearance > Menus A submenu is configured through its parent menu item’s settings. So, if you have a menu item named Places, the submenu of Places can be configured in the Menu Item Settings of the Places item. To view the Submenu Settings, open the Menu Item Settings by hovering over the menu item and clicking the Uber button. In the Menu Item Settings Panel, click the Submenu tab on the left. This panel allows you to control the type, position, size, layout, background image, and more of this specific submenu.

Base requirements WordPress 5.0+ Use of the WordPress 3 Menu System (found in Appearance > Menus) Use of a theme coded to WordPress standards Use of the standard jQuery version included with WordPress (v3+) Requirements for Automatic Integration The following are additionally required of your theme if you wish to integrate UberMenu automatically, rather than adding a line of PHP to your theme template. Proper use of the wp_nav_menu function Use of the theme_location argument within the wp_nav_menu arguments (standard best practice) A properly registered theme location No use of the menu argument within the wp_nav_menu arguments (incorrect if used with theme_location) Modular coding – CSS and JS based on the container ID or class passed to wp_nav_menu, rather than a hard-coded wrapper class, and/or class selectors rather than tag selectors Any properly coded theme will meet requirements 1-4. If requirement 5 is not met, you may have residual styling or residual scripting from the theme (meaning the theme’s CSS and javascript will interfere with UberMenu’s functionality). If so, you can just replace it with UberMenu’s manual integration code. For further details and expanded explanations, please see the full Automatic Integration Requirements guide.

Video Walkthrough 1. Installation & Activation In your WordPress admin panel, navigate to Plugins > Add New > Upload. Choose the UberMenu plugin zip and follow the prompts to install and activate UberMenu. At this point, UberMenu will have no effect on the front end of your site. 2. Creating a menu If you don’t have an menu yet, go to Appearance > Menus and create one. If your theme properly supports theme locations, click the Manage Locations and assign your menu to the appropriate theme location. 3. Integration To add the menu to your site, you can use either Manual Integration or Automatic Integration (if your theme supports it). If the menu isn’t working properly after using Automatic Integration, you likely have interference from your theme. Please see Resolving Theme Interference for the next steps Automatic To integrate UberMenu automatically, go to the UberMenu Control Panel (Appearance > UberMenu). Under the Main UberMenu Configuration > Integration > Automatic Integration Theme Location, check the box next to the Theme Location you wish to activate as an UberMenu. The name of the menu assigned to the theme location is in the box to the right of the theme location. Click Save Main UberMenu Configuration to save your changes and activate UberMenu on your theme location. Manual To integrate UberMenu manually, go to the UberMenu Control Panel (Appearance > UberMenu). Under the Main UberMenu Configuration > Integration > Manual Integration > Manual Integration Code, select your chosen menu under “Integrate Specific Menu”, then copy the code. Paste the code into the appropriate theme template (usually header.php) to insert UberMenu. You may also wish to remove your theme’s menu code. It is best to create a Child Theme and make the changes there. 4. Menu Configuration In the UberMenu Control Panel > Main […]

Automatic Integration is a feature that allows you to replace a specific menu on your site with UberMenu, provided the theme has been appropriately coded. Requirements for replacement 1. Registered theme location The theme must have properly registered a theme location. This will show up when you go to Appearance > Menus > Manage Locations. If you do not have any theme locations, the Manage Locations tab will not appear, but you will see this message in Appearance > Menus: In that case, you will need to use Manual Integration 2. The theme must use the registered theme location properly when calling wp_nav_menu 99% of themes do this right, but once in a while a theme just won’t be coded properly. When the theme calls wp_nav_menu, it needs to do two things: 1. Use the theme_location argument If the theme isn’t using the ‘theme_location’ argument in its wp_nav_menu call, then the registered theme location isn’t actually being used at all, so it is irrelevant. 2. Do NOT use the menu argument The ‘menu’ argument defines a specific menu to display, rather than a theme location. If the menu argument is present, it will override the ‘theme_location’ parameter, making the Theme Location irrelevant. A theme should pretty much never use the menu parameter, because it is based on the user’s name for their menu, which could be anything. Good: Bad – missing theme_location: Bad – using ‘menu’ argument: Requirements for proper functionality In order for UberMenu to replace your menu and function properly, the theme needs to be coded modularly (most themes are). If the theme is not coded modularly, it may result in the CSS or javascript from the theme still affecting the menu, which can break the UberMenu layout. This is known as Residual Styling and Residual Scripting. Each […]

Appearance > Customize You can tweak over 50 style settings with the WordPress Customizer Navigate to Appearance > Customize or in the admin bar go to UberMenu > Customize to access the WordPress Customizer In the left panel, there will appear one tab for each UberMenu Configuration – so by default you will see UberMenu [main] to customize the main instance. Clicking the tab will reveal a variety of settings. Scroll through the settings in the pane on the left. You can change any of the settings, and the preview on the right will refresh with your changes. Each of these settings is an override – it will override the setting from the Skin preset. If you clear/reset the setting, the default from the Skin will be shown. For example, if your skin has a red background, clearing the color won’t set the background to transparent; it will just mean you’re not overriding the red of the skin. In the following example, I’ve changed the menu bar background color and the border radius: Remember, this is just a preview. To save your changes and make them appear to your site visitors, click the Save & Publish button.