/ bootstrap

Strips 0.54 for WordPress

Announcing an update to Strips, the WordPress theme that I’m developing and that this site is running.

My previous tumbles with WordPress menus

When I first made the menu buttons back in February, I didn’t know that much about Bootstrap. My focus at the time was learning to write a WordPress theme from scratch. So I just wrote the menu using the WordPress API without worrying about Bootstrap. One thing at a time.

A couple of months later, I did go back for revenge on the menu, again without Bootstrap. I was specifically trying to learn more about working with and styling menus using the WordPress API. I got lackluster results but I learned some things.

Through Strips 0.53, this was how the theme header looked:

<header id="header-container">
    <h1><a href="<?php echo home_url() ?>"><?php bloginfo('name') ?></a></h1>
    <div> <!-- navigation -->
        <?php wp_nav_menu(
                'theme_location' => 'main',
                'container' => 'nav',
                'container_class' => 'menu-main-container',
                'menu_class' => 'nav nav-pills',
        ) ?>
    </div> <!-- end navigation -->

Bootstrap navbar

Now that I’m more familiar with both the WordPress API and Bootstrap, I thought I’d have another go and make the WordPress menu work as a Bootstrap navbar. This time, the results were good. I had a nice morning of coding a few days ago where I got a lot of little wins and some new dots were connected in my mind.

Strips 0.54 uses the Bootstrap navbar scheme in conjunction with WordPress menus. For the most part, nothing on the front end changes. This is just me scratching an itch.

There is one visible change though: using Bootstrap, I can now achieve collapsed menus on smartphone-sized devices. The merit of collapsed menus (and hamburger icons) are heavily debated, I am aware. I don’t necessarily think collapsed menus are the best solution to the problem of streamlining site display on small screens, but I do not think that they are the devil either. (If you want to do away with the hamburger, Luis Abreu has an article which provides ideas for alternatives.)

At any rate, I wanted to implement collapsed menus on this site as an exercise and it went well. On iOS, you should only see the collapsed menus on the iPhone. All flavors of iPad will show the normal menu.

For small screens, I have chosen a non-standard icon to represent the collapsed menu toggle button. Instead of the hamburger icon, I’m using a Bootstrap glyph icon with a downward-pointing arrow (glyphicon-collapse-down). I just wanted to try it out and see how it sat with me after a few days. As I write this, I am still debating, but am leaning towards the hamburger.

This is what the nav looks like now:

<nav class="navbar">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="glyphicon glyphicon-collapse-down gray"></span>
            <a href="<?php echo home_url() ?>" class="navbar-brand"><?php bloginfo('name') ?></a>

                wp_nav_menu( array(
                    'menu'              => 'main',
                    'theme_location'    => 'main',
                    'depth'             => 2,
                    'container'         => 'div',
                    'container_class'   => 'collapse navbar-collapse',
                    'container_id'      => 'myNavbar',
                    'menu_class'        => 'nav navbar-nav',
                    'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                    'walker'            => new wp_bootstrap_navwalker())

Since this is a Bootstrap-compliant navbar, it would be simple to do other Bootstrap-y things to it like inverting the color scheme (.navbar-inverse), fixed top menu (.navbar-fixed-top), or fixed bottom menu (.navbar-fixed-bottom).

Making WordPress menus and Bootstrap navbar work together

This wasn’t as straightforward as I thought it would be. Apparently a WordPress nav walker class is needed. Details can be found on twittem’s Github. Please read about it there as I don’t have any further insights on the walker.

Adding the walker class was the only speed bump. The rest was fairly simple to implement.