Add WP Bootstrap Navwalker To You WordPress Theme

Why Add Bootstrap Navwalker?

The main reason for adding this addition to your WordPress Theme is best said by its author [Git Link]

A custom WordPress Nav Walker Class to fully implement the Bootstrap 4 navigation style in a custom theme using the WordPress built in menu manager.”

By implementing this code, you will be changing how the menus are generated by WordPress. This will allow the incorporation of Bootstrap 4 styling and standards found on a pure Bootstrap built website. This addition should be pair with an installation of Bootstrap by Twitter [Link] and a consideration for using a Bootstrap focused design.

Please check out “ADDING BOOTSTRAP TO AN UNDERSCORES THEME”  for a detailed guide demonstrating how to add and create a brand new underscores theme with a bootstrap integration.

Downloading the Navwalker Files

Lets head over to the main Git Repo for WP Bootstrap Navwalker [Link]. Go ahead and download a copy of repository and open the downloaded Zip file.

Open the downloaded Zip and select the file called:

class-wp-bootstrap-navwalker.php

Place this file in your active theme folder, or the theme folder you plan to use. File Path should look like so:

Main website folder (folder) -> wp-content (folder) -> themes (folder) -> theme folder (folder) -> add class-wp-bootstrap-navwalker.php

Integration of WP Navwalker

Now that your file has been added to your theme we can start hooking up the Navwalker to your Menus, First lets head over to the functions.php file located in the theme folder – and add the following code:

/**
 * Register Custom Navigation Walker
 */
function register_navwalker(){
	require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );

If you encounter errors with the above code use a check like this to return clean errors to help diagnose the problem.

if ( ! file_exists( get_template_directory() . '/class-wp-bootstrap-navwalker.php' ) ) {
    // File does not exist... return an error.
    return new WP_Error( 'class-wp-bootstrap-navwalker-missing', __( 'It appears the class-wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
} else {
    // File exists... require it.
    require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}

If no menu has been previously declared, please declare a new menu in your functions.php file.

register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'THEMENAME' ),
) );

Using WP Navwalker in your menu

Lets take a second to look at what we have completed. First, we added the files needed to use WP Navwalker with our theme, added the code necessary to connect the new WP Navwalker file to our WordPress Theme, and for our last step we will create a Menu (most likely located in the header.php file) that will use WP Navwalker!

To update any Wordpress Menu in your theme with the newly added Navwalker use the new wp_nav_menu argument by adding a ‘walker’ item to the wp_nav_menu args array.

wp_nav_menu( array(
    'theme_location'  => 'primary',
    'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id'    => 'bs-example-navbar-collapse-1',
    'menu_class'      => 'navbar-nav mr-auto',
    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
    'walker'          => new WP_Bootstrap_Navwalker(),
) );

You menu will now implement the same drop down features found in the Bootstrap by Twitter examples!

Typically additional markup is added to these menus, here is an example of a fixed-top menu that collapse for responsive navigation at the md breakpoint. Additional menu options can also be found in the Bootstrap documentation as well [Link]

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?>">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
        <?php
        wp_nav_menu( array(
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker(),
        ) );
        ?>
    </div>
</nav>

To change your menu style add Bootstrap nav class names to the menu_class declaration.

Review options in the Bootstrap docs for more information on nav classes.

You should now have a fully functioning Bootstrap by Twitter Drop down menu integrating into you WordPress theme!

Adding Bootstrap to an UnderScores Theme

In this article, we will be discussing how to add Bootstrap by Twitter to an Underscores.me WordPress Theme! There is much to be desired from this simple combination, and for most it is a great place to start for creating you own custom WordPress Theme. This article will expect that you understand the folder and file structure of a WordPress site, as well as the multiple different hooks and functions found in a WordPress Theme’s function.php file.

Add Underscores Theme Template

First we will need to download our theme template by going to Underscores.me and generating the base theme. Feel free to name your theme during this step as well!

home page of underscores.me

Now that your Underscores Theme is downloaded, head over to the backend of your WordPress website. Once logged in, go to “Appearance” -> “Themes”, click the “Add New” button and then the “Upload Theme” button located around the top of the page. Select the previously downloaded .zip file from Underscores and click “Install Now”. All that should be left is to “Activate” your new blank and almost formate-less theme.

Theme section of a WordPress webstie

Download & Add Bootstrap

Now that we have your Underscores.me theme added and activated, its time to download and add our Bootstrap files! Go to getBootstrap.com click on the “Download” button located at the top right of the page, then download the files under the section titles “Compiled CSS and JS”.

download Bootstrap

open the downloaded .zip file “bootstrap-{version #}-dist.zip”, and rename the extracted folder to “bootstrap”. placed the newly renamed folder inside of your newly added underscores theme folder. This will be located: WordPress (Root Folder) -> wp-content (folder) -> themes (folder) -> {underscores theme name} (folder) – place the “bootstrap” (folder) here.

File Order

Connecting Bootstrap to Underscores Theme

Now that Bootstrap is located inside of your Underscore.me Theme, its time to hook them together. Open your function.php file located in your Underscores.me Theme folder. Add the following code in the to the style enqueuing function located around line:145


// Adding Bootstrap to the Theme - Start

wp_enqueue_style( 'bootstrap-style', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
wp_enqueue_script( 'bootstrap-js' , get_template_directory_uri() . '/bootstrap/js/bootstrap.bundle.min.js', array('jquery') );

// Adding Bootstrap to the Theme - Start

Example of a completed function.php file:

Save the function.php and you are all done! Now all that is left is to enjoy creating a custom WordPress theme!

CSS Media Queries Min vs Max

Max-Width: If device width is less than or equal to 800px, then do {…}
** Use sparingly **

Min-Width : If device width is greater than or equal to 800px, then do {…}
 ** Use as much as possible as Max will load more styles **



<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width:960px){
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width:1440px){
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width:2000px){
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width:480px){
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width:768px){
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

Credit :

  • http://kevinwtharp.com/lessons/Dynamic_Web_Technologies/Implementing_a_Responsive_Design_using_CSS_Media_Queries.html
  • https://stackoverflow.com/questions/13550541/media-min-width-max-width

One Typeface – How to use fonts effectively

How many fonts should I use on my website?

Well, it depends. 
As a general rule, you should probably stick with 2 or 3 fonts for your website.

Design

Generally speaking, using 2 or 3 fonts will ensure that your site has a consistent look and feel. Establishing a visual hierarchy for your users will be easier with less fonts. 

Load Time

Like everything on your website, fonts must be loaded in order for a user to see them. Using too many fonts can actually slow down your website significantly. 

Is 2 or 3 fonts enough?

We happen to think so. In fact, we believe that most of the time you can design a website using just one font.

The trick is to use variations of font weight, spacing, and line height to establish a clear visual hierarchy. The best part? Since its technically all the same font, your site is almost guaranteed to have a consistent look and feel. This consistency is great for brand recondition. We suggest that you actually use this rule across platforms and mediums to further establish your brand.

Where can I find fonts?

We suggest checking out Google Fonts .

They have a large variety of  web fonts that load quickly and look great. You can also download the fonts you choose and use them for other mediums, such as print and presentations.

Oh, and did I mention that it’s free?

The One Font Challenge

Using Google Fonts, we have created a few examples of using one font. By using different font sizes, weights, spacing and line height, we think we were able to establish a solid look for each of the three examples. We used some free images from Unsplash to help establish the tone for each example. Remember, all of these fonts can be downloaded for free using Google Fonts.


Example : Merriweather


Example : Montserrat


Example : Open Sans

Think Lightweight – Logo and branding

THINK LIGHTWEIGHT

think_lightweight_final_logo

 

Think Lightweight is a company that focuses on applying lightweight engineering principals to traditional solid wood applications. As the company continues to grow, we worked with them to update both their website and branding.

You can visit the official Think Lightweight website here.


The Logo

think_lightweight_final_logo

 

When creating the Think Lightweight logo, we wanted to emphasize both the lightweight and structure elements that represent the company. Think Lightweight’s previous branding contained a feather, which we felt represented the idea sufficiently. With the feather as the focus, we chose a light blue color that continued to represent lightweight. Finally, we paired this with both a hexagon and the Gotham font. These are both bold visuals that we feel represent the strong structures Think Lightweight creates.


 The Logo Use Guide

In addition to creating the logo, we provided Think Lightweight with a Logo Use Guide. This document helps Think Lightweight maintain a cohesive style in all future branding. You can view the guide by clicking the image below.

 

capture


The Brochure

Because Think Lightweight offers many different products and specifications, we worked with them to create a product brochure. For both the product brochure and the website, we created individual product logos. The major challenge in creating the brochure was maintaining all of the technical information in a more simplified way. We accomplished this using a few design elements through out the website and the brochure. This includes hexagons, icons, colors and typography. You can view the entire brochure by clicking the image below.

 

brochure-page

 

Dhali Icons

DHALI WEB DESIGN ICONS

Creating a more cohesive look for Dhali’s Website.


Home Page Icons

At Dhali Web Design, our core business involves making the web an accessible and enjoyable environment for our clients. We do this by building a majority of websites on WordPress, which allows them access to their own content and media. We also involve them in our designing process, making sure everything meets expectations. In order to represent this environment, I wanted to create friendly icons that get at the core of our services.

You can view the full sized icon set on our Home Page, or check out some smaller version below.

 

website-maintenance e-commerce web-design website-hosting wordpress-dev wordpress-managment

 


WordPress Services Icons

In order to maintain a cohesive look and feel across our site, we’ve created icons similar to the homepage for all of our services.

Below are a few of the icons we created for the WordPress Services page. For a full list of our services, Click Here.

 

wordpress-training wordpress-backups website-updates staging-server  plugin-updates email-hosting

 

White Glove Data

This week most of my attention was directed to a new client of ours, White Glove Data. After the initial meeting I began work on the logo that will be used on the site and branding. When this process was completed and approved, I began work on the website layout.

A larger version of the comp can be seen here.

whiteglovedata-comp

 


Below are some shots of my initial brainstorming process, and original Photoshop wire frame. The purpose of these is always to place elements and content in a effective way before I begin to plan any design elements. Typically, wireframes help me lay out the structure of the site without having to worry about colors, typography, icons or images.

 

IMG_4384wireframe

 

 

The Dhali Team illustration

This week I was able to work on a few fun projects regarding our team here at Dhali. Part of this was creating avatar images for us in the office. I wanted to create an accurate representation of everyone in the most minimalistic style possible. When I finished I threw them all together.

This evolved into a “team portrait”.

team

 

 


 

My process for these is to take a photo of the team member and throw it into illustrator. Then I select the layer and set it to template mode, which makes it easier for me to distingish the layers. From here, I try and trace out all of the major features using the pen tool. liia-rough

From here, I get rid of the back ground image and make a few decisions on style and color.

liia-two-02

The last thing I do is tighten up the design and add a background. The final avatar can be seen below.

liia

Case Jacket – Website Redesign

Case Jacket is a fast and straightforward case management system that is used by over 3000 people. Currently, the software is being redesigned to a more modern look and feel, so I decided that creating a landing page that reflects the new look.


 

I started my design with a few very rough whiteboard outlines, refining and editing until I land on something that will work. This stage of the process is focused on functionality over design.

 

IMG_0106


 

Once I lay out the major elements of the site on a whiteboard, I move to a notebook to further refine the idea. Again, this stage of the design is less about look and feel, and focuses instead on functionality.

IMG_0105


 

The next step is bringing my ideas into Photoshop. This is where most of the design elements like color, logo and typography are added.

casejacket-mockup

Design Matters – Redesign Concept

While i’m at the office I often have a design podcast running in the background. One of the podcast sites I visit most is Design Matters with Debbie Millman, so I decided to make a redesign concept in my spare time.


 

design-matters-mac


 

The current website has some awesome elements that I felt can be emphasized with more white space, and a side bar for navigating the different episodes. I also decided to make a large banner as a “featured podcast” section, highlighting the most recent guest. Instead of going to a different page, the podcast would play on the landing page, allowing you to scroll around while you listen. I also changed the font, weight and color scheme to highlight important areas.

You can see a before and after screen shot below. You can listen to the Design Matters podcast here.

 


Design-matters


 

Design-matters-redesign

Raetz Law – Logo Design

We are currently working on a website redesign for RaetzLaw.com. As a part of this project, I am creating a logo to compliment the new site and colors. After some initial research and sketching, I created a few renditions using Illustrator. The early renditions can be seen below.

raetzlaw

From this point, I decided to focus on the logo designs I felt were the strongest. After adding some taglines and tightening things up a bit, this version was sent to the client for review.

Raetz Law Branding

Since then I have received feedback from the client. They have suggested getting rid of the scales in favor of the attorneys initials. The revisions can be seen below.

Raetz Law Branding (revised)