Create Your Very Own WordPress Responsive Website Based On Bootstrap 3

WordPress February 19, 2014 2 Comments
241 Flares 241 Flares ×

What is a Responsive Theme?

Bootstrap WordPress Responsive Design Tutorial

With so many devices with different resolutions, screen sizes, and operating systems in the market, the need for responsive websites and applications is essential for anyone building an online presence.

Just take a look at the Google Trends comparison between 2012 and 2013 for the phrase, “responsive theme”.

Bootstrap Trends

By the start of 2013, the phrase skyrocketed and stayed above the 90+ mark. Web developers, marketers and designers from around the world know that there is a huge potential if your website is responsive and if it can be viewed, navigated, and browsed through easily on any device, whether mobile or desktop with any resolution and aspect ratio.

Responsive Website Preview

Responsive themes are an approach to web designing in which elements of a website self-adjust according to screen sizes and browsers for better readability, user experience, and load time. Developers and theme designers are cashing in on the concept of responsive websites.

Back in November 2013, Matt Cutts, the head of Google’s Webspam team, released a video explaining that responsive design won’t negatively affect you in the SERPs. Google has also published their guideline on “Building Smartphone-Optimized Websites” that contains details in entirety about how Google treats responsive websites.

As more and more smartphones, tablets, and other mobile devices—with rich applications and easy connectivity to the internet—are made available to the public, the use of desktops and laptops has seen a declining tread. This means people are using their smartphones to search just about anything: from news to local stores, from flight plans to latest movies. This rising trend presents a big business opportunity for online community.

WordPress and Responsive Web

WordPress being the most popular CMS that is used by whooping 20% of websites on the internet. It enjoys support from a strong community of open source developers and designers coming from all walks of life. 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 responsive WordPress theme from scratch.

So, what is this “Bootstrap”?

Bootstrap is a toolkit that helps in development of complex web applications. It was developed by developers at Twitter and it was made available to the open-source community. Bootstrap is lightweight as it is coded in LessCSS.

Now, let’s get to work!

To go through this tutorial, you need to have working knowledge of  the following things:

  • how FTP and HTML works
  • how to edit, create and upload PHP on your server
  • how to navigate around using WordPress admin dashboard

STEP 1: Unpacking Bootstrap

  1. First of all, install WordPress on your domain.
  2. Then download and unzip Bootstrap from http://getbootstrap.com/
  3. Once done, connect to your hosting server by using an FTP client like FileZilla.
  4. Navigate to wp-content -> themes.
  5. Create a new folder in themes directory called “BootSTheme” and upload the contents of unzipped Bootstrap in this folder.
  6. Almost all of the WordPress installations contain the following files:
    • index.php
    • style.css
    • header.php
    • footer.php

Now, make 4 empty files using the filename given above.

Bootstrap Directory

STEP 2: Configuring Bootstrap

Open style.css and paste the following code.

/*
Theme Name: MyTheme
Theme URI: http://cloudways.com
Description: Mytheme Built on bootstrap
Version:1.1
Author: Ahsan Parwez
Author URI: http://cloudways.com
*/

These are basically comments that provide description and details about the theme. If you want, you can place your own comments too.

STEP 3: Copying the code

For this tutorial, we are not going to use all of the “css” and “js” files provided in the bootstrap package, we are going to copy bootstrap.min.css code into the style.css. Your style.css file should look like this.

style.css screenshot

STEP 4: Setting up HTML template

We need to have a basic HTML template to work with. You can use this HTML theme for your purpose.

WordPress has built-in functions get_header() and get_footer() that by default call the files header.php and footer.php respectively. What we are going to do is cut the HTML code from top till the first container div and paste it into our header.php file, after which the file should like the image given below.

Header php

 

The footer.php file will contain the rest of the code,

Footer php

 

If we activate this theme and load it on our website, we are not going to see anything yet, because index.php does not contain anything. To load header and footer, we are going to use WordPress built-in function to call these elements by pasting the following code in index.php:

<?php get_header(); ?>
<?php get_footer(); ?>

Now header and footer elements will load on our website, but we will get a basic page that is without any kind of styling.

Basic WordPress Page

STEP 5: Setting the header and the footer

In the header.php file, we are going to import the Bootstrap stylesheet by using the WordPress function echo get_stylesheet_uri() (read more at WordPress Codex), this is going to import the style.css styling onto our website and we are going to see a top menu bar now.

Homepage view

But this is not all, the javascript features on our page will still not work, and we will not see any dropdown menus. To enable this, we are going to import our js files by directly importing the file by url in the footer.php. Paste the following code before the closing body tag.

<script src="../wp-content/themes/MyBSTheme/js/bootstrap.min.js"></script>

 

WordPress is known for its customization and plugins. To tell WordPress where to place the plugins hooks, we are going to paste <?php wp_head(); ?> and <?php wp_footer(); ?> in header.php and footer.php files. Also, to set dynamic titles of the website, we are going to use wp_title(); function in the header.php file between the <title> tags.

<title><?php wp_title(' | ',true,'right'); ?></title>

The above code will call the title of the post separated by “|” then the site name. The Boolean true will display the title. If you set it to false, it will just return the value and not display it. 'right' defines the location of post title to be right of the separator.

STEP 6: Displaying the Featured Posts

Now, we are going to call posts dynamically onto our homepage index.php displayed on top, just like featured posts that we see on many WordPress powered sites.

Write the following code into your index.php:

<?php
query_posts('posts_per_page=1');
while(have_posts()) : the_post(); ?>

<div>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?></p>
</div>

<?php endwhile; wp_reset_query(); ?>

 

We are going to use the while loop and set number of posts to one by using post_per_page, this piece of code will only display the latest blog post on top of the page, and after the loop is closed, the query_posts resets.

The class jumbotron is defined in our bootstrap.min.css file. We are going to use it to style our featured posts by using <h2> tags and the_permalink(); function. The hyperlink is created on the post title, and the_permalink(); function links to the URL of the entire post. To show an excerpt of the post, we can use another built-in WordPress function that is the_excerpt();.

Homepage View

 

STEP 7: Listing your categories

Next, we are going to list our categories on the left of the homepage. We will do this by creating many instances of div styled with the classes of bootstrap and by WordPress function wp_list_categories();.

Paste the following code:

<div class="panel panel-default panel-body">
<div>
<div>
<ul>
<?php wp_list_categories('orderby=name&title_li='); ?>
</ul>
</div>
</div>
</div>

This will list the categories by name with a nice hover effect.

STEP 8: Display the latest posts and its authors

Finally, we are going to show latest blog posts on the homepage. We are going to start another div tag and under this div, we will use similar while loop technique that we used in the featured post, but we are not going to limit it with query_posts();.

<div>

<?php while(have_posts()) : the_post(); ?>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<p><?php the_excerpt(); ?></p>
<p> posted by <?php the_author(); ?>
<?php endwhile; wp_reset_query(); ?>

</div>

WordPress’ function the_author(); will fetch the username of the author of the post. We can use it to dynamically display the name of author with every post.

Finalized Homepage

Once you have complete everything successfully, you will have a page like the one you see in the image shown above.

What’s next?

This tutorial is mainly focused on creating a basic WordPress theme from an HTML template and make it responsive by using Bootstrap 3.x. In future posts, we are going to make more pages like single.php, front-page.php and functions.php. I will explain how to import stylesheets and javascripts from the functions.php file.

[You may want to read: 5 Spectacular Plug-Ins For Making WordPress Websites Mobile Responsive]

Quicker WordPress With Cloudways

WordPress, itself being search engine friendly, can really benefit with responsive design. At Cloudways, we believe in delivering ultimate performance. Our Cloud Platform allows you to launch secure WordPress servers within minutes. Your website will be hosted on a highly optimized stack of Apache+Nginx+Memcached+Varnish that cuts load times substantially. Click on the banner below to signup for a free trial.

Introducing Cloudways Click&Go 

241 Flares Twitter 140 Facebook 44 Google+ 39 LinkedIn 4 Buffer 2 Reddit 0 StumbleUpon 12 241 Flares ×
 

About Ahsan Parwez

Ahsan Parwez is WordPress Community Manager at Cloudways. He tackles the troubles of WordPress with a strategic approach. In his free time, he strategizes some more but on PC games. You can follow Ahsan on Twitter at @ahsanparwez.
Stay Connected: Follow me on Google+ , Linkedin or contact me at ahsan.parwez(at)cloudways.com

« Previous
Next »
  • usman awan

    i cant understand ,after step 4.
    please make it clear…
    echo get_stylesheet_uri() .This is not working how to use it and the remaining text.

    • http://www.cloudways.com/en/ Ahsan Parwez

      if get_stylesheet_uri() isn’t working, then you should try hard coding the bootstrap css file. (It is not recommended but you can get it working)

      In header.php use this


241 Flares Twitter 140 Facebook 44 Google+ 39 LinkedIn 4 Buffer 2 Reddit 0 StumbleUpon 12 241 Flares ×