• Friday , 5 June 2020

WordPress Theme Development Tutorial with Bootstrap & Underscores WP Starter Theme

Code Canyon

In this video we are going to cover WordPress Theme Development Tutorial with Bootstrap & Underscores WP Starter Theme.

This is a follow up to my previous videos on how to develop a WordPress Theme from Scratch.

Video 1: Underscores Guide & Overview

Video 2: Web Dev Tools I use

2:53 Download Underscores https://youtu.be/7bHMh2e2qZM?t=2m53s

4:03 Download Bootstrap https://youtu.be/7bHMh2e2qZM?t=2m53s

4:49 Theme Unit Test Data https://youtu.be/7bHMh2e2qZM?t=4m49s
Extract Files and Folders
Adding Bootstrap Code to Underscores

5:30 Git & Gulp Code Snippets https://youtu.be/7bHMh2e2qZM?t=5m30s

6:06 Extract the files and folders https://youtu.be/7bHMh2e2qZM?t=6m6s

6:50 Place DevWP into server folder https://youtu.be/7bHMh2e2qZM?t=6m50s

7:18 Activate Starter Theme https://youtu.be/7bHMh2e2qZM?t=7m18s

7:42 Import Theme unit test data https://youtu.be/7bHMh2e2qZM?t=7m42s

8:54 Add Bootstrap files to DevWP https://youtu.be/7bHMh2e2qZM?t=8m54s

10:06 Git Init https://youtu.be/7bHMh2e2qZM?t=10m06s

11:16 Gulp Files https://youtu.be/7bHMh2e2qZM?t=11m16s

12:57 Adding Bootstrap Styles & Scripts to Functions.php file https://youtu.be/7bHMh2e2qZM?t=12m57s

17:09 Overview of Bootstrap Grid & Columns https://youtu.be/7bHMh2e2qZM?t=17m9s

20:12 Index.php Layout https://youtu.be/7bHMh2e2qZM?t=17m9s

21:47 Git Status & Git Diff https://youtu.be/7bHMh2e2qZM?t=21m47s

29:10 Style.css vs Style.scss https://youtu.be/7bHMh2e2qZM?t=29m10s

Watch the videos listed above first and then watch this one.

By watching these videos, you will learn How to Make a WordPress Website with your own Custom Themes.

In this video I show you how to combine Bootstrap which is the most popular front end framework for modern responsive websites with The Underscores Starter theme for WordPress which is the best starter theme to use.

This is the third video in a series of videos dedicated to creating a Custom WordPress Theme.

If you want to see how I configure WordPress Websites for Peak Performance, watch this video.

If you want to get the files, visit:


There are code snippets that you can use on:

I also cover Git, Gulp, Sass, MAMP and the Atom Text editor in this video as well.

If you need help with your website, feel free to contact me and check my website since I often run discounts and promos.

Support the channel by:

Domain Name & Hosting

Premium WordPress Theme

$99 off Realtors IDX Setup Fee

Don’t forget to Subscribe and follow us @



Original source

3d Ocean

Related Posts


  1. PixemWeb
    July 3, 2019 at 13:36

    There's a Table of Contents in the Description Section

  2. webstoria
    July 3, 2019 at 13:36

    Thx for great video. Now I know how to start my own theme from underscores & bootstrap. Until now I use understrap theme. I've one question to You isn't better download sassify bootstrap because You use sass to change css

  3. LetsNotFight
    July 3, 2019 at 13:36

    Is this gulpfile current? I was using gulp and all of a sudden it broke and I realized it was because something changed in the new version of Gulp (Gulp 4, I think). I forgot what it was that changed, but maybe you know what I'm talking about. I couldn't figure it out. Btw, I just found your channel and it's pretty freakin' awesome. This is exactly what I was looking for. If the DevWP theme is up-to-date with the latest Gulp, Bootstrap and FontAwesome, I'll plunk down $10 for it to support you.

  4. FunComp
    July 3, 2019 at 13:36

    Is it bether to use bootstrap cdn?

  5. iTz Catchyy
    July 3, 2019 at 13:36

    The series are awesome!! Gonna try it out real soon 🙂

  6. Wayne Ramshaw
    July 3, 2019 at 13:36

    Hi Guys, any ideas why my sidebar not pulling from the bottom to the top right of my index page? I'm 20mins and checked code and followed code but not working, rest styling kicking in ok. Any tips much appreciated, thanks.

  7. ElektekW
    July 3, 2019 at 13:36

    it would been easier to add the div and class to the sidebar inside the sidebar PHP file, I think

  8. Aakash Pradhan
    July 3, 2019 at 13:36

    Cool Tutorial mate… keep posting more… Cheers

  9. KTM
    July 3, 2019 at 13:36

    Bootstrap 4 beta is great step forward.

  10. Oli Vyae
    July 3, 2019 at 13:36

    Can this be done with Less?

  11. Emma Page
    July 3, 2019 at 13:36

    You would like to try using theme builder TemplateToaster. They have added BOOTSTRAP support into it.

  12. Noe Garcia
    July 3, 2019 at 13:36

    Hey great tutorial! I'm getting back into web development and had to go back and learn git gulp and sass before coming back to this video. Surprising how much has changed since like 2014 when I stopped. Quick question though, when you go live to an online server, do you push the project using something w/ NPM or do you migrate using a wp plugin? Also where do the gulp and npm files go when your files are in a live server? Are they inside the folder you have called dev-project? specifically, I'm talking about the node_modules_ folder containing everything you install and the package.json and gulp.js file. This is something that is bothering me and I can't seem to find that info anywhere or I don't know what to search for to find it. Thanks

  13. jermaine jones
    July 3, 2019 at 13:36

    Awesome tutorial dude. Just the right speed for me and very in depth.

    Quick question. Is there any code snippet I would need to insert in my custom theme to integrate my theme to work with a page builder? Like elementor or beaver builder?

  14. Techgasm
    July 3, 2019 at 13:36

    was of great help 😉

Leave A Comment

You must be logged in to post a comment.