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.

Theme authors are free to include and add support for the free version of Max Mega Menu directly into their theme.

Before you start, the tldr:

Do

  • Create a custom mega menu theme to apply styling to the menu
  • Use the ‘max_mega_menu_is_enabled’ function to provide MMM with a ‘clean’ space to work within

Don’t

  • Override the menu styling in your style.css file
  • Change the default behaviour of the plugin
  • Dequeue the default CSS or JavaScript

In short, let Max Mega Menu do its thing. If your users are deciding to install Max Mega Menu instead of your theme 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, and they are updated regularly. Please do not override the default behaviour or styling of Max Mega Menu by using your own JavaScript or CSS, it will be likely to break as Max Mega Menu evolves.

Including Max Mega Menu in your theme

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

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

You can create your own custom Max Mega Menu Theme and distribute it with your WordPress theme.

To do this, 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 click the ellipsis button next to the theme selector dropdown 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 and many of the Pro features. 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!).

Changing the default theme

If you’re bundling your own menu theme with your WordPress theme, you can preselect your custom theme in the “Theme” dropdown by pasting the following code into your themes functions.php file:

Note: the theme will only be preselected on completely clean installations of Max Mega Menu. To test this code you may want to go to Mega Menu > Tools > Delete Data.

Related Articles