In this post we will learn how to create a wordpress full responsive blog theme with bootstrap. Bootstrap is one of the most popular front-end framework. You can also learn some basic of Bootstrap design from my last post of bootstrap at here.

Using bootstrap for wordpress theme development make your work more easy and help to work fast with designing.

What is a Responsive Theme?
There are no of devices with different screen sizes and different resolution and operating systems in market and we need to create a website which suits or adjust to these screen so we can use responsive design to get this thing done.

“WordPress + Bootstrap = New Powerful, attractive and responsive website.”

Back in 2013 Google has also published their guideline on “Building Smartphone-Optimized Websites“ that contains details in entirety about how Google treats responsive websites. And Google’s Webspam team head Matt Cutts, also release a video in which he explain that responsive design does not affect your website seo click here to read.

WordPress + Bootstrap

WordPress is one of the most popular CMS which is used to create a blog and websites in world. 20% websites over internet are created on wordpress. With the rise of the responsive web, most renowned theme developers adapted to responsive designs and introduced easy-to-understand frameworks, like Redux Framework, Carrington Core, Bootstrap etc., that can be used to create a full responsive WordPress theme from scratch.

Demo Download Theme

Now! Start building your first Responsive blog theme.

 Download latest version of wordpress from wordpress official website. And you also download bootstrap file from there official website getbootstrap.com. Hope you know how to install a wordpress. You can also learn some basic tuts of creating theme in wordpress from my last post at here.

You can also download my demo theme from above download link to try your self. In this wordpress theme i am using bootstrap to create a simple but full responsive theme in which i write less css and use most of design from bootstrap framework.

Codes:

header.php

In header.php i am using bootstrap CDN to get bootstrap css in bootstrap we have some predefined set of classes which help us to achieve best design.

But in menu there is a small change you need to install some extra class to get your bootstrap menu adjust in your wordpress theme.

You can download nav walker class from Github and include that file into your wordpress theme functions.php file. To register your wordpress menu add below given code to your functions.php file and to call navigation menu to your theme you can use above given code to your theme .

Now we are going to create this theme for blog so we work on 2 main page in first one is index.php in our theme where we load list of blogs we posted and in 2nd page we can load specific blog which user want to read in single.php.

index.php

index.php contain all list of our posted blog and show pagination to load old post

To display pagination in your theme i use this function

and code to get the pagination for any wordpress blog is:

add this function to your functions.php and call this function in index.php page where you want to display pagination.

Now we can create a sidebar for theme before we create sidebar we need to create a function where we can write code for sidebar in functions.php as shown below.

Now we can call our sidebar function in sidebar.php to display side bar information as shown below

To know more about wordpress and bootstrap download this theme and explore it.

Happy coding!.