A stepwise guide on building a responsive menu for your WP Theme

Responsive menu

Mere installation of a responsive theme won’t help you make your WordPress site ready-to-use for varied mobile devices. It is an addition of a mobile-specific menu to the WP theme that’ll render a flawless user experience to your mobile visitors. This tutorial will help you find everything about the same.

What’s covered in this tutorial?

Well, in this tutorial, I’ve jotted down a list of simple steps that aid you in adding a mobile-ready menu for your WordPress responsive theme.

Image 2

Understand the significance of having a separate menu for mobile responsive WordPress websites/blogs

Undoubtedly, mobile users have a different set of popular/favorite pages as compared to those opted by the desktop users. It is here that the need for a custom responsive menu is realized. This menu allows you to assign a higher priority to specific pages within your mobile-compatible WordPress website. Moreover, if you’re keen on providing mobile-only versions of specific web pages, then also building a responsive menu will work as a handy option.

Now, let’s dig deep into the steps involved with building a responsive menu for a WordPress theme

Do note that in tutorial, I’ll be talking about building a responsive menu for the TwentyThirteen theme.

wordpress child themeStep 1- Create a Child Theme

Considering your familiarity with the process of creating a child theme, opt for building one from your current WordPress theme. You’ll need to create an empty functions.php file in addition to the already existing parent functions.php.

Step 2- Add a new location for the yet-to-be-created responsive menu

For this, simply add the below mentioned code snippet to your child theme’s functions.php file:

function extra_setup() {

register_nav_menu (‘primary mobile’, __( ‘Responsive Navigation Mobile’, ‘twentythirteen’ ));

}

add_action( ‘after_setup_theme’, ‘extra_setup’ );

Once you’re done with adding the above code snippet to functions.php, simply go to your WP admin dashboard-> Appearance-> Menus. Here, you’ll be able to choose from two menu locations available as options for a responsive menu. For this tutorial, I’ve named the menu location as ‘Responsive Navigation Mobile’ and hence just select the checkbox for the same to assign it to the menu.

Step 3- Add New Location to the header

Here, simply open the header.php file in your child theme and find wp_cust_menu. Now, simply add the below code snippet below it:

<?php wp_nav_menu( array( ‘theme_location’ => ‘primary mobile’, ‘menu_class’ => ‘nav-menu’ ) ); ?>;

Step 4- Define CSS classes for the custom menu

CSS Classes

 

Now, you need to use @media queries for toggling between the display of primary menu and mobile-friendly menu. Although, by default WordPress wraps navigation menus in a div tag with a class name fetched from menu name; you can use a separate class name for the menu container using the wp_cust_menu_args filter. For this, simply add the below mentioned code snippet to your functions.php file:

function set_container_class ($args) {

$args[‘container_class’] = str_replace(‘ ‘,’-‘,$args[‘theme_location’]).’-cust’; return $args;

}

add_filter (‘wp_cust_menu_args’, ‘set_container_class’)

With the inclusion of the above code, the container_class is set to the theme location. Also, WordPress will output 2 menus viz: primary menu wrapped in <div class=’primary-nav”> element and primary mobile menu wrapped in <div class=’primary-mobile-nav”> element.

Step 5- Control the menu display via amending the CSS stylesheet

For this, simply add the below code to your style.css:

.primary-mobile-nav {

display: none;

}

@media (max-width: 643px){

.primary-nav {

display: none;

}

.primary-mobile-nav {

display: block;

}

}

If you observe the above code carefully, you’ll find the value for “display” attribute set to none. This means that the mobile menu would be hidden by default. Moreover, in my example, I’ve used a @media query and set the value for ‘max-width’ attribute as 643. This means that the created mobile menu would be displayed only when the screen size is below 643px(this is applicable to TwentyThirteen WordPress theme only). You can easily update your CSS stylesheet with @media queries for adding menus that target multiple screen sizes.

That’s it for now!

Summing Up

So that was all about building a stunning mobile menu to WordPress responsive theme. I’m sure you’d have understood all the steps covered above and would definitely follow them for enhancing the mobile experience for your WordPress website visitors.

victorial 2Victoria Brinsley is a veteran Android programmer for Appsted Ltd – mobile application development company. You can hire Android developer with her best assistance and advices.

Leave a Reply

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