Hello everyone,
First of all, a BIG BRAVO, and a million thanks to the developer of mmenu.
Since I've searched a lot and didn't found a tutorial on how to do it,
i made multiple tests and finally found a simple solution.
I really think that WordPress is great because a lot of persons are ready
to share knowledge for free like the author of this great and cool plugin.
My contribution to this plugin, is how to implement it in WordPress, so let's go !
1- In your theme folder, create a new folder mmenu and put inside it the two main files jquery.mmenu.min.all.js and jquery.mmenu.all.css then enqueue scripts in a function in your functions.php file
function mmenu_scripts() {
wp_enqueue_script( 'jquery-mmenu-min-all-js', get_template_directory_uri() . '/mmenu/jquery.mmenu.min.all.js', array('jquery'), '4.7.5', false );
wp_enqueue_style( 'jquery-mmenu-all-style', get_template_directory_uri() . '/mmenu/jquery.mmenu.all.css' );
}
add_action( 'wp_enqueue_scripts', 'mmenu_scripts' );
2- In header.php JUST UNDER <body <?php body_class(); ?>>
put the following code
<script type="text/javascript">
(function ($) {
$(document).ready(function() {
$("nav#menu").mmenu({
"classes": "mm-slide mm-light",
"counters": true,
"footer": {
"add": true,
"title": "Footer"
},
"header": true,
"searchfield": true,
"offCanvas": {
"zposition": "front"
}
});
});
})(jQuery);
</script>
PAY ATTENTION TO LINE 4 $("nav#menu")
This line is assuming that your menu is wrapped in a <nav>
that have an id of menu !
So let's create the wp_nav_menu for this one.
3- In footer.php JUST BEFORE <?php wp_footer(); ?>
put the following code
<nav id="menu">
<?php wp_nav_menu( array(
'theme_location' => 'primary',
'container' => false,
) ); ?>
</nav>
PAY ATTENTION TO LINE 3 'theme_location' => 'primary'
This line is assuming that you are assigning/using the primary location menu.
You should not remove the 'container' => false
line, because it prevents WordPress from wrapping your menu with a <div>
!
4- After adding some menu items to the primary location in the back-end of WP,
you just have to add a single line to see the magic in action.
In header.php, you can put under the opening <header>
tag the following line
<a href="#menu">Open the menu</a>
Now you will see a link in the header of the theme a Open the menu link, just click it :wink:
Finally, you can play with the options of the plugin as you want and style the link that open the menu to be an icon like the hamburger on the site of mmenu plugin.
Hope that someone will benefit from this very simple integration and make a cool WP menu with mmenu !