[ad_1]
https://i.ytimg.com/vi/pEJ2IzYOx5c/hqdefault.jpg
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
Original source
26 responses to “Learn How To Code a WordPress Theme – Development Tutorial with Bootstrap 4, Underscores & DevWP”
This Video is Time Stamped with Links to the Various Sections located in the Description Area Towards the Bottom.
Get DevWP
https://www.pixemweb.com/devwp-wordpress-development-training-theme/
i need DevWP , how do i download for free ?
You really know your craft! Found someone I like to watch apart from Brad tranversy . You guys really know how to make complex things sound easy
I not understand the procedure to do when you don’t have devwp, you said it wasn’t mandatory… but when we arrive to extract all the things we downloaded what am i supose to do if i don’t have it?
Thanks a lot 🙂 good work, it helped me learn many topics
Ever heard of Vagrant and virtual machines, instead of those old outdated wamp/mamp-crap? Even Docker or Heroku is better, and shareable too… otherwise a well put together tutorial on WP theme development. Workflow needs improvement though… 😉
Hi, Great starter video, is it going to be finished ? wit example an theme setup video ?
Hi PixemWeb, loving your video as it's so easy to follow. However, I'm running into some problems. I'm up to around 47 minutes in. All of my js files (e.g. /src/js/nav-scroll.js) have read errors saying 'ERROR: 'jQuery' is not defined. [no-undef]'. When I also add 'row' to the site-content class (47:02), the content goes larger than the screen and then menu doesn't appear. Are you able to help with this? Not sure if they're related or separate issues.. Thank you!
Thanks for the videos, they are really helpful 🙂 , I'm waiting for the navbar customizations video, hopefully it will be out soon!
Loved this video – thank you for going through everything step-by-step. I'll admit I was hoping you'd adjust styles with sass so we could get a better idea of how that works. One issue I've run into is I've noticed by default underscores' sass compiles to css/styles.css instead of the style.css in the root theme directory, which effectively means it doesn't work. I'm curious if you've run into this issue or how you set things up so the sass compiles to the correct style.css? Thanks again.
great lesson!
Thank you very much! Your video was the only one who helped me to solve my problem to enqueue Bootstrap properly to my theme!
Sir great content, persons like your stile of taching must be on the colleges , and of course in CS majors, for me the most important skill, for someone who teachs code is the one who teachs how to read it, whit my back ground on math i'd so many folks , who don't teach how to 'listen' aan ecuation or how to read an interpret a problem, and most important get the studen whit more questions.
Finally, a couple of questions :if i am using gulp, and the source code of bs 4 , What kind of thing i have to bear in mind? second as ridiculous as sound, i have to compile the Dev wp undescores css into sass using Gulp? i tokk this as a brick and mortar proyect and of course as a code challenge because thats the way you master this stuff, and thanks.
awesome explain thank you 🙂
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.
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.
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.
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
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.
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?
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?
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
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?
I'm unable to download the video
nothing to learn nothing to know. every time changing topics and methods. end of the result more confused
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.
Thanks