Dev Notes

Software Development Resources by David Egan.

Bootstrap 3 Header Markup for Sage WordPress Theme


Bootstrap, Sage, WordPress
David Egan

Sage is an excellent starter theme for WordPress. It comes with Bootstrap connected out-of-the-box, but it does not have a “standard” Bootstrap nav markup. The old Roots theme (Sage’s parent) used to have a NavWalker() class that extended the WordPress Walker_Nav_Menu() class to give cleaner menu markup and Bootstrap friendly classes.

To add the NavWalker() class, from your theme root, run:

wget https://gist.githubusercontent.com/DavidCWebs/445308a3beeffef3d4cf/raw/2187f99bf3e1e9b0f571e507b614ca95ed7df286/nav.php -O lib/nav.php

NB: see update below for a potentially better option.

Then replace the code in your templates/header.php with this (or similar Bootstrap-style markup):

<?php require_once( get_template_directory() . '/lib/nav.php' ); ?>
<header class="banner navbar navbar-inverse navbar-fixed-top navbar-shrink" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only"><?= __('Toggle navigation', 'sage'); ?></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="<?= esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a>
    </div>
    <nav class="collapse navbar-collapse" role="navigation">
      <?php
      if (has_nav_menu('primary_navigation')) :

        wp_nav_menu(['theme_location' => 'primary_navigation', 'walker' => new Roots\Sage\Nav\NavWalker(), 'menu_class' => 'nav navbar-nav']);

      endif;

      ?>
    </nav>
  </div>
</header>

If you are using the navbar-fixed-top class on the navbar element, you’ll need to add the following style rules:

// Offset navbar from top if logged in to allow for the WP admin toolbar
// -----------------------------------------------------------------------------
.logged-in .navbar-fixed-top {
  margin-top: 30px;
  // At the extra small screen and smaller, WP toolbar is taller
  @media (max-width: $screen-xs-max) {
  	margin-top: 46px;
  }
}
// If the navbar is fixed, push down the wrap
// -----------------------------------------------------------------------------
.navbar-fixed-top + .wrap {
  margin-top: 78px;
}

Update September 2016

The original article didn’t provide the license for the NavWalker. I’ve now included the license in the file docblock.

The NavWalker above is from quite an old version of Roots - I can’t remember the exact version. The Roots NavWalker class was dropped in March 2015. The link below is for the most recent version, and it may be better for your purposes: https://github.com/roots/sage/blob/9efeb67daffa477873d33adafd8b12386c4298ba/lib/nav.php

I haven’t tried this class, but I will on my next WP project. It looks like it handles custom post types in a better way than the older NavWalker referenced in my original article.

To copy it into your project, run:

wget https://raw.githubusercontent.com/roots/sage/9efeb67daffa477873d33adafd8b12386c4298ba/lib/nav.php -O lib/nav.php
comments powered by Disqus