Learn How To Code a WordPress Theme – Development Tutorial with Bootstrap 4, Underscores & DevWP

PHP By Builder

In this video we are going to take a deep dive into WordPress Theme Design & Development with a Tutorial on integrating the Bootstrap 4 front end framework with Underscores which is a starter theme for WordPress. The end result is a Developer’s training theme I’m calling, DevWP.

By the end of this video, you will Learn How To Code a WordPress Theme.

Table of Contents is At The Bottom of the Description.

Get DevWP:
https://www.pixemweb.com/devwp-wordpress-development-training-theme/
The goal of this video and the playlist it’s in, is to help guide you through the process of coding your very own WordPress Theme and to get more familiar with the various aspects of coding.

In this video I walk you through some of the key files and folders used in a typical WordPress theme. I demonstrate the process of combing the various coding languages used to create modern day websites from html, css, javascript, php and of course, the WordPress Way.

I touch on how using Bootstrap 4 with Underscores can help you streamline your workflow and help you create unique WordPress Themes, either for your very own website or blog, or a theme to be uploaded to the WordPress Repository, or a theme that you sell on your website, or a custom theme you create for a client you have.

As a WordPress Developer who has spent years learning the ins and outs of creating highly functional and visually appealing WordPress Websites, I want to give people a shortcut that I wish I had.

This video will help jump start your WordPress Coding Journey and hopefully serves as a valuable resource to helping you code and create, the next great WordPress Theme which will be the face of a hopefully, popular, WordPress Powered Website.

Table of Contents:
01:11 Download Assets
04:27 Install DevWP
05:00 Plugins Used
05:37 Install Theme Unit Test Data
06:44 Walk Through of Final Theme
07:35 Walk Through of Theme Files and Folders
09:42 Asset Extraction
13:00 Functions.php File Code
26:41 Bootstrap Navwalker
28:24 Scroll To Top Code
33:54 Bootstrap Nav Dropdown Hover Effect Code
35:40 Header.php File Code
48:08 Footer.php File Code
50:00 Index.php File Code
55:48 Sidebar.php File Code
57:00 Single.php File Code
1:00:00 Archive.php File Code
1:01:00 Search.php File Code
1:01:40 Page.php File Code
1:02:15 404.php File Code
1:04:00 Content.php & Content-page.php for Featured Images
1:07:05 Additional Page and Post Layouts
1:12:00 Style.css FIle Code
1:43:25 Excerpt vs Content for Blog Roll Page and Single Post
1:46:35 Additional Nav Links Added
1:48:15 What’s Next in Upcoming Videos
1:49:30 Recap of What We Accomplished

source