WordPress Theme Development Tutorial with Bootstrap & Underscores WP Starter Theme



https://i.ytimg.com/vi/7bHMh2e2qZM/hqdefault.jpg



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:

Home

There are code snippets that you can use on:
https://www.pixemweb.com/blog/web-development-tools-i-use-for-developing-wordpress-websites/

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
http://shop.pixemweb.com

Premium WordPress Theme
https://www.pixemweb.com/evo-pro-wordpress-theme/

$99 off Realtors IDX Setup Fee
https://signup.idxbroker.com/d/PixemWeb

Don’t forget to Subscribe and follow us @

https://www.patreon.com/pixemweb
http://www.youtube.com/c/Pixemweb?sub_confirmation=1
https://www.pixemweb.com/
https://plus.google.com/+Pixemweb/

https://www.facebook.com/pixemweb
https://www.linkedin.com/in/pixemweb
https://instagram.com/pixemweb/
https://www.quora.com/profile/Joel-Rivera-2

Original source


14 responses to “WordPress Theme Development Tutorial with Bootstrap & Underscores WP Starter Theme”

  1. 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

  2. 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.

  3. 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.

  4. 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

  5. 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?

Leave a Reply