[ad_1]
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:
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/
Tweets by PixemWebDesign
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”
There's a Table of Contents in the Description Section
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
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.
Is it bether to use bootstrap cdn?
The series are awesome!! Gonna try it out real soon 🙂
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.
it would been easier to add the div and class to the sidebar inside the sidebar PHP file, I think
Cool Tutorial mate… keep posting more… Cheers
Bootstrap 4 beta is great step forward.
Can this be done with Less?
You would like to try using theme builder TemplateToaster. They have added BOOTSTRAP support into it.
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
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?
was of great help 😉