Posted on

How To Create WordPress Theme using and Bootstrap


If you are new to WordPress and you are just a beginner than building a WordPress Theme is definitely not an easy task. It is always good to gather the information and to have the idea in the mind about the theme that is to be built. One of the most complex thing is to deal with all the files and to know the purpose of them. It might be difficult for you if you are not much familiar to them. So instead of building everything right from the scratch Automattic team developed the Underscore starter theme for the WordPress developers to design and develop an amazing theme for WordPress.

Creating a WordPress Theme using Underscores and Twitter Bootstrap 3:

There are times when the Web developers have to rely on the designers to complete a particular project which is indeed very time consuming task. To avoid such situations, Twitter Bootstrap play a very vital or key role. Twitter Bootstrap can be considered as a CSS framework in order to design web applications. Twitter Bootstrap has already have the CSS style sheet written and also has an inbuilt jQuery support along with some JavaScript tools. This is indeed time saving and a helping tool.

Steps to create WordPress Theme using Underscores and Twitter Bootstrap 3:

Step 1] Go to and generate your base theme.


The downloaded folder will contain all the files that are needed to build a WordPress Theme.

Step 2] Now go to and you can get the copy of the source code from the download section.


The downloaded folder is with the name bootstrap-3.1.1-dist so rename the folder to bootstrap.

Step 3] Now copy the bootstrap folder into the underscores starter theme.


Step 4] From the functions.php, search function Enqueue scripts and styles and add the following script below it:

function wpmice_scripts() { 
wp_enqueue_style( ‘bootstrap’, get_template_directory_uri() . ‘/bootstrap/css/bootstrap.min.css’); 
wp_enqueue_script( ‘bootstrap-js’, get_template_directory_uri() . ‘/bootstrap/js/bootstrap.min.js’, array(‘jquery’), ”, true );
wp_enqueue_style( ‘wpmice-style’, get_stylesheet_uri() ); 
wp_enqueue_script( ‘wpmice-navigation’, get_template_directory_uri() . ‘/js/navigation.js’, array(), ‘20120206’, true );
wp_enqueue_script( ‘wpmice-skip-link-focus-fix’, get_template_directory_uri() . ‘/js/skip-link-focus-fix.js’, array(), ‘20130115’, true ); 
if ( is_singular() && comments_open() && get_option( ‘thread_comments’ ) ) {
wp_enqueue_script( ‘comment-reply’ );
add_action( ‘wp_enqueue_scripts’, ‘wpmice_scripts’ );

Also make sure that style.css is called after the bootstrap.min.css in order to allow overwriting bootstrap 3 CSS presentation styles.

Step 5] Now open the style.css and remove everything below the stylesheet header. Using the CSS presentation styles the theme can be customized as per the requirements.

Theme Name: test
Theme URI:
Author URI:
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI:
Text Domain: test
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you’ve learned with others.
test is based on Underscores, (C) 2012-2015 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal
/*CSS Presentation Style*/

Amazing! The WordPress Theme is not ready to use and easily customize it as per the requirements. Hope this post was useful for the beginners who wish to design their own themes. You can also share your ideas about this post.

Leave a Reply

Your email address will not be published. Required fields are marked *