11 min read

Both WordPress and Bootstrap are created to cover vast and lengthy under-the-hood technical stuff below a straightforward and easy-to-use interface or framework, so it is the reason why they look like a natural pair. They are made for integration, but Bootstrap is not as easy as installing WordPress setup, themes, and plugins. You already have a great understanding of building your website from scratch like a professional. Still, if you’re thinking about creating your WordPress theme, you have to go with Bootstrap, an excellent framework for building themes. The question is How to Use Bootstrap With WordPress? First of all, you need a WordPress Hosting Account to use Bootstrap (a design framework) and WordPress (Popular CMS) to create your WordPress theme.

How To Include Bootstrap?

Let’s start with the basic steps to include Bootstrap in a couple of different ways. Either you can download the source file or include a CDN (Content Delivery Network) in your project. If you want to use the CND option, then you have to include the following link in the head section of your page(s):

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

This option is more suitable because you don’t need to store bootstrap files with your project. After all, CDN is a server where all files are stored, and you need to reference them correctly. It will also save you precious time because you don’t need to download and upload the bootstrap files, so using this option is a significant advantage.

How To Build Your WordPress Theme?

Creating a more functional WordPress theme can be a complicated project, so I will explain how to make a simple WordPress theme. However, you can add more functions to it, but these steps are standard.

You can consider a theme as an overlay because the underlying structure or operations remain the same regardless of the Theme used. And be clear about one thing: Theme is just the style and Appearance of the WordPress core that makes it stylish, different, and unique.

How To Create a WordPress Theme From Scratch?

Create Theme Folder

First of all, go to the wp-content/themes folder, create a new folder named MyTheme, and give the directory name in lowercase, mytheme. Either you can use cPanel or install the FileZilla FTP program to perform this action.

Complete WordPress Theme Building Blocks

Now, create the following files to simplify the process; you can copy the files from the default WordPress theme:

• footer.php
• functions.php
• header.php
• index.php
• style.css

Download Bootstrap

Download the latest Bootstrap version from their official website and extract it into the theme (mytheme) folder. You will see a folder named “bootstrap” and two sub-folders called CSS and js. If you extract it outside, copy the main folder named Bootstrap and paste it into the theme folder.

Edit Style.css

The choice is yours; either you can edit these files offline in your laptop code editor or use the cPanel’s default editor and add a comment header first. This comment enables WordPress to identify the Theme and display it in the Theme administration panel under Appearance and contains the information related to your Theme, such as Theme Name, Theme URI, Author, Description, Version, and text-domain, etc.

/*
Theme Name: My Theme
Theme URI: https://www.temok.com/blog/how-to-start-a-blog-free-vs-paid/
Author: David
Author URI: https://www.Temok.com
Description: A basic theme using the Bootstrap framework.
Version: 1.0
Text Domain: mytheme
*/

Let me explain the things you are viewing for the first time; Theme URI means a URL of a public web page where we can find more information about the Theme. Autor URI is used to present the authoring individual or organization.

Edit functions.php

It is an optional file, but you will see it in each WordPress theme. If the file is present and the Theme is active, it will be automatically loaded during the WordPress initialization phase for the domain area and external website. It can be used for many tasks, including:

• Include any CSS, JavaScript files, and other scripts. It is recommended to include stylesheet(s) in a theme instead of adding them to the theme HTML <head> tag.
• It is used to enable and declare theme support for features such as Sidebars, Navigation Menus, Post Formats, Post Thumbnails, Custom Headers or Backgrounds, and others.
• You can use it to include those functions you want to use throughout your Theme.
• This file can also set up different options for theme customization, and it is available under Appearance> Customize.

<?php
function bootstrapstarter_enqueue_styles() {
wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
$dependencies = array('bootstrap');
wp_enqueue_style( 'bootstrapstarter-style', get_stylesheet_uri(), $dependencies ); 
}
function bootstrapstarter_enqueue_scripts() {
$dependencies = array('jquery');
wp_enqueue_script('bootstrap', get_template_directory_uri().'/bootstrap/js/bootstrap.min.js', $dependencies, '3.3.6', true );
}
add_action( 'wp_enqueue_scripts', 'bootstrapstarter_enqueue_styles' );
add_action( 'wp_enqueue_scripts', 'bootstrapstarter_enqueue_scripts' );
?>

This given block of code includes the Bootstrap CSS and JavaScript files, including styple.css, which is a default styling sheet. So, we can do it using a function named “wp_enqueue_scripts” that will include all these files that are meant to appear on the client-side (frontend).

I have created two functions for including CSS and JavaScript files in the next block, but you can also include both files in a single function. The choice is ultimately yours.

The function bootstrapstarter_enqueue_styles() is used to register Bootstrap CSS using wp_register_style() so that we can use it with wp_enqueue_style(). Please keep in mind, don’t call Bootstrap CSS directly because we need to create a dependency between our style.css and Bootstrap CSS. So, it means the bootstrap CSS will be loaded before our style sheet.

We need to pass an array of all dependencies, but in our case, we have only Bootstrap, so our $dependencies array only handles Bootstrap. (Which we have registered earlier)

bootstrapstarter_enqueue_scripts() is used to define an array in which a query will be included. WordPress comes with pre-installed scripts, including jQuery, but we will explain it because it is a dependency for our Bootstrap JS file.

Page Structure

Look at this page; you will realize that this page has been divided into different sections, as you can view in the screenshot:

If you want to create the same page for your hands-on practice, copy each section’s source code separately and save it in the relevant section. For example, please copy the code of the footer and paste it into the footer.php file, header including site title and navigation into header.php, body into index.php, sidebar into sidebar.php. Here is the content of all the sections:

Header.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Blog Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="blog.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#">Home</a>
<a class="blog-nav-item" href="#">New features</a>
<a class="blog-nav-item" href="#">Press</a>
<a class="blog-nav-item" href="#">New hires</a>
<a class="blog-nav-item" href="#">About</a>
</nav>
</div>
</div>
<div class="container">
<div class="blog-header">
<h1 class="blog-title">The Bootstrap Blog</h1>
<p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
</div>
<div class="row">

Footer.php

</div><!-- /.row -->
</div><!-- /.container -->
<footer class="blog-footer">
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p><a href="#">Back to top</a></p>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Sidebar:
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="sidebar-module">
<h4>Archives</h4>
<ol class="list-unstyled">
<li><a href="#">March 2014</a></li>
<li><a href="#">February 2014</a></li>
<li><a href="#">January 2014</a></li>
<li><a href="#">December 2013</a></li>
<li><a href="#">November 2013</a></li>
<li><a href="#">October 2013</a></li>
<li><a href="#">September 2013</a></li>
<li><a href="#">August 2013</a></li>
<li><a href="#">July 2013</a></li>
<li><a href="#">June 2013</a></li>
<li><a href="#">May 2013</a></li>
<li><a href="#">April 2013</a></li>
</ol>
</div>
<div class="sidebar-module">
<h4>Elsewhere</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>
</div><!-- /.blog-sidebar -->
Index.php
<div class="col-sm-8 blog-main">
<div class="blog-post">
<h2 class="blog-post-title">Sample blog post</h2>
<p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
<p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
<hr>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<h2>Heading</h2>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<pre><code>Example code block</code></pre>
<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
<ol>
<li>Vestibulum id ligula porta felis euismod semper.</li>
<li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
</ol>
<p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
</div><!-- /.blog-post -->
<div class="blog-post">
<h2 class="blog-post-title">Another blog post</h2>
<p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div><!-- /.blog-post -->
<div class="blog-post">
<h2 class="blog-post-title">New feature</h2>
<p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
</div><!-- /.blog-post -->
<nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
</div><!-- /.blog-main -->

Edit Header.php

You have just finished the copy and pasting from the reference template; now, we have to make the following changes:

• Remove all references to any external CSS files because we are using our included style sheet.
• We also don’t need meta tags because we will use Yoast or SEOPress for the author and description and favicon (Favicon can be added using WordPress core functions).
• There is no need to use <title> here because WordPress will manage the titles.
• For displaying language attributes, we need to include the language_attributes() function.
• To display encoding for pages and feeds set in WordPress Settings > Reading, we need to add the bloginfor(‘charset’) function.
• Now, add the wp_head() function before the closing head tag (</head>) because it is compulsory for the core functionality and performance of many plugins.
• Finally, it would help if you used the body_class() function that will load the body content and elements based on the page that is begin generated.

After deleting the things, I have told you, the header.php file looks like this:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#">Home</a>
<a class="blog-nav-item" href="#">New features</a>
<a class="blog-nav-item" href="#">Press</a>
<a class="blog-nav-item" href="#">New hires</a>
<a class="blog-nav-item" href="#">About</a>
</nav>
</div>
</div>
<div class="container">
<div class="blog-header">
<h1 class="blog-title">The Bootstrap Blog</h1>
<p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
</div>
<div class="row">

Edit Again functions.php

As you know, we have removed the title tag from the header and it is one of the primary and required elements so edit the functions.php file. If you use WordPress 4.1 or above then you will add the “add_theme_support” function otherwise you have to use the wp_title() function.

function bootstrapstarter_wp_setup() {
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'bootstrapstarter_wp_setup' );

Edit Footer.php

Now, perform the same action as you did before in header.php – remove all the references of javascript files and add the wp_footer() function before the closing tag of the body “</body>”. Your footer will look like this:

</div><!-- /.row -->
</div><!-- /.container -->
<footer class="blog-footer">
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p><a href="#">Back to top</a></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Edit index.php

Finally, you have to edit the index to show recent posts in chronological order. The index contains static content, so we have to replace this with index.php using a loop. It will display the title, content, author name, publishing date, etc. Index.php file will look like this:

<?php get_header(); ?>
<div class="col-sm-8 blog-main">
<?php 
if ( have_posts() ) { 
while ( have_posts() ) : the_post();
?>
<div class="blog-post">
<h2 class="blog-post-title"><?php the_title(); ?></h2>
<p class="blog-post-meta"><?php the_date(); ?> by <?php the_author(); ?></p>
<?php the_content(); ?>
</div><!-- /.blog-post -->
<?php
endwhile;
} 
?>
<nav>
<ul class="pager">
<li><?php next_posts_link('Previous'); ?></li>
<li><?php previous_posts_link('Next'); ?></li>
</ul>
</nav>
</div><!-- /.blog-main -->
<?php get_footer(); ?>

Let me explain a bit more, we will use the following functions instead of static content:

• the_title()
• the_date()
• the_author()
• the_content()

As the name indicates, the next and previous post links are displayed using the following functions:

• next_posts_link()
• previous_posts_link()

In the end, make sure you have placed the header at the top and footer at the bottom of your page using the given functions:

• get_header()
• get_footer()

Edit style.css Again

Now, you have to copy all the styles from the template style sheet blog.css that we have removed into the style.css file. You have to make sure that you are adding the CSS code right after the comment header for your style.css file.

Final Words

Finally, you have done all the basic steps that are the bare bones of the WordPress theme with the help of a blog template available on the official Bootstrap website. Now, login to your WordPress dashboard and navigate to the Appearance> Themes, and you will see the Theme as given below:

But you will see there is no preview image, so you can create an image of a 1200 x 900 px PNG file and upload it into the theme directory. After creating a preview image, name it “screenshot.png” and save it in the mytheme (or your theme directory folder) now you will check it is showing the feature image:

When you activate your new Theme and visit the website, you will see the given view:

If you need any further information or share your experience you can post your comment below.