Wordpress Bootstrap Theme



This is a perfect starter theme for WordPress built using latest Bootstrap 4. This theme is super-fast & light-weight. It uses Bootstrap 4 styling at most of the places. It’s fully responsive and search engine friendly. The theme is thoroughly reviewed by experienced reviewers at WordPress.org. It passes all standard theme checks for the code, core functionality & features, security, language, licensing. Free themes for Bootstrap 4 that are open source, MIT licensed, and free to download - these pre-designed themes are easy to customize and ready to publish. The Bootstrap 4 + WordPress Theme Framework UnderStrap combines the Underscores starter theme (by Automattic) and the mobile-first, responsive grid framework Bootstrap 4 (by Twitter) into a perfect open source foundation for your next WordPress theme project. Download NEW!: 0.9.4.

Bootstrap

This is a review of the top blank WordPress theme choices.

What is a Blank WordPress Theme?

Blank WordPress themes are boilerplates that serve as a starting point for developing your own custom theme, which is why they’re also called “starter themes” and (less commonly) “naked themes”.

Blank WordPress themes come with basic WordPress PHP, CSS, and HTML code and theme files already filled out for you.

Unlike theme frameworks, most of the files in a blank WordPress theme are meant to be modified based on your needs.

Why Use Blank WordPress Themes?

Blank WordPress themes speed up your workflow by reducing the amount of code you need to write. Having a skeletal foundation means you don’t have to do the same initiation process over and over every time you need to start creating a new theme.

In addition, using a blank WordPress theme lowers the chances of you forgetting critical files or code required for a theme to function properly.

Some blank WordPress themes will also have useful integrated features like responsive layouts and sample data to help you test your theme.

Below is an overview of the 10 best free blank/starter WordPress themes I could find.

1. Roots

Roots is an excellent open source WordPress starter theme. It’s built with HTML5 Boilerplate and Bootstrap (if you don’t need it, you can replace or remove it). It also has Grunt files for quickly compiling LESS code and combining your CSS and JS files.

A nifty feature of Roots is its Theme Wrapper, which helps you avoid having to write the same code in multiple files.

Check out themes built using Roots at the Roots Gallery. Get started with Roots by heading over to the project’s official docs.

Demo | Download Page (github.com)

2. Underscores

Underscores, or _s, is a free blank WordPress theme developed by Automattic, the creators of WordPress.

It has five layout templates. Unfortunately, Underscores doesn’t have a pre-built responsive layout, so you’ll have to create one.

Wordpress

The tutorial series by ThemeShaper (a major WordPress theme development company) will help you learn how to create WP themes using Underscores.

Download Page (underscores.me)

3. Bones

Bones is a free blank theme built on top of HTML5 Boilerplate. It’s responsive, and developed under the Mobile First philosophy.

WPtuts+ has an excellent Bones tutorial to help you get started with this awesome starter theme.

Download Page (github.com)

4. HTML5 Reset WordPress Theme

This blank theme helps you start off on the right track towards producing a semantic and structurally-sound HTML5 WordPress themes. For example, the post template included in the HTML5 Reset WordPress Theme incorporates the hNews microformat to help search engines better understand your content.

Download Page (github.com)

5. HTML5 Blank WordPress Theme

This is a Web-performance optimized blank WordPress theme for developers. The HTML5 Blank WordPress Theme comes with useful custom theme functions such as a dynamic sidebar as well as boilerplate code for using WordPress’s Shortcode API in your themes.

Demo | Download Page (html5blank.com)

6. HTML5 Boilerplate for WordPress

This open source project took the popular HTML5 Boilerplate and converted it to a blank WordPress theme.

The HTML5 Boilerplate for WordPress project uses a modern HTML5 blog structure based on Opera Web evangelist Bruce Lawson’s recommended structural markup for blogs:

Source: html5doctor.com

Download Page (github.com)

7. Naked WordPress

This blank WordPress theme is great for people who want to learn how to develop themes.

The Naked WordPress theme is commented in-line so that as you’re building your WordPress theme, you understand what’s actually going on. It’s like a WordPress tutorial + starter theme combined.

Demo | Download Page (bckmn.com)

8. WP-Flex

WP-Flex is a responsive blank WordPress theme. It’s got serious features that web developers will appreciate, such as sample data for unit testing and strict compliance with the official WordPress theming guidelines.

Create Bootstrap Wordpress Theme From Scratch

Demo | Download Page (github.com)

9. JointsWP

JointsWP is built on top of Foundation 5 (a major front-end development framework alongside Bootstrap).

You have the option to use the Sass version, or just plain CSS version if you want.

Demo | Download Page (jointswp.com)

10. BlankSlate

BlankSlate is probably the most simple, minimalist blank/boilerplate theme you can get your hands on. BlankSlate is the middle ground between creating WordPress themes entirely from scratch and using a big starter themes like Roots or Underscore.

Download Page (wordpress.org)

Summary Table

SiteRepoLicenseDeveloperPopularity*
RootsGitHubCustomRoots5469
UnderscoresGitHubGPLv2Automattic4254
BonesGitHubWTFPLThemble2945
HTML5 Reset WordPress ThemeGitHubUknownTim Murtaugh1091
HTML5 Blank WordPress ThemeGitHubMITTodd Motto938
HTML5 Boilerplate for WordPressGitHubThe UnlicenseZencoder748
Naked WordPressGitHubUnknownJoshua Beckman214
WP-FlexGitHubGPLv2Dennis Gaebel131
JointsWPGitHubUknownJeremy Englert82
BlankSlateGitHubGPLv3TidyThemes18

*Popularity was calculated by summing up the number of people who watch, have starred and have forked the project on GitHub as of January 7, 2014.

Related Content

  • Related categories:WordPress and Web Development

Do you want to create your own responsive WordPress themes? Are you getting some cross-browser issues with your site not being responsive? Then, design your own Bootstrap based WordPress theme for better readability, user-experience, and load times.

Responsive websites automatically adjust to look good and function well on any size screen. If you are also thinking to make a responsive WordPress website from scratch, nothing can be better than Bootstrap. Bootstrap is a responsive lightweight, fast, and easy framework to develop mobile-first sites. You can use it uniformly across multiple platforms. So, Bootstrap and WordPress make the best combination to create a responsive website with super speed.

But the question is – How to add Bootstrap to WordPress themes?

Here is a step by step tutorial to guide you through. It will cover all the basics to make a WordPress Bootstrap Enabled theme for your website.

Methods to Add Bootstrap to WordPress

We have many methods to get the best out of the combination of Bootstrap and WordPress. Here at Templatetoaster Bootstrap builder, I am listing the three basic methods for WordPress theme development with Bootstrap as follows

  1. Manual Coding
  2. Bootstrap WordPress Theme Builder
  3. Bootstrap Starter Themes for WordPress

Let’s see the step by step procedure to include Bootstrap in WordPress using these methods

1. Manual Coding: Create a Responsive WordPress Theme with Bootstrap

You can manually add Bootstrap files to WordPress by following below mentioned steps

A. Bootstrap Linking to HTML file

1. Making a site responsive corresponds to the process of linking Bootstrap files to the HTML and other related files. Assuming you already have your website design done from PSD to HTML. The HTML file must be having Header, Footer and other sections.

2. Now, Download and unzip Bootstrap files from the official Bootstrap website. For making Bootstrap 3 enabled theme, you will download Bootstrap 3. Similarly, you will select v4.0 to download Bootstrap 4. Bootstrap just released their latest update which was in active development for over two years. The procedure of linking the Bootstrap files will remain same for both Bootstrap 3 and 4. But if you wish to check which could be a better choice, head over to this comprehensive comparison between Bootstrap 3 and 4.

3. Create your HTML directory and give it a desired name. For example, here, its name is ‘bootstrap’.

4. You will get JS & CSS files after downloading Bootstrap. Now, copy these files to your HTML directory, and create a new index.html or if you already have this file (as mentioned in step 1), you can put it into HTML directory. For instance, we have chosen this example design from Bootstrap website itself.

5. To Link Bootstrap CSS file, copy below code and paste to your index.html file under the <head> tag.

Free Wordpress Bootstrap Themes

6. Similarly, now add core Bootstrap JavaScript after Footer of index.html for faster loading of pages.

That was all about linking bootstrap files to HTML.

B. Bootstrap Linking to WordPress

Now, you will see how to add Bootstrap to WordPress.

1. First of all, install WordPress locally or a web host.

2. Create a new folder named “wpbootstraptheme” in wp-content/themes. You can name it as per your choice.

Free bootstrap wordpress theme

3. Now, you will copy CSS and JS folders from HTML directory to the newly created WordPress theme folder.

Bootstrap 4 Themes

4. Create the following basic blank files in the theme folder

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

5. Now, Now, put below code in your Index.php file to have blog posts page for your WordPress site. This acts as your Homepage.

6. Now, Create the header.php file. We have taken the HTML code from index.html (created in step A) file from the top till nav and pasted into the header.php file as shown below.

7. Later, as you need to add multiple pages to your website from WordPress Dashboard, add this code to your page.php file.

Wordpress Bootstrap Theme

8. Similarly, create the footer.php file, taking code from the index.html file.

9. Now, create the function.php file. Mainly, you will enqueue your Bootstrap javascript and style files with functions here as shown below

10. You will now, write the style.css file for your theme. The example code is here

11. The theme folder shall also have the screenshot of your theme. Say it’s screenshot.png here.

12. You are almost done. Just Activate your wpbootstraptheme theme from WordPress Dashboard.

Appearance → Themes → Activate

13. Now, create content pages as per your requirements in the Page Editor.

Pages → Add New Page

14. Create a menu by using Add New Menu option.

Appearance → Menu → Add New Menu

15. Your WordPress Bootstrap theme is ready. You can check its Preview. It will look somewhat like this

Wordpress Bootstrap Theme

2. Using WordPress Bootstrap Theme Builder

If you want a cool alternative to coding, you can use our WordPress theme builder. A fine software that will give a plain-sailing drag and drop environment. You don’t have to write a single line of code. It will be just a matter of few minutes to design your own theme. The most interesting fact is that all the themes you design in TemplateToaster will be Bootstrap based by default. So, no extra botherations to include Bootstrap in WordPress. You can read our blog to get acquainted with the process of creating a WordPress theme from scratch in TemplateToaster web design software. Just expand the horizons of your imagination, and paint down the theme of your dreams on the canvas of TemplateToaster !!

3. Using Bootstrap based Starter Themes for WordPress

The third method is to start customizing your website on a Bootstrap theme only. A Bootstrap theme is built on top of Bootstrap. It will save your coding efforts. There are many WordPress Bootstrap themes available online. These are Bootstrap packages integrated with WordPress and provide styling, UI components, and page layouts. You can customize the design of your theme manually as per your needs. Check out free WordPress themes.

  • WordPress Themes Based on Bootstrap 4

There are many WordPress themes available, based on Bootstrap 4. Here, a list of popular WordPress Bootstrap Themes is compiled for you as follows

This theme is a great combination of WordPress, Underscore, Bootstrap, and Sass. It is maintained by Automattic. You can use it as a parent theme and a starter theme as well. It has WooCommerce support and Contact form 7 support. It is also translation ready and integrated with Font Awesome.

Wp Bootstrap Starter

  1. Rating: 5
  2. Active Installs: 5000+

This another WordPress Bootstrap Starter theme. It has fantastic features and you can customize it freely as you want.

  1. Rating: 5
  2. Active Installs: 4000+
  • WordPress Themes Based on Bootstrap 3

There are some top-rated WordPress themes based on Bootstrap 3 as follows

Bootstrap 4 Theme Wordpress

It is good to build a new site based on Bootstrap 3, fast. It is developed by Vee Winch and licensed under MIT.

  1. Rating: 5
  2. Active Installs: 3000+

It is a Modern WordPress Bootstrap theme with a dark background with high contrast colors. It provides high-end functionality with a fully featured slider, multiple blog layouts, configurable sidebar etc. It is fully responsive and SEO friendly.

  1. Rating: 5
  2. Active Installs: 1000+

It is another fully responsive WordPress theme. It will be a good choice to create a professional site based on Bootstrap 3.

  1. Rating: 4
  2. Active Installs: 500+

Which method you use for WordPress Theme Development using Bootstrap?

Bootstrap is winning the web. It can be estimated by the fact that it is used by 17% of all the websites. Over the short span of time, it’s popularity has grown surprisingly. This is all because of its capability to develop responsive, mobile-first websites. But some people still prefer Foundation. But to know more about these two frameworks, you can read our comparison of Bootstrap vs Foundation. With all the approaches discussed here at Templatetoaster website builder software and WordPress website builder, you can get best out of the amalgam of Bootstrap and WordPress. So what are you waiting for? Start creating your own WordPress Bootstrap themes today by following these methods!!

We would love to hear your experiences. Please share your thoughts in the comment section below. Check out free WordPress themes.

Related reading: WordPress 101 tutorial