I needed to find a mobile menu solution for Opus Primus, a WordPress theme … and within an hour I had one.

First thing, I searched for a “mobile menu script” and then I had to choose one that suited my needs. I decided on SlickNav.

It was relatively straight forward to implement SlickNav for a WordPress theme and the following should provide a decent outline to use with most any theme. (I’ll be using Opus Primus as my specific example.)

You’ll need the source files for SlickNav, I suggest the easiest being its GitHub repository … don’t forget to read the instructions on the main page. They really do make implementing this very easy and lead the way for the following code.

Let’s start by creating a function to enqueue the scripts and styles needed:

function wpfa_add_slicknav() {
	/** Enqueue the SlickNav styles */
	wp_enqueue_style( 'SlickNav-CSS-main', get_template_directory_uri() . '/SlickNav/slicknav.css', array(), '1.0.1', 'screen' );
	/** Enqueue the SlickNav JavaScript with jQuery dependency */
	wp_enqueue_script( 'SlickNav-JS-main', get_template_directory_uri() . '/SlickNav/jquery.slicknav.min.js', array( 'jquery' ), '1.0.1', true );
	/** Enqueue SlickNav initialization script with jQuery and SlickNav JavaScript main dependencies */
	wp_enqueue_script(
		'SlickNav-init', get_template_directory_uri() . '/SlickNav/wpfa-slicknav-init.js', array(
			'jquery',
			'SlickNav-JS-main'
		), '1.0', true
	);
	/** Enqueue SlickNav mobile layout only styles with SlickNav CSS main dependency */
	wp_enqueue_style( 'SlickNav-layout', get_template_directory_uri() . '/SlickNav/wpfa-slicknav.css', array( 'SlickNav-CSS-main' ), '1.0', 'screen' );
}

I’m using get_template_directory_uri in this case to point to the SlickNav files in their own folder at the theme root. Your usage may be different so please keep that in mind when you are applying these ideas. Remember to address the following requirements: add the main SlickNav CSS; add the main SlickNav JavaScript (minified, optional); and, add the theme specific JavaScript as needed (in this case, to use the Opus Primus nav element as generated by wp_nav_menu). The “handles” I chose are arbitrary, but do make sure they are unique and relevant.

You may have noticed the script enqueue of wpfa-slicknav-init.js and the following is the script being referenced:

jQuery( document ).ready( function ( $ ) {
	/** Note: $() will work as an alias for jQuery() inside of this function */
	$( '.nav-menu' ).slicknav( {
		prependTo: 'nav'
	} );
} );

The ‘SlickNav-layout’ CSS will most likely be theme specific. Below is the specific Opus Primus related CSS as an example:

To see the SlickNave CSS for Opus Primus click here.To hide the SlickNave CSS for Opus Primus click here.

/** Hide the SlickNav menu by default */
.slicknav_menu {
	display: none;
}

/** Check for generic mobile device width of 50em ... add more as needed? */
@media screen and (max-width: 50em) {

	/** Hide those things that should not appear in mobile displays */
	div#breadcrumbs,
	nav .nav-menu {
		display: none;
	}

	nav .slicknav_menu {
		display: block;
	}

}

Next, add the function as a callback to the add_action call for wp_enqueue_scripts. The following will work just fine for this post’s example:

add_action( 'wp_enqueue_scripts', 'wpfa_add_slicknav' );

This will have the SlickNav script work directly with the navigation menu’s main HTML element, which in this case is the nav element. Your theme may use a different element so be sure to use the correct prependTo reference.

Of course being intimately familiar with the Opus Primus code makes this easy, but in general, adding the SlickNav library is quite easy and very quick … why re-invent the wheel when you can borrow someone else’s.

Enjoy … and if you need any help with your theme please feel free to contact us about our WordPress services.