WordPress Theme Development Tutorial 2020
This wordpress theme tutorial will help those looking to make a new custom wordpress theme 2020. The wordpress tutorial covers how to create a WordPress theme using understrap, so if you are interested in how to make your own WordPress theme, this should have you covered. We use a combination of HTML, css, js with bootstrap.
00:00:00 – Introduction to WordPress Custom Theme Development
00:00:24 – WordPress Custom Theme Design
00:02:14 – Installing WordPress, Understrap, Database
00:07:02 – WordPress and Setup Custom Theme Understrap
00:10:27 – Website Custom Theme CSS and Header Preparation
00:12:00 – Header Layout
00:19:50 – Header and Navigation CSS Styling
00:26:10 – Website Custom Fonts Imported Google
00:28:42 – Header Menu Layout and Styling
00:33:54 – Header Top Section Logo Links
00:48:27 – Header Responsive Design
00:59:30 – Header Mobile Menu Button and Nav
01:27:10 – Header Logo and Nav for mobile
01:34:30 – Home Page Hero Banner
01:48:14 – Home Call to Action Section
02:10:20 – Home Welcome to Section
02:35:05 – Home News Section
03:07:35 – Home About Us Section
03:42:16 – Home Testimonials Section
03:55:30 – Home Newsletter Signup Section
04:15:26 – Home Social Media Section
04:34:17 – Home Footer and Contact Form Section
04:53:44 – Home Animation using Wow Animation.css
05:06:25 – WordPress Home Page Review
05:10:14 – Conclusion
WordPress Theme Development Tutorial 2020 | Part 2
Developing Internal Pages, Posts, Contact Us
Follow along on Figma with the Design UI:
Code Snippets:
https://github.com/adriantwarog/code-snippets/blob/master/moshi.php
This WordPress tutorial for beginners 2020 will help you create WordPress theme for those people who are WordPress for beginners. WordPress theme 2020 tutorials are many, but this is a real world example of a WordPress theme 2020 for real world projects. If you are create WordPress theme and you want more content on how to make your own WordPress theme for the future, I can do more videos like this on the HTML, CSS, even the bootstrap designs and how I go about developing them!
Design for Developers – Enhance UI
A book I’ve created to help you improve the look of your apps and websites.
📘 Enhance UI: https://www.enhanceui.com/
#wordpress #theme #development
Follow and support me:
🐦 Twitter: https://twitter.com/adrian_twarog
💬 Discord: https://discord.gg/nGdThpE
💸 Patreon: https://www.patreon.com/adriantwarog
🖥️ Dev.to: https://dev.to/adriantwarog
I am trying to grow my channel, so if you find this video useful, #subscribe & hitting the #bell 🙂 Thanks for watching and hope you liked and learnt something new!
thanks bro, can i have the hosts file here
can i get the host folder that you copied from mosh project that you have bro still getting error about 127.0.0.1 backbeach.localhost.
Hi Adrian!
New subscriber here, I work with another developer who recommended understrap as well and so was super excited to find your tutorials.
I unfortunately got stuck on the npm install, gulp watch, and ended up spending 5 or 6 hours trying to problem solve it. Tried lots of community docs but nothing worked.
Have you had any difficulties with understrap and npm? Best I can see
there may be some compatability issues with the newest versions of either sass or gulp, and that understrap isn’t being maintained as regularly now, but I have minimal experience with node or any package managers like that
This tutorial looks fantastic, just a bit fast for me being a newbie. It would be great if you could show how to do the initial set up using Bootstrap as well as your own CSS and how to compile it all down using Gulp. What dev-dependencies you use and all that.
Please do a tutorial for vs code npm install mine not working
gulp watch is not working
error:
gulp : The term 'gulp' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try
again.
At line:1 char:1
+ gulp watch
+ ~~~~
+ CategoryInfo : ObjectNotFound: (gulp:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
Can you create the same tutorial without understrap?
excellent tutorial showing the entire workflow ++
Watching Windows unzip wordpress … As a Linux user that gave me a huge smile.. haha
I am a WordPress lover. Thank you for sharing!
plz make more WordPress Development tutoreal video, its really one of the best ever amazing tutoreal video
Do you recommend creating an Understrap child theme so that all changes are saved if Understrap updates?
You didn't show every single step, not everyone will know how to set up a data base. I would suggest that you add a chapter showing newbies how to set up a DB. Personally I use Local By Flywheel. Also for the hero image it's preferable to make it dynamic so users can change it on the front end – ACF 🙂
Thank you Adrian for making this very helpful video 😉 please more videos on WP ( plugins building from scratch ..) Thank you.
Word Press ist euch nicht so ganz geheuer? Ich hab die Lösung Dieses
Produkt https://www.digistore24.com/redir/37961/MoritzB/ ist eine
Optimale WordPress Lösung, kostet sein Geld, aber kann euch nur meine
Geschichte erzählen: Hab die 200 Euro zusammengekratzt (hat gerade so
geklappt). Ich wollte einfach unbedingt mit Webseiten Geld
verdienen(kann aber nicht Programmieren). Bin daraufhin auf diese
Software aufmerksam geworden und hab sie gekauft. Hab dank der
Software(die viel besser ist wie WordPress,mehr strukturierter) schon
mehrere tausend Euro verdient. Ich empfehl euch das Produkt weil ich der
meinung bin das ihr das auch schaffen könnt. Viel Spaß mit dem Produkt
und Viel spaß beim Geld Verdienen
What's the prerequisites for learning this course?
Awesome design!
This tutorial is perfect. It’s exactly my level. Thanks so much!
this is amazing! thank you so much
I'm just starting but wow this looks informative!!!!!!! Thank you for your efforts man!!!!
You the best
Hi Adrian, I will be taking a journey to go through all your video.
Hi Adrian,
thanks for taking the time to make such a great video. Just subscribed and following this video to get started with wordpress development utilizing bootstrap 🙂
I read that to keep your theme updateable it's best to word with child themes… do you plan to make a video how you go about this (with the understrap theme)?
I wanted to try it with this understrap child (https://github.com/understrap/understrap-child) as a starting point, but unfortunately the npm install command fails with a lot of error messages.
Greets,
Daniel
why is everything going node.js?? way too much overhead for something that can be simple.
Hello Adrían, possibility to add Spanish subtitles. Greetings from Chile.
I just subscribed. You are doing a great job. I needed a tutorial like this. Thank You.
Thanks Adrian. Great video. Thumb UP!!! One question – where can i get the gulp starter package that you use in your project?
Hey Adrian! About halfway through now and learning lots!
Have you worked with custom taxonomies at all or can you show how to set some of that up?
I’m still finding working with $args = a bit overwhelming at the moment
WTF I JUST WANT A BLANK PAGE TO ADD BLOCKS I DONT WANT ALL THIS OTHER THEME STUFF
dude you literally went from 0 to advanced in 5 minutes
hi bro
nice effort
i hit a road block here
never used visual basic in we desiging i used to upload wordpress on a hosting acc and just miss with plugins
i guess adobexd is nothing
but visual basic
could u at least tell me what version should i use !
thanks in advance , awesome tut
i suped and liked
"how to create a static website and have WordPress display it"
cannot see gulp when you run the command
Hi Adrian, node modules throw error message when you run gulp.
C:Blackbase ProjectsThe Cake Angelwwwwp-contentthemesthecakeangel-theme>npm install
> [email protected].1 install C:Blackbase ProjectsThe Cake Angelwwwwp-contentthemesthecakeangel-themenode_modulesnode-sass
> node scripts/install.js
internal/fs/utils.js:269
throw err;
^
Error: EPERM: operation not permitted, read
at Object.readSync (fs.js:568:3)
at tryReadSync (fs.js:353:20)
at Object.readFileSync (fs.js:382:19)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1156:22)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Module.require (internal/modules/cjs/loader.js:1025:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.<anonymous> (C:Blackbase ProjectsThe Cake Angelwwwwp-contentthemesthecakeangel-themenode_modulesrequestindex.js:18:15)
at Module._compile (internal/modules/cjs/loader.js:1137:30) {
errno: -4048,
syscall: 'read',
code: 'EPERM'
}
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modulesfsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected].1 install: `node scripts/install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected].1 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:UsersBonkeDyanAppDataRoamingnpm-cache_logs2020-09-15T14_56_17_842Z-debug.log
Hi, is it possible to make a Woocommerce tutorial?
What's the homepage ext you are using?
Love the video but using Astra Theme with Elementor will make this a breeze. You’ll be done in a day. Save your website offline with Duplicator. Clone and edit when you’re building a new project
this a great tutorial to learn how to develop WordPress theme the easy way. Adrian i really appreciated if you make a video about WordPress plugin development
Hii Adrian, my npm install code doesn't work please help
Hi Adrian, thank you soooooooooooooo much for makign this video.
I myself am a software engineer mainly dedicated in JS frameworks but really learnt a lot from this video. I have already subscribed to your channel and am going to keep watching all the series in your channel. Thanks again for your excellent video tutorial. Keep up the good work!!
Hi Adrian Twarog,
Let me get a support from you.
Could you please give me your email ID. ?
Can you share the boiler plate integrated with gulp and babel and webpack
Way way too fast!
"gulp watch" command is not working, I've got gulp installed though. I've got an error: "No gulpfile found". Has anyone had this problem?
Also my file _theme.scss is not working. How to connect it with template-home.php?
All done as you said. Powerful tutorial and straightforward. Welldone
Learned a lot thanks.
DUDE! You're the best. Thanks so much for this. They should call it Gator-Age instead of Gatorade. Cheers lad
great tutorial !!!! when I try to modify a variable and writes "gulp watch" it says this command is not recognized. I've install node.js and gulp but it's been impossible to modify the primary color yet. Does anyone had the same problem and found a solution for this ?
thanks
Thank you!!!
you are a great instructor. I have been following you content on your channel and also on guess lecture on the traversal channel as well. a happy subscriber
woocomerce customize shop page using php,please bro make it for one video please,i need to change product design hover effect change
my theme name won't change automatically when I edit my style.css comments in VS Code editor. I am forced to do that in my WP dashboard under Appearance > Themes Editor > style.css….only then my theme name changes… is my setup wrong? I use XAMPP and also have node.js and npm installed
Hi Adrian, ive seen alot of tutorials in my time being a web developer myself…I must say, the way you explain stuff is fantastic (Although you are a little quick) lol….your website moshi moshi marketing loads super quick, are you on nginx?
Fantastic showing the different techniques……..Well done that man!
Not even using Tailwind ?
you know what sire.. this video is amazing and superb when it comes to frontend designing but i am thinking that the title of this video is kind of a bit misleading, coz for me, when you say development? first thing that comes to my mind is the backend,, is it just me? anyone? or can I suggest sire Adrian that he change this title to "Wordpress Theme Frontend Designing Development Tutorial 2020"? But overall Sire Adrian, this is still informational and excellent so keep it up! Another satisfied subscriber here.. Happy Coding =)
Where is PSD or XD Ui Link?
amazing work, thank you so much, do you have continuing tutorial for about us page and contact us page , I see you included them as section, how I include them as pages
Hey, really great video I was wondering whats your opinion on page builders compared to hard coding in 2020? Many youtuber make easy page builder videos, but they often are buggy and break, what would your go to tools be to make websites for small business( right now im using WordPress from starch and using my own html and css with their plugins) ?
Thank you very much
using node-v12.18.3-x64. after npm install, gulp watch doesn't work
Error Message is as follows
"gulp : The term 'gulp' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or
if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ gulp watch
+ ~~~~
+ CategoryInfo : ObjectNotFound: (gulp:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException"
What could be the problem ?? Can you help please??
Hi, Adrian! Thank you a lot for the perfect content. You made my day! Besides, can you please tell which VS Code theme do you use? I spent about an hour, but couldn't find it XD
Do I have to learn PHP before WordPress?
how to create host file?
hi
can u please tell me which extensions you use in vsc for color pick & auto complete tag ect.
hi
would like to know your opinion on web designs for future marketplace..
I trying to watch but was to no avail. I used "npx watch" , "gulp watch". plz help me
Hi
Nice Job ,
Please keep tutorial about develop custom WordPress theme , Thanks
Hey, I am trying to follow this (and it is a little bit fast), and I do run into some errors (due to typos and/or omission, etc.) would it be possible to have the source as a reference for troubleshooting? It would be easier to find mistakes and also it would be easier to follow (I am not looking to simply copy & paste, I am actually trying to learn something)
Hi there, Could you advice me how can I find the database user name and password. I am using a Mac.
i love your video!i have a question for you:so understrap is an uploadable theme? can i upload it on my server and use it to create a wp website?thanks
It doesn't work. I get stuck on gulp watch. I have tried npx gulp watch and gulp watch and it gets stuck on starting. So many other people also have the same problems. Gulp is also installed globally. Nice tutorial but you can't follow through.
I would like to do this tutorial. Unfortunately you added a "host" folder, didn't show us what was in the folder, edited one file and it works for you. But it won't work for me. I've tried editing my hosts in /system32, but it does not help me view the page locally when i go to "backbeach.localhost"
Hey Sir #AdrianTwarog, Would you please kindly share the XD file if possible?
Thank you so much!
Please create an ecommerce WordPress website using php
Hello Adrian , thank you so much , your long videos courses are extremly powerful when it comes to quickly learn something…please keep providing a ton of videos similar to this one ! best.. ( ps : please less music sound level if possible to let us focus deeply with your explanations , sorry and thank you )
Hi, I'm really enjoying this tutorial, and everything seemed to go easy, but at the end of setting up $lg responsiveness, my toggle menu button stopped working. I click on it and nothing happens. But it was working before. When I try to google, its just showing me solutions for bootstrap, not wordpress. I went back and re-watched it multiple times and seem to have everything the same way as you do. Any way of making the repo available or just the code snippet up to that point? around 1 hour and 8 minutes. Thanks
Thanks
What to know before starting this video?
I know html, css, js and bootstrap.
Excellent video content! Sorry for the intrusion, I would love your thoughts. Have you considered – Tansaiah Voiceless Transcendence (erm, check it on google should be there)? It is a good one of a kind guide for getting free online traffic and make money minus the hard work. Ive heard some great things about it and my good mate called Gray after many years got cool success with it.
Please make it dynamic. 90% code is html,css and JS. No dynamic content that will come from backend.
I'm using local sites , do I still need to change the code in the host file or can I just upload the folder? Also where would I find that host file. Thanks
Hello, I think the tutorial is fantastic, but it is not yet clear to me how a person / company can adapt the texts if one writes the text in the .php files and does not do it with, for example, WPBakery. Hope you understand what i mean.
I started watching, but got confused. You seem to refer to yourself in the plural; is there some reason for that?
npm doesn't work for me. I get this npm : The term 'npm' is not recognized as the name of a cmdlet, function,
script file, or operable program. Check the spelling of the name, or if a path
was included, verify that the path is correct and try again.
Bit confused at to what I'm meant to do
where can i get host file , i am completely beginner
Your tutorial is awesome but webpack creates problem.but I can't solve it
How to use wenpack in wordpress theme development?
Cool stuff, but sometimes I feel like you don't explain every little thing you do haha, you just do it quickly and move on
I'm considering starting a career in WordPress development, but I'm a little worried about the job outlook. Do WordPress developers even code anymore or can the entire website be easily built using page builders? Will there be a need for WordPress developers in ten years? Twenty years? Lastly, do WordPress developers often have to customize themes and plugins? Any advice would be appreciated.
how to create host file?
WordPress Form Builder plugin at $5.
We recently build a WordPress drag and drop form builder, with a modern user interface. The builder has a built-in style editor where you can design the form without any coding.
Key Features are:
Drag and Drop
Responsive Form
Built-in Style Editor
Conditional Logic
Conditional Integration
Lead Management
17 Field Types
13 Integration
Join our Black Friday sale and get the plugin only at USD 5.
https://bitpress.pro/
Black Friday is Coming on November 27, 2020. Get upto 60% discounts on Theme Forest Products like WordPress Premium Themes Purchase.For more details, Click Here: 1.envato.market/RxNVb
Could you make with only ACF?
how to create virtual host?
Subscribed!
So I'm following along and I haven't finished everything yet, but at the moment I have made the template and I'm creating my own banner and editing the nav and everything. I'm noticing because of removing what you did earlier has caused the loss of the functionality of using blocks in WordPress editor as nothing typed in there affects the page now unless its just edited in the theme editor. Do you address this later in the video and if you do can you point me in that direction?
Sorry for long-winded question. Still learning. I appreciate the video in general. So far it's been pretty helpful
Make a site using ACF, CPT, Shortcode & contact form/gravity form
Exactly what I needed! Thanks! I have one question, I downloaded an Enfold Theme. But there is no option to upload it in my WordPress account. Can someone help me with this?
Hello Adrian! I am new hhear and I do sub and like your videos. Can you do tutorial how to do programming lesson from scratch and what are the structures and meaning of it. THanks in advance!