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.
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?
- Crucial Features in Talent Management Software - February 3, 2021
- The Career Change Guide: 7 Steps To Make A Career Change in 2020 - November 3, 2020
- 4 Steps to Write a Winning Digital Transformation Strategy - October 31, 2020