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

Published by admin on

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:

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



PixemWeb · October 12, 2017 at 6:17 pm

This Video is Time Stamped with Links to the Various Sections located in the Description Area Towards the Bottom.
Get DevWP

Boun Vilailath · October 12, 2017 at 6:23 pm

You made my year. I've been waiting for Bootstrap 4! Next, you should teach us how to customize WooCommerce that ships with Underscores. You are the man!

Joyce Lee · October 12, 2017 at 8:35 pm

I’m going to show this to my students, maybe they’ll get into coding.

SophiaVille · October 13, 2017 at 8:53 pm

I’m going to show your video to my friends because maybe they will get into coding like me you taught me how to code

SophiaVille · October 13, 2017 at 8:55 pm

Dad can you please teach me more to code because I enjoy doing lessons with you

Joel Rudsberg · October 27, 2017 at 6:22 pm

Do you have more videos where you use bootstrap 4 and wordpress?

Hossain Saddam · November 27, 2017 at 2:54 pm

where is the next video ? Waiting

Andrés GL · December 8, 2017 at 11:35 am

Hi @PixemWeb I am having problems with popper and bootstrap. The console says:
"Uncaught SyntaxError: Unexpected token export"
"SyntaxError: export declarations may only appear at top level of a module"
"ReferenceError: Popper is not defined".

I am using the the jQuery version that brings WP 1.12.4 but in the bootstrap documentation uses jquery-3.2.1.slim.min.js How it worked for you? :/ Did change the jquery version?


Jak Kjs · December 21, 2017 at 9:09 pm

hay man first I tell u thank you for your video but I've one problem dropdown-hover is not apper
really I try and try but not working any solve for this problem ??

Carlos Alfaro · December 24, 2017 at 6:07 am

Thank you so much for creating this content! it's amazing! I'm learning so much!

Turgut Sezer · January 3, 2018 at 2:34 am

Hello Joel! I wonder how your brackets glow like that 18:17 ?
Is it a custom configuration or an extension maybe.
I'm creating my theme with your tutorials. What an easy way to create basic theme! Thank you.

Beto · January 9, 2018 at 11:21 pm

One of the best youtube video of how to develop a wp theme. Your folders structure looks professional and organized, so newbies avoid mistakes. Thank you!

Adam Salima · January 11, 2018 at 10:12 am

Hey pixem I'm having trouble with the nav bar. The button shows up on the left of the screen and all of my nav buttons are gone…has this ever happened to you? I have no idea what I'm doing wrong. I've rewound the video so many time to check my code but I still get this little square instead of a nav menu.

30 Days Local SEO · February 9, 2018 at 7:59 pm

What's with the number in enqueing the script? Right after the array(jquery)?

Gadget inline · February 23, 2018 at 11:37 am

any advice where can i learn wordpress with all this stuff w/out waiting for someone to make a tutorial on youtube????

Pinoy Vines Panda · March 2, 2018 at 9:58 pm

Does the bs4 nav walker here still working? mine does not when i put the bs4navwalker file. why is that?

Tee Jay · March 8, 2018 at 6:14 am

One of the greatest tutorial I have seen on YouTube. Beautifully explained.
However, I am facing one problem. When I insert a full width slider , there is a margin/padding of 15px on both sides.
How do I set it so that it stretches full width of viewport and there is no gap on the sides. Would appreciate your help/inputs on this. I have tried with metaslider and revolution slider.

web ddss · March 9, 2018 at 10:44 am

nothing to learn nothing to know. every time changing topics and methods. end of the result more confused

LocalFoodIdeas · March 10, 2018 at 4:16 am

I'm unable to download the video

Andrew S · March 21, 2018 at 5:15 am

Thanks for this video. Very insightful. Can you comment on what the value is in creating themes from scratch vs using elementor or other page builder for rapid development as many seem to be doing these days?

Mamadou Ndiade · April 2, 2018 at 1:29 pm

You did a great job through this WP Underscore theme Tut ! Thank you for that. It really help me understand more concepts around Underscore base starter theme. Thank a lot

Michael Hines · April 18, 2018 at 3:40 am

Hi, I really enjoyed your tutorial. I have a quick question regarding the setting up the grid. Would it not be easier to add the "col-md-4" grid to the actual sidebar.php file? that way we are only editing a single file, it would probably eliminate having to edit every file that calls the sidebar or is that not a good/best practice?

Kajsa B · April 23, 2018 at 1:40 pm

Great tutorial! I have a problem with the navwalker though and get this error-message: C:xampphtdocssbitestwordpresswp-contentthemessbitestincbootstrap-wp-navwalker.php on line137
Warning : in_array() expects parameter 2 to be array, string given in
I can't figure out why?

Phoenix Sales · April 25, 2018 at 6:23 pm

Question: I copied and pasted the code for the bs4navwalker code in Dreamweaver, and it's showing an error when I save it. Not totally savvy enough to debug it. Was wondering if you also discovered that? So far, I have been unsuccessful in getting my WP menu/navigation to work with my theme.

Michael Hines · April 27, 2018 at 3:34 pm

Hey Joel, I finished your tutorial and finally got my theme looking like yours, But I have one final question. I did a final theme check and there is a WARNING: Found wp_deregister_script in functions.php. Themes must not deregister core scripts. Is it safe to deregister these scripts? is there a work around that the error does not appear in theme check? Thanks

yoeri van wassenhove · May 8, 2018 at 12:18 pm

Thanks for the content and your step by step walk through. I like your style of teaching as it is practical and hands on and can help new developers with the workflow that is necessary to start and finish off projects.

olamidearibisala · May 9, 2018 at 12:37 pm

Please i need some insight from you. I want to build a WordPress website and my goal is to build the entire front end from scratch without a theme so i can have complete control of the entire look and feel (UI/UX) of the website. Please is this possible and how can i achieve it if it's possible.

Darren Bachan · May 23, 2018 at 11:34 pm

I can't get the hover to work on the nav. I followed this video exactly. If I click on the dropdown, then it appears.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: