steve.fm

A work in progress

Using Bootstrap Navigation in WordPress

The navigation bar of a website, or nav bar for short, is typically a collection of links displayed across the top of a site.

Both Bootstrap and WordPress have opinionated ways for structuring the navigation of a site. There are definite benefits to using WordPress’s menu manager and functions to display the menu items you set up in the Admin panel. Because the functions provided by WordPress output to a different format than Bootstrap, there are a few options to proceed.

  1. We could manually create the navigation bar and its items.
  2. We could build our own styles based on the output of the menu manager’s functions.
  3. We could use a third-party plugin to translate the menu manager’s output into a Bootstrap-friendly format.

The first and second options, while attractive now, probably won’t be best long-term. First — While my site only has a few items now, I’ll save time when I need to add items later if I build a dynamically generated menu. Second — Rolling my own styles only feels like it will save time. Even though I’m planning to modify the Bootstrap nav bar, I’ll probably end up replicating most, if not all, of its responsive functionality in both CSS and Javascript.

After doing some research, it seems like there’s a plugin for WordPress that does exactly what I want: [https://wordpress.org/plugins/my-bootstrap-menu/]. When getting up to speed quickly, I find that it’s typically best to try before you buy, and buy before you build. If I followed my own advice on this project, I’d probably be using Medium, but I don’t just want to write — I want to build.

Once I have a menu in place, the My Bootstrap Menu plugin will let me use it and will automatically style it. To get a menu to show up in WordPress admin, I’ll have to register it within my functions.php file.

add_action( 'init', 'register_my_menu' );
function register_header_menu() {
        register_nav_menu('header-menu',__( 'Header Menu' ));
}

Now that I’ve built it in the admin, I’ll add it to my header.php file by using the wp_nav_menu() function.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Steve Carroll">

    <title>
        <?php echo get_bloginfo('name'); ?> &mdash;
        <?php echo get_bloginfo('description'); ?>
    </title>

    <script src="https://use.typekit.net/uqh7odo.js"></script>
    <script>try{Typekit.load({ async: true });}catch(e){}</script>

    <?php wp_head(); ?>
</head>
<body>
    
    <div class="page-header">
        <div class="container">
            <div class="row">
                <div class="col-sm-offset-2 col-md-offset-2 col-sm-10">
                    <h2><?php echo get_bloginfo('name') ?> <br>
                    <small><?php echo get_bloginfo('description') ?></small></h2>
                </div>
            </div>
        </div>
    </div>

    <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
    
    <div class="container">

It’s not Bootstrap themed yet, but it’s there. Now I’ll update the settings in the My Bootstrap Menu plugin to recognize that menu and convert it to Bootstrap’s navigation format.

It was that easy…

It is, however, not exactly how I want. I’d like the Home link to be aligned with my blog’s title and the content. Ideally, I’d also like the Caverly link to be right-aligned, but I can deal with everything left-aligned for now.

How’d we get there?

I added the following to my stevefm.less file:

.navbar-inner .navbar-collapse {
    .row;
    > div {
        .make-md-column(7);
        .make-sm-column(9);
        .make-sm-column-offset(2);
    }
}

Looking at the source code that My Bootstrap Menu generated for WordPress, I was able to apply some of Bootstrap’s mixins to the menu structure so it would align correctly. Basically, I made the generated elements behave like a .container class with a .row and .col-* classes depending on the screen size.

Read more about Building Steve.fm