WordPress has become a popular choice for bloggers in the last few years, but many struggles to understand how to use it for their business. One of the most important (and difficult) tasks is creating a WordPress theme that incorporates Bootstrap’s grid system, thereby simplifying web development. Keep reading to know the advantages of using Bootstrap for WordPress and proven steps on how to integrate these tools.
Advantages Of Using Bootstrap And WordPress Themes Together
Bootstrap is an open-source responsive web design toolkit. Using it with WordPress, you no longer need to spend hours coding the code for your site, which can take months after you forked the Bootstrap source and continued modifying it. You can reduce development time by creating a custom theme from scratch instead of working with a free but limited template. It’s possible to integrate them in 8 simple steps if you follow these instructions.
A Step-By-Step Guide To Integrate Bootstrap And WordPress
The Bootstrap source code comes with a separate folder with all the CSS, JavaScript, and font files. The Bootstrap Builder tool allows you to customize your site by choosing amongst different options. The process of integrating these two is as follows:
Unpack Bootstrap Into Separate Folder
It’s better to use a child theme for WordPress development so that you don’t lose any changes when you upgrade to the latest version of WordPress or if you make some errors in coding your theme. There are three folders in the parent theme: images, js, and CSS. You have to copy them into the child theme directory and create another bootstrap folder inside the CSS directory.
Configure Bootstrap
First of all, create a page template and name it page-template.php. You will include a link to your custom CSS at the end of the code. The following code is an example:
/*
Theme Name: MyTheme
Theme URI: <THEME_URL>
Description: A Theme for WordPress with Bootstrap for styling.
Author: <AUTHOR_NAME>
Author URI: <AUTHOR_URL>
Version: 1.0
*/
Copy The Code
Copy all files from CSS to your child theme directory. You have now created the main file (style.css) for the theme. Go to Appearance > Theme Settings and activate your new style sheet. Save changes in theme files, then add a link to the new style sheet.
Create The Header And The Footer Sections
Now you are able to add the header and the footer sections in your WordPress site. You should create header.php file in the themes folder and add the following content:
<!DOCTYPE html>
<!–[if lt IE 7]><html class=”no-js lt-ie9 lt-ie8 lt-ie7″> <![endif]–>
<!–[if IE 7]><html class=”no-js lt-ie9 lt-ie8″> <![endif]–>
<!–[if IE 8]><html class=”no-js lt-ie9″> <![endif]–>
<!–[if gt IE 8]><!–> <html class=”no-js”> <!–<![endif]–>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title><?php wp_title(‘«’, true, ‘right’); ?> <?php bloginfo(‘name’); ?></title>
<meta name=”description” content=””>
<meta name=”author” content=””>
<meta name=”viewport” content=”width=device-width”>
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<nav class=”navbar navbar-expand-md navbar-dark fixed-top bg-dark”>
<a class=”navbar-brand” href=”#”>
<?php bloginfo(‘name’); ?>
</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarCollapse” aria-controls=”navbarCollapse” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarCollapse”>
<ul class=”navbar-nav mr-auto”>
<li class=”nav-item active”>
<a class=”nav-link” href=”/”>
Home <span class=”sr-only”>(current)</span>
</a>
</li>
</ul>
</div>
</nav>
For creating footer you should add file footer.php and add the following content:
<footer>
</footer>
< ?php wp_footer(); ?>
</body>
</html>
Display The Featured Posts
To display the featured posts you have to add some code into your index.php file:
<?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(); ?>
List Your Categories
There are two ways to display categories in a WordPress theme:
The Featured Posts plugin is an option you have to take advantage of. This plugin provides a widget that can display most of the WordPress pages at once.
Another way is to paste the code listed below in the index.php file:
<div class=”panel panel-default panel-body”>
<div>
<div>
<ul>
<?php wp_list_categories(‘orderby=name&title_li=’); ?>
</ul>
</div>
</div>
</div>
Display The Latest Posts
At the end of these settings we want to show the latest blogposts on our homepage. If you need this, just paste this code into the file:
<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>
Add Bootstrap
After adding all the information and code to the template, you should add Bootstrap inside the functions.php file. Paste the following code:
<?php
function themebs_enqueue_styles() {
wp_enqueue_style( ‘bootstrap’, get_template_directory_uri() . ‘/css/bootstrap.min.css’ );
wp_enqueue_style( ‘core’, get_template_directory_uri() . ‘/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘themebs_enqueue_styles’);
function themebs_enqueue_scripts() {
wp_enqueue_script( ‘bootstrap’, get_template_directory_uri() . ‘/js/vendor/bootstrap.bundle.min.js’, array( ‘jquery’ ) );
}
add_action( ‘wp_enqueue_scripts’, ‘themebs_enqueue_scripts’);
You can find additional information about including CSS files in the WordPress Theme documents.
The Bottom Line
Using Bootstrap with WordPress is a great option for developers and businesses who want to save time by developing a custom theme rather than working with an existing template or a free theme. With this integration, you can create a responsive site without coding the HTML and CSS yourself.
