How to Build a WordPress Responsive Theme On Bootstrap

Considered as the world's most popular HTML, CSS and JavaScript framework for developing mobile first, responsive projects, Bootstrap has been heavily used and recommended for custom web development projects. Bootstrap has served as a great starting point for building fully responsive and eye-catchy WordPress sites. In this post I'll be walking you through all the steps associated with creating a WordPress theme from scratch using Bootstrap.

Install WordPress

First you'll need to install WordPress and download and unzip Bootstrap files. You may also opt for installing the Theme Test Drive plugin in case you are building a responsive WordPress theme using a live website and hence don't want people to view the site while it's being developed.

Step 1

Once you're done with putting all the above mentioned things in place, simply open the directory which contains all your WordPress files. Just go to wp-content-> themes as shown in the below screenshot:

 

Step 2

Now, create a new folder called “wp-bootstrap” and paste the bootstrap folder within the same as shown in the below screenshot:

 

Step 3

Within this new folder, create a new file called index.php as shown below:

Step 4

Copy the source code from a simple website/webpage of your choice and paste the source code into index.php file. With that you'll have a static HTML page and now it's time to create the main CSS page.

Step 5

Now, within the same folder as the index.php page, go ahead with creating a new file called style.css. After having created a style.css file at the level similar to index.php file, simply add the below comment to its top:

/*

Theme Name: WP-Bootstrap

Description: A comprehensive tutorial on how to build a responsive wordpress theme using bootstrap.

*/

 

Step 6

Upload an image which you want to be visible along with your theme in WordPress admin area. Ensure that this image is 300 x 225 px and is named as “screenshot.png”.

Step 7

Finally, go to your WordPress admin area-> Appearances-> Theme where you'll be able to see a new theme named as wp-Bootstrap. Here, click on the “Activate” link available under WP Bootstrap theme for setting this theme as your site's current theme. Once activated, this theme would appear as below for your website:

 

Step 8

Since none of the CSS is working on your site at this time, you'll be required to convert the static file into a fully-functional WordPress theme. Now, create empty files for header.php, sidebar.php and footer.php. After this, simply paste all HTML that usually goes into top of every page into this empty header.php file. Also, paste the HTML that usually goes into bottom of every page into the footer.php file.

Step 9

In order to create a drop down menu, add the below code to functions.php: (also see below to add the required JavaScript code)

/**
* class Bootstrap_Walker_Nav_Menu()
*
* Extending Walker_Nav_Menu to modify class assigned to submenu ul element
*
* @author Rachel Baker
**/
class Bootstrapwp_Walker_Nav_Menu extends Walker_Nav_Menu {
function __construct() {}
function start_lvl($output, $depth) {

$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"dropdown-menu\">\n";
}
}

In order to show the active menu option, add this code:

/**
* Replace css-class "current-menu-item" to "active"
* in function wp_nav_menu()
*/
add_filter('wp_nav_menu','current_to_active');
function current_to_active($classes) {
$classes = str_replace('current-menu-item', 'current-menu-item active', $classes);
return $classes;
}

Next, you need to add arguments to the menu function:

$menu = array(
'theme_location' => 'primary_nav',
'menu' => '',
'container' => '',
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu nav navbar-nav',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => new Bootstrapwp_Walker_Nav_Menu()
);
wp_nav_menu( $menu );

menu_class і walker are the required arguments!

Step 10

Now, after we figured out how to create the menu, lets add a couple of classes for the overall HTML elements look. We need to use JavaScript here. Add the following code to your javascript file:

// Bootstrap styles
jQuery('table').addClass('table table-striped table-hover table-bordered');
jQuery('iframe').wrap('<div class="embed-responsive embed-responsive-16by9">').addClass('embed-responsive-item');
jQuery('input[type="submit"], button').addClass('btn btn-primary');
var jQuerywindow = jQuery(window);
// Adding the needed html to WordPress navigation menus //
jQuery("ul.dropdown-menu").parent().addClass("dropdown");
jQuery("ul.nav li.dropdown a").addClass("dropdown-toggle");
jQuery("ul.dropdown-menu li a").removeClass("dropdown-toggle");
jQuery('a.dropdown-toggle').attr('data-toggle', 'dropdown');

// Adding dropdown caret for dropdown menus, if it does not already exist
jQuery('.menu li:has(ul.dropdown-menu) > a:not(:has(b.caret))').append(' <b class="caret"></b>');

As a result, we should get the tables and buttons that use Bootstrap style. YouTube videos will also be responsive. The dropdown menu will have an icon and allow for the sub-menu links to appear on click.

Step 11

Use the WordPress tags: get_header() and get_footer() for including the header and footer into the index.php file. The updated index.php file would now look like below:

<?php get_header(); ?>

     <!-- content section -->

     <div class="content-sec">

       <h1>Hello, world!</h1>

           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>

      </div>

     <!-- Example row and columns -->

     <div class="row">

       <div class="col-sm-4">

         <h2>Heading</h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<p><a class="btn" href="#">View details &raquo;</a></p>

       </div>

       <div class="col-sm-4">

         <h2>Heading</h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<p><a class="btn" href="#">View details &raquo;</a></p>

       </div>

       <div class="col-sm-4">

         <h2>Heading</h2>

             <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<p><a class="btn" href="#">View details &raquo;</a></p>

       </div>

     </div>

<?php get_footer(); ?>

 

Step 12

Load the JavaScript using wp_head() function.

For this, simply create a new file called functions.php and load your Javascript there. Paste the below code in the functions.php file:

<?php

function wp-bootstrap_scripts_with_jquery()

{

// Register the script like this for a theme:

wp_register_script('custom-script', get_template_directory_uri().'/bootstrap/js/bootstrap.js', array( 'jquery' ) );

// For either a plugin or a theme, you can then enqueue the script:

wp_enqueue_script( 'custom-script' );

}

add_action('wp_enqueue_scripts','wpbootstrap_scripts_with_jquery' );

?>

Finally, navigate to your site and resize it as viewable from a tablet or a suitable mobile size for testing the functioning of the theme. Clicking on the menu drop down would look like this:

Creating the WordPress Homepage

With the basic static template being set up, it's time to make it dynamic via creation of a homepage in WordPress. For this, simply head to WordPress admin area-> Pages-> Add New. Name the page as “Home” and click on HTML Tab placed above the default Content Editor. After this, cut the remaining marup from index.php file and paste the same into this Homepage, finally clicking on “Publish” button. The Homepage would look like this:

Adding Content and Navigation

Add the Contact Page, About Us, News pages in your WP admin area. For replacing the static navigation menu with the one that displays the just added pages, simply find the unordered list with class “nav” and delete all the list items. Now, the markup within the div in the class “navbar” would look like this:

<nav class="navbar navbar-default">

<div class="container-fluid">

   <!-- Brand and toggle get grouped for better mobile display -->

   <div class="navbar-header">

     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

       <span class="sr-only">Toggle navigation</span>

       <span class="icon-bar"></span>

       <span class="icon-bar"></span>

       <span class="icon-bar"></span>

     </button>

     <a class="navbar-brand" href="<?php echo site_url(); ?>"><?php bloginfo('name'); ?></a>

   </div>

   <!-- Collect the nav links, forms, and other content for toggling -->

   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

     <ul class="nav navbar-nav">

            <?php wp_list_pages(array('title_li' => '', 'exclude' => 4)); ?>

     </ul>  

   </div><!-- /.navbar-collapse -->

</div><!-- /.container-fluid -->

</nav>

Making Updates to the Header

Title tags are of prime importance when it comes to designing a website's theme. You can use the WordPress tag wp_title() for fetching the name of post or page in the title as an addition to the site's name. This tag will be customized as shown below:

wp_title('|',1,'right');

Lastly, we'll be widgetizing the WordPress theme which will enable us to use WordPress widgets in the sidebar. For this, just add the below code to the functions.php file:

<?php

function wp-bootstrap_scripts_with_jquery()

{

// Register the script like this for a theme:

wp_register_script('custom-script', get_template_directory_uri().'/bootstrap/js/bootstrap.js', array( 'jquery' ) );

// For either a plugin or a theme, you can then enqueue the script:

wp_enqueue_script( 'custom-script' );

}

add_action('wp_enqueue_scripts','wpbootstrap_scripts_with_jquery' );

if ( function_exists('register_sidebar') )

register_sidebar(array(

'before_widget' => '',

'after_widget' => '',

'before_title' => '<h3>',

'after_title' => '</h3>',

));

?>

After this, just head back to the sidebar.php file and replace the static content with the one shown below:

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

<?php endif; ?>

Doing this will allow you to update the sidebar with widgets using the admin panel.

That's it! Has this post been helpful? Please share your feedback in the comments area below so that we can improve it.