This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How to Create a WordPress Responsive Theme Based on Bootstrap

October 6, 2021

8 Min Read
wordpress bootstrap

With so many devices with different resolutions, screen sizes, and operating systems, responsive websites and applications have become an essential requirement for a brand’s online presence.

More than 52% of all the web traffic comes from mobile devices and the number is on the rise. Web developers, marketers, and designers understand the huge potential if the website is responsive and can be viewed, navigated, and browsed through easily on any device, regardless of any resolution and aspect ratio.

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. Many brands are increasingly hiring WordPress Developer as well to make their websites responsive and mobile-friendly.

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. Further, Google has also published its guidelines on mobile-friendly websites that contain details about how Google treats responsive websites.

With the rise of smartphones and other similar devices, the use of desktops and laptops is on the (slow) decline. This means people are using their smartphones to search just about anything: from news to local stores, from flight inquiries to the latest movies. This rising trend presents a big business opportunity for the online community.

WordPress and Responsive Web

WordPress is the most popular CMS that powers a significant portion of the Internet. It enjoys support from a strong community of open-source developers and designers. With the rise of the responsive web design, many renowned theme developers switched over to responsive design and introduced easy-to-understand frameworks, like Redux Framework, Carrington Core, and Bootstrap, which is ideal for creating a responsive WordPress theme from scratch.

What Is Bootstrap?

Bootstrap is an open source framework that is used for mobile friendly front end web development. This means that it can be used to created responsive WordPress themes through its CSS and Java Script based design templates.

Bootstrap is a toolkit that simplifies the dev process for complex web applications. It is the brainchild of the Twitter dev team and was made available to the open-source community. The framework became popular because of its lightweight structure as it is coded in LessCSS.

By adding Bootstrap to your website, you can call its classes to add pre-built elements like buttons, grids, tables, menu, etc. Similarly, you can make existing elements responsive, without adding complex media queries.

Create a WordPress Bootstrap Theme

Creating a WordPress bootstrap theme is actually an 8-step process. The good news – it is easy to build a Bootstrap powered theme.

Step 1: Unpack Bootstrap

  1. First of all, install WordPress on your domain.
  2. Download and unzip Bootstrap.
  3. Once done, connect Using an FTP client like FileZilla.
  4. Navigate to wp-content > themes.
  5. Create a new folder in the Themes folder and name it BootSTheme. Upload the contents of unzipped Bootstrap to this folder.
  6. Almost every WordPress installation contains the following files:
  • footer.php
  • header.php
  • index.php
  • style.css

Now, make four empty files with the above names in the BootSTheme folder.

Step 2: Configuring Bootstrap

In the BootSTheme folder, open the style.css and paste the following code.

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

These are basically comments that provide descriptions and details about the theme. I highly recommend you change these comments to reflect the details of your theme.

Step 3: Copying the Code

For this tutorial, I will not use all of the CSS and JS files provided in the Bootstrap package. To start the dev process, copy the code in the bootstrap.min.css file and paste in the style.css file. At this point, the style.css file should look like this.

style.css screenshot

Note: You can get the complete minified CSS code from the Bootstrap website.

Page Builders Let You Develop Websites Without Code

Find out which page builder performs the best and what features you need to create a website.

Step 4: Setting up HTML Template

I need to have a basic HTML template to work with. To make things easy, I will use this HTML theme. I recommend you download to continue with the tutorial.

WordPress has built-in functions get_header() and get_footer() that by default call the files header.php and footer.php respectively.

Start by cutting the HTML code from top till the first container div and paste it into the header.php file. The file would look like:

Header php

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

Footer php

At this point, if you upload the Bootstrap WordPress theme and activate it, you will not see anything because the index.php does not contain anything.

To load the header and the footer, I will use the WordPress built-in function to call these elements. For this, paste the following code in the 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, I will import the Bootstrap stylesheet by using the WordPress function echo get_stylesheet_uri() (read more the function in the WordPress Codex). Th will import the style.css onto the website and you will see a top menu bar now.

You can also add the style.css by adding the following code at the top of the header.php file.

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(). '/style.css' ?>">

 

Homepage view

But this is not all, the JavaScript features on our page will still not work, and we will not see any drop-down 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 ‘|’ than 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 the post title to be right of the separator.

Step 6: Displaying the Featured Posts

Next, I will call posts dynamically into the homepage (as displayed by the ) and display them at the top (similar to the 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(); ?>&lt;/p>
</div>

<?php endwhile; wp_reset_query(); ?>

As you can see, I am using a while loop and set the number of posts to one by using post_per_page. This line will only display the latest blog post at the top of the page, and after the loop closes, the query_posts resets.

The class jumbotron is defined in the bootstrap.min.css file. I will use it to style the 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, I have used another built-in WordPress function, the_excerpt();.

Displaying the Featured Posts

Step 7: Listing Your Categories

I will now list the categories on the left of the homepage. I will create several instances of a div styled with the Bootstrap classes and the WordPress function wp_list_categories();.

Paste the following code in the index.php:

<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 Authors

Finally, we are going to show the 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 functions the_author(); and fetch the username of the author of the post. We can use it to dynamically display the name of the author with every post.

Finalized Homepage

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

Adding Bootstrap in An Existing WordPress Theme

If you are using a WordPress theme that is not responsive, you can add Bootstrap to make it mobile-friendly. You can use WordPress and Bootstrap in two different ways.

Adding Bootstrap Using a CDN

You may start using Bootstrap elements by simply adding its CDN to your header.php file.

Note: This method can cause compatibility issues, therefore, make sure to take a full backup before adding the following code.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

You can access the header.php file either by using FTP or using a plugin. The above code contains the minified versions of CSS and JS files that offer better performance.

Adding Bootstrap inside functions.php

In this method, you need to download the Bootstrap library. Upload the Bootstrap.min.css file and Bootstrap-theme.min.css file to your theme CSS folder and upload the Bootstrap.js file to the theme folder called “js” of your WordPress theme.

Now, access your functions.php file to enqueue these scripts.

Add the following code inside your functions.php file.

function reg_scripts() {
    wp_enqueue_style( 'bootstrapstyle', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'bootstrapthemestyle', get_template_directory_uri() . '/css/bootstrap-theme.min.css' );
    wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), true );
}
add_action('wp_enqueue_scripts', 'reg_scripts');

You can also skip the uploading part and directly enqueue the bootstrap CDN like so.

function my_scripts_enqueue() {
    wp_register_script( 'bootstrap-js', '://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array('jquery'), NULL, true );
    wp_register_style( 'bootstrap-css', '://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', false, NULL, 'all' );

    wp_enqueue_script( 'bootstrap-js' );
    wp_enqueue_style( 'bootstrap-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );

Save the file and upload it back to the server.

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, I will make more pages like single.php, front-page.php, and functions.php. I will also explain how to import stylesheets and JavaScripts from the functions.php file.

In case you need any help, just post a comment below and I will get back to you.

Q. How do I use bootstrap in WordPress?

WordPress and Bootstrap can be used to create a responsive theme. You can add Bootstrap either by linking CDN path or by enqueuing the scripts inside functions.php.

Q. Should I use bootstrap or WordPress?

Bootstrap is a framework that is used to create responsive web layouts. You can use WordPress and Bootstrap together to create a responsive theme.

Q. What is Bootstrap?

Bootstrap is a free and opensource framework with pre-built elements that can be used to create responsive websites. Bootstrap with WordPress can help you create a responsive theme.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Beautifully optimized hosting for WordPress and Magento”

Arda Burak [Agency Owner]

Ahsan Parwez

Ahsan is the Community Team Manager at Cloudways - A Managed Cloud Hosting Platform. He loves to solve problems and help Cloudways' clients in any aspect he can. In his free time, you can find him playing RTS PC games.

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!