How To Use Bootstrap As A Template In Wordpress

11 min read

Both WordPress and Bootstrap are created to cover vast and lengthy nether-the-hood technical stuff beneath a straightforward and easy-to-use interface or framework, then it is the reason why they wait like a natural pair. They are fabricated for integration, but Bootstrap is not every bit easy equally installing WordPress setup, themes, and plugins.

You lot already have a great understanding of building your website from scratch like a professional. Still, if you're thinking most creating your WordPress theme, y'all accept to go with Bootstrap, an splendid framework for building themes.

First of all, you need a WordPress Hosting Account to use Bootstrap (a blueprint framework) and WordPress (Pop CMS) to create your WordPress theme.

How to Include Bootstrap?
How to build your ain WordPress Theme?
How to create a WordPress Theme From Scratch?
- ane. Create Theme Folder
- 2. Complete WordPress Theme Building Blocks
- 3. Download Bootstrap
- 4. Edit Manner.css
- 5. Edit functions.php
- 6. Page Structure
  - Header.php
- vii. Edit Header.php
- 8. Edit again functions.php
- ix. Edit Footer.php
- 10. Edit alphabetize.php
- 11. Edit style.css again
Final Words

How to Include Bootstrap?

Allow's start with the basic steps to include Bootstrap in a couple of different means. Either you can download the source file or include a CDN (Content Delivery Network) in your project. If you want to apply the CND option, and then you take to include the following link in the head department of your page(s):

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

This option is more suitable because you lot don't demand to shop bootstrap files with your projection. Later on all, CDN is a server where all files are stored, and you lot need to reference them correctly. It will too save your precious time because you don't need to download and upload the bootstrap files, so using this option is a significant reward.

How to build your own WordPress Theme?

Creating a more functional WordPress theme can be a complicated projection, and then I will explicate how to make a elementary WordPress theme. Withal, you tin add more functions to it, just these steps are standard.

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

How to create a WordPress Theme From Scratch?

1. Create Theme Folder

First of all, go to the wp-content/themes folder, create a new binder named MyTheme and give the directory name in lower case, mytheme. Either yous tin use cPanel or install the FileZilla FTP program for performing this action.

2. Consummate WordPress Theme Edifice 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

three. Download Bootstrap

Download the latest Bootstrap version from their official website and extract it into the theme (mytheme) folder. Y'all will see a folder named "bootstrap" and two sub-folders chosen CSS and js. If you extract it outside, copy the chief folder named Bootstrap and paste it into the theme binder.

4. Edit Style.css

The choice is yours; either you lot can edit these files offline in your laptop code editor or use the cPanel'due south default editor and add a comment header first. This annotate enables WordPress to identify the Theme and brandish it in the Theme administration panel under Appearance and contains the data related to your Theme, such every bit Theme Name, Theme URI, Author, Description, Version, and text-domain, etc.

          /* Theme Name: My Theme Theme URI: https://world wide web.temok.com/web log/how-to-kickoff-a-blog-free-vs-paid/ Author: David Writer URI: https://world wide web.Temok.com Clarification: A basic theme using the Bootstrap framework. Version: ane.0 Text Domain: mytheme */

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

5. 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 tin be used for many tasks, including:

Include any CSS, JavaScript files, and other scripts. It is recommended to include stylesheet(due south) in a theme instead of adding them to the theme HTML <caput> tag.
It is used to enable and declare theme back up for features such every bit Sidebars, Navigation Menus, Post Formats, Post Thumbnails, Custom Headers or Backgrounds, and others.
You can apply it to include those functions you want to use throughout your Theme.
This file can also ready up dissimilar options for theme customization, and information technology is available under Appearance> Customize.

          <?php function bootstrapstarter_enqueue_styles() { wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' ); $dependencies = assortment('bootstrap'); wp_enqueue_style( 'bootstrapstarter-fashion', get_stylesheet_uri(), $dependencies );  } role bootstrapstarter_enqueue_scripts() { $dependencies = array('jquery'); wp_enqueue_script('bootstrap', get_template_directory_uri().'/bootstrap/js/bootstrap.min.js', $dependencies, 'three.3.half-dozen', 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 canvass. So, we tin exercise 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 take created two functions for including CSS and JavaScript files in the next block, but you can also include both files in a single role. The option is ultimately yours.

The function bootstrapstarter_enqueue_styles() is used to register Bootstrap CSS using wp_register_style() so that we tin can use it with wp_enqueue_style(). Please go on in heed, don't call Bootstrap CSS straight because nosotros need to create a dependency betwixt our style.css and bootstrap CSS. So, it means the bootstrap CSS volition be loaded before our fashion sheet.

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

bootstrapstarter_enqueue_scripts() is used to define an assortment in which 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.

six. Page Construction

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

If you want to create the aforementioned page for your easily-on practice, re-create each section's source code separately and save it in the relevant department. For case, please copy the code of the footer and paste it into the footer.php file, header including site championship and navigation into header.php, trunk into alphabetize.php, sidebar into sidebar.php. Hither is the content of all the sections:

Header.php

          <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="Ten-UA-Uniform" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=one"> <!-- The above 3 meta tags *must* come up commencement in the head; whatsoever other head content must come up *afterward* these tags --> <meta proper noun="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>Blog Template for Bootstrap</championship> <!-- Bootstrap core CSS --> <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> <!-- IE10 viewport hack for Surface/desktop Windows 8 problems --> <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="weblog.css" rel="stylesheet"> <!-- Merely for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-alarm.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/three.7.two/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/i.iv.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="blog-masthead"> <div class="container"> <nav class="blog-nav"> <a class="blog-nav-item agile" href="#">Abode</a> <a class="blog-nav-item" href="#">New features</a> <a class="blog-nav-detail" href="#">Press</a> <a class="blog-nav-item" href="#">New hires</a> <a class="web log-nav-detail" href="#">Nearly</a> </nav> </div> </div> <div form="container"> <div form="blog-header"> <h1 class="blog-title">The Bootstrap Blog</h1> <p class="lead web log-description">The official case template of creating a blog with Bootstrap.</p> </div> <div class="row">

Footer.php

          </div><!-- /.row --> </div><!-- /.container --> <footer form="blog-footer"> <p>Weblog 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 elevation</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="../../avails/js/vendor/jquery.min.js"><\/script>')</script> <script src="../../dist/js/bootstrap.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 problems --> <script src="../../assets/js/ie10-viewport-problems-workaround.js"></script> </trunk> </html> Sidebar: <div class="col-sm-iii col-sm-offset-one blog-sidebar"> <div class="sidebar-module sidebar-module-inset"> <h4>Virtually</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 form="sidebar-module"> <h4>Archives</h4> <ol class="list-unstyled"> <li><a href="#">March 2014</a></li> <li><a href="#">Feb 2014</a></li> <li><a href="#">January 2014</a></li> <li><a href="#">Dec 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 form="sidebar-module"> <h4>Elsewhere</h4> <ol class="listing-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 form="col-sm-8 blog-principal"> <div class="web log-post"> <h2 form="weblog-post-title">Sample blog mail service</h2> <p class="web log-mail service-meta">January 1, 2014 past <a href="#">Mark</a></p> <p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Bones typography, images, and code are all supported.</p> <hour> <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</stiff> ornare vel european union 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 lawmaking 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 air-conditioning 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 not 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="web log-post"> <h2 form="weblog-postal service-championship">Another blog post</h2> <p class="blog-postal service-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 down amet fermentum.</p> <blockquote> <p>Curabitur blandit tempus porttitor. <potent>Nullam quis risus eget urna mollis</stiff> 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><!-- /.weblog-post --> <div class="web log-post"> <h2 form="weblog-post-championship">New characteristic</h2> <p grade="blog-mail-meta">December 14, 2013 past <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 not 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 down 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><!-- /.weblog-postal service --> <nav> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> </nav> </div><!-- /.blog-master -->

vii. Edit Header.php

Y'all have just finished the copy and pasting from the reference template; now, nosotros have to make the following changes:

Remove all references to whatsoever external CSS files because nosotros are using ours included style sheet.
We also don't demand meta tags because nosotros volition use Yoast or SEOPress for author and description and favicon (Favicon can exist added using WordPress core functions).
In that location is no need to use <title> here because WordPress will manage the titles.
For displaying language attributes, nosotros need to include the language_attributes() role.
To display encoding for pages and feeds ready in WordPress Settings > Reading, we demand to add together the bloginfor('charset') role.
Now, add the wp_head() role before the endmost head tag (</head>) considering it is compulsory for the cadre functionality and functioning of many plugins.
Finally, it would help if you used the body_class() office that will load the body content and elements based on the folio that is begin generated.

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

          <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta proper name="viewport" content="width=device-width, initial-scale=1"> <!-- HTML5 shim and Respond.js for IE8 back up of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/three.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/reply/i.iv.two/respond.min.js"></script> <![endif]--> <?php wp_head(); ?> </caput> <torso <?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-detail" href="#">New features</a> <a class="blog-nav-particular" href="#">Press</a> <a grade="blog-nav-item" href="#">New hires</a> <a form="blog-nav-item" href="#">Virtually</a> </nav> </div> </div> <div class="container"> <div class="blog-header"> <h1 class="blog-title">The Bootstrap Blog</h1> <p class="lead web log-description">The official case template of creating a blog with Bootstrap.</p> </div> <div class="row">

8. Edit again functions.php

As you lot know, we have removed the title tag from the header and information technology is i of the primary and required chemical element and then edit the functions.php file. If you will use the WordPress 4.one or to a higher place then you lot will add together the "add_theme_support" office otherwise yous have to apply wp_title() function.

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

ix. Edit Footer.php

Now, perform the same action as y'all did before in header.php – remove all the references of javascript files and add the wp_footer() office before the closing tag of trunk "</torso>". Your footer volition exist looks like:

          </div><!-- /.row --> </div><!-- /.container --> <footer class="blog-footer"> <p>Web log template congenital for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> <p><a href="#">Dorsum to tiptop</a></p> </footer> <?php wp_footer(); ?> </torso> </html>

ten. Edit alphabetize.php

Finally, you take to edit the alphabetize to testify recent posts in chronological lodge. The alphabetize contains the static content, so we have to replace this with index.php using a loop. It will display the championship, content, writer proper name, publishing date, etc. Index.php file volition await similar:

          <?php get_header(); ?> <div grade="col-sm-8 blog-main"> <?php  if ( have_posts() ) {  while ( have_posts() ) : the_post(); ?> <div grade="blog-post"> <h2 class="weblog-post-title"><?php the_title(); ?></h2> <p course="blog-mail-meta"><?php the_date(); ?> by <?php the_author(); ?></p> <?php the_content(); ?> </div><!-- /.blog-mail --> <?php endwhile; }  ?> <nav> <ul grade="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 apply the post-obit functions instead of a static content:

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

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

next_posts_link()
previous_posts_link()

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

get_header()
get_footer()

11. Edit style.css again

At present, you have to copy all the styles from the template style sheet blog.css that nosotros have removed into the style.css file. Yous have to make sure that you are adding the CSS code right after the comment header for your mode.css file.

Final Words

Finally, you have done all the basic steps that are the blank bones of the WordPress theme with the help of a blog template available on the official Bootstrap website. At present, login to your WordPress dashboard and navigate to the Appearance> Themes, and yous volition see the Theme equally given beneath:

But you will run across there is no preview image, and so you tin 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 as "screenshot.png" and salvage it in the mytheme (or your theme directory binder) and now you lot will check information technology is showing the feature prototype:

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

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