The perfect base WordPress theme

If you like using Bootstrap and WordPress as much as I do, you should now have the perfect base WordPress theme to start any project moving forward. At this point, our WordPress theme has all the Bootstrap components and features, several custom page templates, styled comments, Font Awesome, custom functions, and much more.

In the following video, I go over how you can use this base theme for your WordPress projects and how you can quickly add a custom homepage to the theme.

Steps

1. Create a new file called template-homepage.php in the root of your WordPress theme with the following code:
   
   template-homepage.php

   PHP

   <?php /** * * Template Name: Homepage * * The template for displaying the homepage. * * * @package bootstrapwp */ get_header(); ?> <div class="container"> <div class="row"> </div> </div> <?php get_footer(); ?>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

   <?php /** * * Template Name: Homepage * * The template for displaying the homepage. * * * @package bootstrapwp */   get_header(); ?>   <div class="container"> <div class="row">   </div> </div>   <?php get_footer(); ?>

2. Go over to getbootstrap.com and get the example Jumbotron code and add it to the template-homepage.php file. It should now look like the following:
   template-homepage.php

   PHP

   <?php /** * * Template Name: Homepage * * The template for displaying the homepage. * * * @package bootstrapwp */ get_header(); ?> <div class="container"> <div class="row"> <div class="jumbotron"> <h1>Navbar example</h1> <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> <p> <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a> </p> </div> </div> </div> <?php get_footer(); ?>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

   <?php /** * * Template Name: Homepage * * The template for displaying the homepage. * * * @package bootstrapwp */   get_header(); ?>   <div class="container"> <div class="row">   <div class="jumbotron">         <h1>Navbar example</h1>         <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>         <p>           <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>         </p>       </div>   </div> </div>     <?php get_footer(); ?>

3. Go into the WordPress Dashboard and create a new Page using the Homepage template
4. Go to Settings -> Reading from the WordPress Dashboard
5. Set the “Front Page” to the newly created Homepage from step 3
6. Optional: Set the “Posts Page” to display on any page you would like
7. Reload the front-end of your WordPress site and check out the new homepage!

Notes from the Video

I used the Jumbotron from the Bootstrap example template that you can find here. You can also read more about the Bootstrap Jumbotron component here.

What’s Next?

Now that we have our base WordPress theme complete, the next step is to add a theme options panel and start creating different settings to the theme. The next series of tutorials will really start adding functionality to our premium WordPress theme.

Feedback

Please let me know what you think of this tutorial and if you need help with anything.