Theme Developers

This article is intended for theme authors looking to bundle support for Max Mega Menu into a theme. If you are a theme user please see this guide.

Including Max Mega Menu in your theme

Use the TGMPA library to include Max Mega Menu with your theme.

Before you start

Please do not make Max Mega Menu an absolute requirement for your theme. Your theme menus should be styled and functional even without Max Mega Menu installed. Max Mega Menu should be an optional extra for your users.

Let Max Mega Menu do it’s thing. If your users are deciding to install Max Mega Menu then it’s likely they will want a completely vanilla install. Max Mega Menu is a complete package; the PHP, CSS and JavaScript all work hand in hand. Do not modify the behaviour of Max Mega Menu by using your own JavaScript or CSS.

Adding Support for Max Mega Menu alongside your default theme menu

Integration can be completed using the  max_mega_menu_is_enabled()  function.

The Twenty Twelve Example

Twenty Twelve outputs the site menu and a mobile toggle button in the header.php file:

The Problem

Max Mega Menu can only override the output of the wp_nav_menu()  function (line 4). This means the surrounding markup will still be output on the site even when Max Mega Menu has been enabled. This can result in the following conflicts between the theme and Max Mega Menu:

HTML Conflicts

In this case the .menu-toggle button will be displayed on mobile devices. Once Max Mega Menu is enabled the user will see 2 mobile toggle buttons on their site (one created by the theme and one created by Max Mega Menu).

CSS Conflicts

If the theme uses #site-navigation as part of the selector to style the default menu, this styling can end up being incorrectly applied to Max Mega Menu menus.

JavaScript Conflicts

If the theme uses #site-navigation as part of the selector to apply custom JavaScript to the menu, this functionality can end up being incorrectly applied to Max Mega Menu menus.

The Solution

To solve all of conflicts we can use the max_mega_menu_is_enabled()  function. This function will allow us to detect if both Max Mega Menu is installed (using function_exists) and whether Max Mega Menu has been enabled for a Theme Location (by specifying the theme location as a parameter).

The following adjustment to the header.php code will allow Max Mega Menu to be displayed properly. If Max Mega Menu is not installed or has not been enabled for the primary Theme Location, the theme will gracefully fall back to showing the default menu.

Bundling a Menu Theme with your WordPress Theme

Create a new theme for the menu using the Theme Editor under Mega Menu > Menu Themes. Do as much customisation as possible using the built in settings. If you need to apply extra styling to the menu enter it into the Custom Styling area in the menu theme. All of your mega menu related styling should now be in one place – in the menu theme.

Once you have finished creating the theme head to Mega Menu > Tools and export the theme in PHP format. Paste the given PHP into your themes functions.php file.

When your users install Max Mega Menu your theme will be available for them. If your users want to tweak the menu theme (e.g. change the font color from light grey to dark grey) they can use the Theme Editor.

Important note:  Do not override the default Max Mega Menu styling in your style.css file! This will break the Theme Editor in Max Mega Menu. When your users realise a setting in the Theme Editor is not working they will either contact you, or us, for help. The only “fix” for this is to once again override the CSS in your style.css file or delete your styles from the style.css file (neither are good options!).

Related Articles