WordPress has been a popular blogging platform in recent years, but many people are still unsure how to use it for their business. Creating a WordPress theme that utilizes Bootstrap’s grid system, hence simplifying web development, is one of the most significant (and challenging) undertakings. Continue reading to learn about the benefits of using Bootstrap for WordPress, as well as tried-and-true methods for integrating these technologies.
The benefits of combining Bootstrap and WordPress themes
Bootstrap is a free and open-source framework for creating responsive websites. When you use it with WordPress, you won’t have to spend hours coding your site’s code, which could take months if you cloned the Bootstrap source and kept tweaking it. Instead of working with a free but limited template, you can save time by building a custom theme from start. If you follow these directions, you can combine them in only eight simple steps.
Bootstrap should be unpacked into a separate folder
When developing a WordPress theme, it’s best to use a child theme so that you don’t lose any modifications if you upgrade to the current version of WordPress or make code errors. The parent theme has three folders: images, JavaScript, and CSS. You’ll need to copy them to the child theme directory and make a new bootstrap folder in the CSS directory.
Bootstrap configuration
To begin, create a page template called page-template.php. At the conclusion of the code, you’ll include a link to your own CSS. As an example, consider the following code:
/*
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
*/
A step-by-step guide to Bootstrap and WordPress integration
The CSS, JavaScript, and font files are all included in the Bootstrap source code in a separate folder. You may modify your site with the Bootstrap Builder tool by selecting from a variety of options. The following is the procedure for combining these two:
Copy And Paste The Code
All CSS files should be copied to your child theme directory. You’ve now finished the theme’s primary file (style.css). Activate your new style sheet in Appearance > Theme Settings. Changes should be saved in theme files, and then a link to the new style sheet should be included.
Form The Header And Footer Sections.
You can now add sections to your WordPress site for the header and footer. In the themes folder, create a header.php file 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>
You should create a footer by adding the following content to the footer.php file:
<footer>
</footer>
< ?php wp_footer(); ?>
</body>
</html>
Appearance Of The Featured Posts
You’ll need to add the following code to your index.php file to see the featured posts:
<?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(); ?>
Make A List Of Your Categories
In a WordPress theme, there are two ways to display categories:
The Featured Posts plugin is an option you should consider. This plugin creates a widget that displays the majority of WordPress pages at once.
Another option is to paste the following code into 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 Most Recently Posted Items
We want to present the most recent blog posts on our homepage at the end of these settings. If you require this, simply paste the following 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>
Include Bootstrap
You should include Bootstrap in the functions.php file after you’ve finished adding all of the information and code to the template. Fill in the blanks with 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’);
Additional information about including CSS files may be found in the WordPress Theme documentation.
Conclusion:
Using Bootstrap with WordPress is a terrific alternative for developers and businesses who would prefer to design a custom theme than work with a pre-made template or a free theme. You may construct a responsive site without having to code the HTML and CSS yourself using this connection.
