Adding Pure.css menu classes to WordPress menus

27 March 2015 #Code

Update: The code below has been updated to work with nested menus with drop-downs.

In Pure.css 0.6.0 the structure of menus has been changed to use a specific class for the <ul> container, <li> item and <a> link:

  • pure-menu-list
  • pure-menu-item
  • pure-menu-link

…respectively.

So if you’re generating your navigation in WordPress using the built-in Menus you’re going to need to get these classes into your HTML elements.

WordPress provides a function called ‘Walker’ which is not something I would begin to pretend to understand fully, I just know the following code works:

  1. Add this code to your theme’s functions.php
  2. Then call your menu like this

<ul class="pure-menu-list">
  <?php wp_nav_menu( array('theme_location'=>'main-menu', 'walker' => new Pure_Menu_Walker(), 'items_wrap' => '%3$s', 'container' => false) ); ?>
</ul>

You should then end up with the correct classes in the correct places to continue using Pure.css menus.

Enjoy!