Integrating mmenu plugin

jQuery.mmenu allows to create more complex mobile menus with true native app menu experience and sliding submenus. Chap does not include this plugin by default, but with the following guide it can be integrated into the theme.

Chap mobile menu

mmenu mobile menu

To make persistent changes to Chap mobile menu a file needs to be copied over to the child theme folder to ensure updates don’t overwrite your changes.

The mobile menu is rendered in /chap/lib/template-functions/action-chap-render-mobile-menu.php file, so it should be copied to /chap-child/lib/template-functions/action-chap-render-mobile-menu.php

Chap menus use a custom walker to create output compatible with Semantic UI. How ever this isn’t compatible with mmenu so the function chap_render_mobile_menu() in the child theme’s action-chap-render-mobile-menu.php file should be modified to output a menu using the default WordPress menu walker.

function chap_render_mobile_menu() {
	if(!has_nav_menu('primary_navigation')) {
		return;
	}
	echo '<nav id="mmenu-container">';
	wp_nav_menu([
		'theme_location' => 'primary_navigation',
		'menu_id' => 'mmenu-menu',
		'walker' => new \Walker_Nav_Menu,
		'container' => '',
	]);
	echo '</nav>';
}

This will output a menu that mmenu can use to populate it’s items from.

The menu created in the previous step is not styled properly and is only used for it’s data, so it should be hidden from view.

The following CSS can be added in the WordPress admin dashboard -> Chap Theme -> Code -> CSS textarea.

#mmenu-container {
    display: none;
}

Now the mmenu WordPress plugin should be downloaded, installed and activated. Once done, a separate “mmenu” menu item will be displayed in the dashboard.

The plugin can be configured to use the previously created menu for data and an already existing main menu item to show it.

#mmenu-container

#primary_menu .toc.item

The mmenu plugin is now integrated and can be further configured to your liking, such as menu position, navigation, logo, photo, search field and custom buttons.
mmenu may not support all menu structures that Chap allows, only basic nesting.