Adding Bootstrap to an UnderScores Theme

In this article, we will be discussing how to add Bootstrap by Twitter to an 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 and generating the base theme. Feel free to name your theme during this step as well!

home page of

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 theme added and activated, its time to download and add our Bootstrap files! Go to 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 #}”, 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 Theme, its time to hook them together. Open your function.php file located in your 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 */

Credit :


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.


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 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



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.



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.




Dhali 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.



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.





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”.





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.


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


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.




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.



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


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.




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.





Raetz Law – Logo Design

We are currently working on a website redesign for 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.


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)

Dashboard Concept

This week I focused on creating a simple and clean dashboard that can be applied to school or office setting. The goal of the dashboard is making the navigation feel new without taking away from the usability, and keeping the notifications in focus. To accomplish this, I created a navigation that rest on the left with a notification alert under the users photo.

You can see an example of the welcome page and a sub page below.


comp-one comp-two