Overview

To manually integrate UberMenu into your theme, you simply copy the generated PHP from the UberMenu Control Panel and paste it into the appropriate template in your theme. This outputs an UberMenu.

There are two common use cases for needing manual integration:

Adding a new menu

If you want to add a menu to your site, where there previously was none, this code can be used to add an UberMenu by placing it in your theme template files.

Replacing an existing menu to avoid residual styling and other interference from your theme

Some themes are not coded modularly, and their CSS interferes with the menu functionality because of their imprecision. Manual integration allows us to replace the theme’s navigation system (the entire block of HTML and PHP in the theme that is responsible for the menu), thereby eliminating the interference from the theme, which allows the menu to look and function properly.

In this case, we use manual integration to conditionally replace the theme’s menu system, rather than just deleting the offending CSS or classes from the template, in order to preserve the theme’s menu system and make updates and changes easier in the future.

Note: You should always make changes to your theme in a Child Theme in order to preserve them. The exact location and strategy will depend on your theme

Video Tutorial

This video tutorial walks you through identifying residual styling, finding the source of the issue, locating the theme’s menu, creating a child theme, and conditionally displaying UberMenu via manual integration. The video covers everything in detail for those less familiar with editing code – most people will find it faster to just follow the text instructions below.

Generating the UberMenu code

The PHP code that will output UberMenu can be generated via the Control Panel.

Navigate to Appearance > UberMenu > Main UberMenu Configuration (or your desired configuration, if you have multiple). Click on the Integration tab on the left and scroll to the Manual Integration Section

Ideally, you will also wrap your code in an if( function_exists( 'ubermenu' ) ) statement – this way, if you disable the UberMenu plugin, you won’t get an error.

Integrate by Menu

Common use case: adding a new menu to an undefined theme location

If you have an existing menu that you want to add to the theme, scroll to the Integrate Specific Menu section of the Manual Integration Code. In the select box, choose from your existing menus (created in Appearance > Menus) the menu you want to insert. The Manual Integration Code will update accordingly.

Add the code to your theme – in this case

<?php ubermenu( 'main' , array( 'menu' => 2 ) ); ?>

Integrate by Theme Location

Common use case: replacing an existing theme menu that was created with a theme_location parameter

Using Theme Locations for your menu is more flexible than using a specific Menu, and is generally recommend when one is available. If you have an unused Theme Location (for example, one that you are replacing), you should use it. Otherwise, you can register a custom theme location for your use, or use the Menu Swapper plugin to create more Theme Locations through its Control Panel.

Scroll to the Integrate Specific Theme Location section of the Manual Integration Code. In the select box, choose the Theme Location you want to insert. The Manual Integration Code will update accordingly.

Add the code to your theme (see “Replacing an existing menu” below if you are replacing an existing menu) – in this case:

<?php ubermenu( 'main' , array( 'theme_location' => 'primary' ) ); ?>

Replacing an existing menu

If you are replacing an existing menu in your theme, you will also want to remove (or comment out) or conditionally disable the existing theme menu code. Place the UberMenu Manual Integration Code where the theme code used to be.

Adding a new menu

If you are adding a new menu, you can insert the UberMenu Integration Code wherever you like in the theme’s templates.

Where do I add the code?

It will depend on your theme, but in the majority of themes, the wp_nav_menu function call can be found in the header.php template, so that’s where you’ll want to start looking. The Residual Styling Detection / Manual Integration Tool will help you locate the exact location in your theme files if you are having trouble finding it.