WordPress and Bootstrap Navbar – Making it work Quick and Painless

More NavWalker Tutorials

Alter your header.php

  • to include the Bootstrap nav
<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <link rel="icon" href="<?php bloginfo('template_directory'); ?>/img/favicon.ico">

    <title><?php wp_title( '|', true, 'right' ); ?></title>

    <?php wp_head(); ?>

  <body <?php body_class(); ?>>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          <!-- <a class="navbar-brand" href="#"><img src="img/logo.jpg" alt="logo"></a> -->
          <a class="navbar-brand hidden-xs" href="<?php bloginfo( 'url' ); ?>"><img class="navlogo" src="<?php bloginfo('template_url'); ?>/img/logo.png" alt="<?php bloginfo( 'name' ); ?>" /></a>

        <div id="navbar" class="navbar-collapse collapse">
            $args = array(
             'menu' => 'top_menu',
              'depth' => 2,
              'container' => false,
              'menu_class' => 'nav navbar-nav',
              //Process nav menu using our custom nav walker
              'walker' => new wp_bootstrap_navwalker()

            wp_nav_menu( $args );
        </div><!--/.navbar-collapse -->

Grab the navwalker class

Download Edward McIntyre’s wp-bootstrap-navwalker class from [GitHub](https://github.com/twittem/wp-bootstrap-navwalker.

place the wp_bootstrap_navwalker.php in the root of your custom theme.

Require the navwalker class

  • Add this to the top of functions.php



// required files
// Register custom navigation walker


Enqueue CSS and JS

Make sure you have bootstrap css and js enqueued

  • I’m just showing the bootstrap necessary code to include
  • Remember that WordPress comes with jQuery so you don’t need to enqueue it
=            CSS            =

function theme_styles() {
    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/node_modules/bootstrap/dist/css/bootstrap.min.css' );
add_action( 'wp_enqueue_scripts', 'theme_styles' );

=            JavaScript            =

function theme_js() {
    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/node_modules/bootstrap/dist/js/bootstrap.min.js', array('jquery'), '', true );
add_action( 'wp_enqueue_scripts', 'theme_js' );

Add Menu to functions.php

=            Menus            =

add_theme_support( 'menus' );
/* add featured image */
add_theme_support( 'post-thumbnails' );

function register_theme_menus() {
        'header-menu' => __( 'Header Menu' ),
        'primary', __( 'Primary navigation', 'kl' )
add_action( 'init', 'register_theme_menus' );

Add the Menu to the Dashboard

  • Create a new menu and name it ‘Primary’.
  • Make sure to assign the Theme location to primary

Should look like this:

Primary Menu

Review Important code

  • The following code is what wires the Twitter Bootstrap menu to work:
<div id="navbar" class="navbar-collapse collapse">
            $args = array(
             'menu' => 'top_menu',
              'depth' => 2,
              'container' => false,
              'menu_class' => 'nav navbar-nav',
              //Process nav menu using our custom nav walker
              'walker' => new wp_bootstrap_navwalker()

            wp_nav_menu( $args );
        </div><!--/.navbar-collapse -->

View in Browser

Should look similar to this (and be responsive too!)

Bootstrap functional Navbar

WordPress, Gulp and Browser Sync (Modernize your Workflow)

When working with WordPress there are a lot of tasks you have to do over and over. Things like css, js and image minification. You also could concatenate all the files into one minified file. Wouldn’t it be great if you could create a watcher to compile your SASS code on every save? All that can be done using Gulp (if you heard of Grunt, Gulp does the same thing but in a more logical code-minded way and Gulp is also the new kid on the block).

This great tutorial will get you up to speed with Gulp. (Note: it uses Node and NPM)

Wouldn’t it be great if you could make changes and watch the browser update with the changes every time you save? You can do this with LiveReload and the above article uses it but I always have problems with livereload. So I switched to another new kid on the block – browserSync.

Also Bower is super cool. All those dependencies you want you can easily grab and pull to your site with bower. If you create a nifty bower.json file and a package.json file, once you have all the files you mostly use to start a WordPress theme, you can just type:

$ npm init

And it will load all your dependencies in one fell swoop. Pretty cool.

How to use php formatter with Sublime Text 3

add the php-fmt sublime package

Go into

Preferences > Package Settings > phpfmt > Settings – User

Add this

“enable_auto_align”: false,
“indent_with_space”: true,
“php_bin”: “/Applications/MAMP/bin/php/php5.5.10/bin/php”,
“psr1”: true,
“psr2”: true,
“version”: 2