Simple theme using Bootstrap and Underscores

Quick development can be accomplished by using Bootstrap with the Underscores framework. Underscores.me is a vanilla, “no styles included”, framework for starting your developent of a WordPress theme. I use Bootstrap to provide the styling functionality. In order to get started, we first need to get the two working together. Check out my post in combining Bootstrap with Underscores before we start diving into working out a simple green theme.

Adding a NavBar

Underscores has a very minimal responsive menu as a default. We can update the navigation menu using Bootstrap’s simple navbar with a white background. In order to get the navbar to work, we need to do a couple things.

First, go to your WordPress Dashboard and create a new menu and save for the “Primary” menu location.

Next, we will need to download a walker script that will edit the WordPress generated menu on the fly to include the necessary coding for Bootstrap to work. Download Edward McIntyre’s wp-bootstrap-navwalker.php class from GitHub and save the file in the themes main directory. In functions.php add the following to the end of the file

/**
* Register custom navigation walker
*/
require_once('wp_bootstrap_navwalker.php');

In the template-parts/navbar.php file, at about line 20, edit the wp_nav_menu to the following:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'nav navbar-nav', 'walker' => new wp_bootstrap_navwalker() ) ); ?>

just above the wp_nav_menu, you will find the following line

<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'sohud-green' ); ?></button>

replace that line with the below to add the mobile dropdown menu capability

 <div class="navbar-header"> 
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-mobile-collapse"> 
 <span class="sr-only">Toggle navigation</span> 
 <span class="icon-bar"></span> 
 <span class="icon-bar"></span> 
 <span class="icon-bar"></span> 
 </button> 
 <a class="navbar-brand" href="<?php bloginfo('url')?>"><?php bloginfo('name')?></a> 
 </div> 
 
 <div class="collapse navbar-collapse navbar-mobile-collapse">

and then just below the wp_nav_menu add the closing div

 </div>

Now, if you would like to remove the site branding above the navigation menu, then edit the navbar.php file and remove the lines approximately from 2-16 that include the site-branding div that that looks like the following

<div class="site-branding">
 <?php
 if ( is_front_page() && is_home() ) : ?>
 <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
 <?php else : ?>
 <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
 <?php
 endif;

$description = get_bloginfo( 'description', 'display' );
 if ( $description || is_customize_preview() ) : ?>
 <p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
 <?php
 endif; ?>
 </div><!-- .site-branding -->

The navbar looks good but there is one small issue. If in your menu, one of your top level items is a link to a real page or post it does not work. That is because the walker class that we downloaded places a ‘#’ for the link and the jQuery utilized to create the dropdown effect does not follow the link if provided. Also, the walker class will only handle one level of dropdown. Given the limitations, this is at least a good start for a simple menu at the top of the page with only one level of links and the top level must not be linkable pages. If you want to have the links show (but still not clickable) you can edit the wp_bootstrap_navwalker.php file around line 70 where it says

$atts['href'] = '#';

and replace it with the following

$atts['href'] = ! empty( $item->url ) ? $item->url : '';

I am sure with some clever editing, this navwalker could be adjusted to allow deeper levels of dropdown and the ability to have a link in the top level. The issue is that on a desktop sized machine it is easy to have a hover initiate the drop down, but on a touchscreen device there is not a hover. So a cleaver edit to determine if a touch screen vs a desktop could determine whether to put a ‘#’ vs an actual link. I will leave that for another time or for someone else to fix.

Bootstrap Body Container

The body is edge to edge on the screen, and we need to apply the bootstrap container in order to adjust the edge spacing. First, in the header.php file adjust the class in the last line to read:

<div id="content" class="site-content container-fluid">

otherwise, if you would like more spacing, change ‘container-fluid’ to just ‘container’

Moving the Sidebar

The Underscores framework puts the sidebar at the bottom of the page. In order to put this on the right hand side, we will need to edit any template files we would like change the layout for. Edit the following three files: index.php, page.php and single.php (all three are setup the same). Bootstrap provides us the ability to create columns by wrapping the content with special classes. See the Grids Example on the Bootstrap site for ideas.

The code in general looks like this (don’t add this code anywhere, just here as an example)

<div class="row">
 <div class="col-md-7">
 [the main content section here]
 </div>
 
 <div class="col-md-5">
 [the sidebar content here]
 </div>
</div>

In index.php and the other two files, add following on the line after get_header(); ?>

<div class="row">

Then to the next line add the column class to the div to read as follows

<div id="primary" class="content-area col-md-7">

and then change the following line

<?php
 get_sidebar();

get_footer();

to be replaced with the following

<div class="col-md-5">
 <?php get_sidebar(); ?>
</div>
<?php

get_footer();

Save the file and refresh the main page.

Custom.css file

First step is to enqueue a custom.css file inside of functions.php. Place the following line anywhere after the enqueue we added for the Bootstrap css:

 wp_enqueue_style( 'your-theme-custom-style', get_template_directory_uri() . '/css/custom.css');

Now create the custom.css file and save under the root of your theme in a folder called ‘css’. Open the file and let’s start.

Edit as you find appropriate for your own theme. If you are unsure of where to make an edit to adjust the CSS, try using the Developer/Inspector mode of your favorite Internet browser. Most will allow you to temporarily try out changes on the fly so you can see their effect. Use W3Schools for a great guide on CSS.

Here is a list of items that I have changed in order to create a simple green colored theme:

.navbar-default,
.navbar-nav > li > .dropdown-menu,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover
{
 /* light green background for nav */
 background-color: #9EFFE0; 
}


.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover 
{
 /* darker green background for active areas */
 background-color: #00CC8B;
}


body {
 color: #267F63; /* font color */
 letter-spacing: .1em;
}

A little bit about security

By default, this theme actually displays the username of the author in order to make it easy to find other posts by the same author. There is a way to remove the link if you are comfortable editing the template file. Otherwise, check out my brief Author Security post on the topic.

Conclusion

I know this is not the most exciting theme, but the idea was to give you a start to create your own themes by combining the quick profiling with the Underscores framework and combine it with the beauty of the Bootstrap styling. Check out the Bootstrap examples page for other ideas.