May 252014
 
Article WordPress

Our previous post explained how to configure the use of the responsive Bootstrap 3 framework in a wordpress theme.

But, setting up a menu as a responsive navigation bar requires some additional settings. This post focuses on how to carry out this task.

 

Adding a responsive bootstrap menu to a WordPress theme – custom walker class

A menu is inserted in a wordpress template with a call to wp_nav_menu(). This function uses the PHP class Walker_Nav_Menu. Both wp_nav_menu and Walker_Nav_Menu are defined in the wp-includes/nav-menu-template.php script).

The HTML code of a menu, generated by Walker_Nav_Menu, is a tree of unsorted lists using the HTML tags <ul> and <li>,  where each list element is a menu entry. Each <li> tag is assigned a set of CSS classes, that can be used to tailor the design of the menu.

The following example shows the HTML code generated for a threee-level menu:

Bootstrap also implements the responsiveness of menus by means of classes assigned to these tags, only that it uses different class names. Bootstrap also adds some extra elements required to make the menu responsive. For instance, the square button with three horizontal lines that is displayed when the menu is in a collapsed state (The default state for mobile devices with small screens).

Adding these classes and extra elements requires replacing the default WordPress walker with a custom walker class.

Luckyly, we don’t have to do it from scratch. Instead, we can download from https://github.com/jeffmould/multi-level-bootstrap-menu a PHP script that defines a PHP class wp-bootstrap-navwalker implementing this functionality. Jeff Mould’work is based on the wp-bootstrap-navwalker class developed by twittem (that can also be downloaded from github). Jeff made some changes to the original class, to support multi-level menus. He has also replaced the use of Glyphicons with the use of Font Awesome icons to enhance the presentation of the menu.

Once the compressed file has been downloaded, its content is extracted under the theme’s directory.

Next, we must add to functions.php the sentence to include this script:

The CSS required needs to be imported as well. This is done adding the import sentence in style.css:

Finally, the call to wp_nav_menu found in header.php needs to be modified, adding an argument to request the use of the custom walker, and the additional markup:

In header.php, before:

After:

In this code, we can see that:

  • The call to wp_nav_menu is now placed inside a <nav> element. This element also contains a button with CSS class “navbar-toggle”. This is the square button with three dashes that is displayed when the menu is collapsed.
  • The array that is passed as argument in the call to wp_nav_menu() also has some additional elements now. Among them, the value of the  ‘walker’ element is an instance fo the custom class wp_bootstrap_navwalker() defined in the previously downloaded script.

With these changes done, we can check the new look of our menu in the browser of a desktop computer:

menu-bootstrap-desktop

and the rendering of the menu on a mobile device, when it is collapsed and when it is opened:

menu-mobile-collapsed

collapsed responsive menu

menu-mobile-deployed

deployed responsive menu

References

 

 Posted by at 8:26 am

 Leave a Reply

(required)

(required)