how to create bootstrap underscore wordpress theme step by step guide

WordPress, Underscore and bootstrap is a deadly combination to develop your dream project in WordPress. All the three are the best in their class, tried and tested one,by the thousands.

In this tutorial we will cover how you can add bootstrap framework in underscore WordPress theme, Just follow the instructions as shown in this tutorial and enjoy.

1#  Download Underscore WordPress Starter theme

Underscore is the brain child of automatic the brain behind WordPress thus the WordPress Starter theme comes with all the bells and whistle required in a basic WordPress theme that strictly follow DO NOT REPEAT principle.

Go to underscores.me to download your very own version of underscore, You need not to feed all the fields, these fields are only necessary when you want to customize the header of your underscore theme files.

Now unzip this folder in your localhost under  wp-content/theme/ folder like this

Open WordPress admin panel and activate this theme.

2# BootStrap  and Font awesome Integration

Download  bootstrap framework from getbootstrap.com and font-awesome.  Extract bootstrap framework in a folder on your desktop  or any other place, In my case it is on desktop and the folder name is – bootstrap-3.3.7

The folder contains three sub-folders   CSS, JS, fonts. The same way extract font-awesome zip file into a new folder font-awesome-4.3.0

Now copy the sub-folders CSS, Font,JS  of  bootstrap folder into your theme folder and copy the files of  JS folder.

Copy font-awesome folder into your theme folder exactly the same way and compare the view of my theme folder with your theme-folder.

#2.1 Prepare Your Theme

Its time to prepare your theme so that it should load all the CSS and JavaScripts properly on demand. The best way to load the file on demand is wp_enqueue_style( ) and wp_enqueue_script( ).  These two scripts are already included in the functions.php file.

You need to add your added bootstrap  files and font aweseome files to be loaded on demand.

[code]

wp_enqueue_style(‘bootstrap’,get_template_directory_uri().’/css/bootstrap.css’);

wp_enqueue_style(‘bootstrap-theme’,get_template_directory_uri().’/css/bootstrap-theme.css’);

wp_enqueue_style(‘font-awesome’,get_template_directory_uri().’/font-awesome-4.3.0/font-awesome.css’);

wp_enqueue_script(‘bootstrap-java’,get_template_directory_uri().’/js/bootstrap.min.js’,array(‘jquery’),’20161115′,true);

[/code]

Save your functions.php file. Load your home page and check its source code.

If source code contains your desired files then proceed for the next step.

#3 Make changes in Underscore Starter theme

If you are not very new in theme development , then you must be aware of that the Underscore starter theme strictly follow DRY( Do not repeat ) principle thus divide the whole WordPress theme into parts , the major parts of this is  header.php, index.php, footer.php, These three files are basically responsible to render your home page. You can have the WordPress theme anatomy here at Yoast.com

Open header.php file and check the code responsible for logo and menu system. Here in this bootstrap starter theme, we are making any changes in logo rendering code but we are trying to convert the underscore menu with bootstrap menu.

The starter theme comes with one menu position as you can clearly see in the above code “Primary”  defined in functions.php file.

The implementation of this position “Primary” is defined in header.php file  as shown below

Bootstrap navwalker is a custom class that is used to render WordPress menu in Bootstrap framework format. You are requested to download this file on your system and save this inside inc folder.

Add the following code inside your functions.php file so that it could be attached with your theme file properly.

Now make changes inside your header.php file, first of all we would recommend you to remove all the code between the <nav> and </nav> and paste the following code there.

Refresh your browser and check the result. In my case this is like this

If you are able to receive the output like the above image. It means you have already covered more than 50% your work.

Step 3.2  Change Sidebar.php file

Open sidebar.php file, the file mainly responsible to host your widgets, add the following code to make it compatible with your bootstrap framework.

 Step 3.3 Change footer.php file

Here in footer.php file, we have added an extra div at line No 14. Having its closing at line No.22

The same way col-md-12 class is added in line no-15.

Step 3.4 Make changes in index.php file

Since , we have already include 4 column width in sidebar.php file thus we will take 8 column width in the main content area.  Check the screenshot for better understanding.

Now hit F5 button on your browser window to see the change. The home-page of your website should appear something like this.

The same way you can make changes in single.php, archive.php , 404.php, page,php file. You can also download my version of bootstrap based underscore starter theme.

This is the simplest way, I have converted Underscore WordPress Starter theme into Bootstrap Underscore WordPress theme, Do you have any other idea to convert it?