Adding Mobile Navigation to Your WordPress Theme

Ensuring that your website looks and functions properly on a mobile device is no longer an optional practice. Mobile web use is expected to account for as much as 68% of all internet traffic in 2017. Coupled with how a lack of a mobile-optimized site can hurt SEO, mobile compatibility is essential if you want to stay competitive.

While most ready-made free and commercial WordPress themes are responsive and have mobile navigation systems in place, those of us who create our own custom themes are always looking for creative solutions.

Today, we’ll look at one method for adding an attractive and functional mobile navigation system to your WordPress theme. If you’re comfortable with editing some code and uploading a few files, it’s a very simple process. Let’s get started!

What You’ll Need

  • A WordPress Theme – If you have a starter theme or work with a framework, it’s best to start there. But this will work with an existing theme as well (just make sure to use a child theme if necessary).
  • SlickNav – This free, easy-to-implement script is quite flexible. It will allow you to create an ARIA compliant mobile menu that degrades nicely for non-JavaScript browsers. Do take note that SlickNav requires jQuery to run, which is already included with your WordPress install.
  • Web Hosting Account with FTP/File Manager access or a Local Server setup.

Tip: It is recommended that you test all of this out on either a staging or local site first to avoid any problems with your live site.

Step 1: Upload SlickNav

SlickNav Responsive Mobile Navigation

SlickNav is very lightweight, so only two files from their download package are required to make things work:

  • jquery.slicknav.min.js
  • slicknav.css (tweak this file to match the style of your site)

Upload both to your server (preferably to a separate folder inside your theme’s directory) and take note of their location.

Step 2: Create a JavaScript File

SlickNav will need to be initialized through JavaScript. While you could simply add the script to your theme’s header.php, it’s recommended to load scripts in WordPress from an external JS file.

So, create a new file and call it whatever you like. In this example, it will be called: siteloader.js

Add the following code to your JS file (note that we are using jQuery in no-conflict mode for compatibility with WordPress):

// Add SlickNav Mobile Menu
jQuery(function(){
jQuery('#primary-menu').slicknav();
});

Take special note of the #primary-menu mention in the above code. You should change this to match the ID of your theme’s main navigation menu (or any other navigation area you’d like to turn into a responsive mobile menu).

Tip: You may also have to assign this menu as your primary theme location inside WordPress.

There are more options available for configuring the script to your liking. Take a look at SlickNav’s Usage section for more information.

Step 3: Edit functions.php

Next, we’ll add calls to SlickNav and the new JavaScript file we created to our theme’s functions.php file so that they load along with WordPress. Depending on the setup of your theme, the code will look something like this:

// Load Mobile Navigation
function mobilenav_scripts() {

// Load SlickNav
wp_enqueue_script( 'mobilenav-slickjs', get_template_directory_uri() . '/path/to/jquery.slicknav.min.js', array('jquery') );

wp_register_style( 'slicknav-css', get_stylesheet_directory_uri() . '/path/to/slicknav.css');
wp_enqueue_style( 'slicknav-css' );

// Load Custom JS File
wp_enqueue_script( 'mobilenav-init', get_template_directory_uri() . '/path/to/siteloader.js', array('jquery'));

}

You’ll want to change the /path/to/ areas above to the proper path for your site.

Tip: Your theme may need slightly different code in order to work properly. Make sure to read any documentation or contact the developer for more info.

Step 4: Add some CSS

SlckNav Demo Menu

If you completed all the steps above and uploaded it all to your server, SlickNav would appear automatically – regardless of the user’s screen size. Therefore, we must make a few tweaks to our theme’s CSS in order to ensure that it shows up only on desired screen sizes. We’ll also want to hide our regular navigation menu from smaller screens.

In your theme’s CSS, add:

.slicknav_menu {
display:none;
}

@media screen and (max-width: 800px😉 {
/* #primary-menu is your theme’s original menu */
#primary-menu {
display:none;
}

.slicknav_menu {
display:block;
}
}

Set the max-width to the largest screen you’d like SlickNav to display. And once again adjust #primary-menu to match your theme’s main navigation.

Tip: Make sure to add a meta viewport tag in your theme’s header.php file if one doesn’t already exist.

Step 5: Final Upload and Testing

Finally, you’ll want to make sure to upload:

  • Your new JS file (siteloader.js in the example)
  • functions.php
  • Your edited CSS files

From there, it’s on to testing! Pull up your site on a mobile device or shrink your desktop browser to see SlickNav in action. You may find that a few style changes are necessary to make things fit in with the look of your site.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s