Integrating mmenu plugin

mmenu WordPress 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.

The jQuery.mmenu plugin is open source software, you are free to use the jQuery.mmenu plugin for your personal or non-profit websites. For commercial usage, please purchase a license.
Chap theme is not affiliated with mmenu, this guide is for informative purposes only.
Integration
Child theme

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

WordPress menu

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.

chap_render_mobile_menu()
PHP
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.

Hiding the menu

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.

Hiding the menu
CSS
#mmenu-container {
    display: none;
}
Setting up mmenu

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.

Locate the menu
CSS
#mmenu-container
Locate the menu button
CSS
#primary_menu .toc.item
mmenu configuration for Chap
All done

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.

Leave a comment

Your email address will not be published. Required fields are marked *