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
https://youtu.be/ANGVvpe7oCw
Follow along on Figma with the Design UI:
https://www.figma.com/file/zrPD4gbiEi2J0YZYq5lrkt/WordPress-Theme-Development-2020?node-id=0%3A1
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!
#wordpress #theme #development
Learn Design for Developers!
A book I’ve created to help you improve the look of your apps and websites.
📘 Enhance UI: https://www.enhanceui.com/
Feel free to follow me on:
🐦 Twitter: https://twitter.com/intent/follow?screen_name=adrian_twarog
💬 Discord: https://discord.gg/6gmmFvxkD7
💸 Patreon: https://www.patreon.com/adriantwarog
Software & Discounts:
🚾 Webflow: https://webflow.grsm.io/adrian
🌿 Envato: https://1.envato.market/yRZjz2
🌿 Envato Elements: https://1.envato.market/LP0OJZ
🔴 Elementor: https://elementor.com/adrian/?ref=23140
✖ Editor X: https://www.editorx.com/adrian-twarog
Computer Gear:
⬛ Monitor: https://amzn.to/3f9DOQI
⌨ Keyboard: https://amzn.to/3eA5UFD
🐁 Mouse: https://amzn.to/3xVJO8l
🎤 Mic: https://amzn.to/3hgCfms
📱 Tablet: https://amzn.to/3ewt7sa
💡 Lighting: https://amzn.to/3vOZeZY
💡 Key Lighting: https://amzn.to/3f6qP2f
Camera Equipment:
📷 Camera: https://amzn.to/3uCv4J9
📸 Primary Lens: https://amzn.to/3vT6wMm
📸 Secondary Lens: https://amzn.to/3tyqWIX
🎥 Secondary Camera: https://amzn.to/3o2zCGi
🎙 Camera Mic: https://amzn.to/33tCz9l
🎞 USB to HDMI: https://amzn.to/33yW9RE
source
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!
Awesome content man!!
Thank you for a greet video! 🙂
i run with node.js (npm run watch)
I did encounter an issue – theme.scss file is being compiled every time i save it, is see the result in theme.css
but it looks like it is never included in the theme at the front site dosnt load it or reflect any of the changes i make
do you have any idea why ?
Hi and good day dear Adrian, thank you for the great support. Thank you for the Video that covers the Theme development.
Well – right now – one week before Version 5.9 is landing,
You could come up with a new video that covers all the great topics that me ( and many many other wordpress-users from all over the globe) – well i guess that all WordPress user are interested in Gutenberg, Full-Site-Editing (FSE), Block-Theme, Query-Loop and lots of others.
i would love to see more videos from you. Keep up the great work
Please explain installing database and vscode in beginning of WordPress installation
I am unable to run gulp watch please guide me
Awesome explanation! Thank you sooo much!!!)
can i follow this tutorial without gulp watch as it is not working for me for both understrap and picostrap?
Great work, How do I access the host file?
Understrap is flagged as virus on my windows, any reason why that is?
Incredible !! 👏👏
A lot of hard-coding…
Hi Adrian, great work. I know enough to build a theme but I guess I need to know the best practices. Thanks for the videos. When do you have part 3 and specifically be interested to know the reserve a table section. Best from UK.
Hi Adrian! Thanks for the nice huge video, very well done! However I have found few things are missing here. I was watching this twice and can't find when you added the BACK TO TOP button, did you forgot about it? I wanted only to see how you implement a functionality of this button as this need to be in JS i guess.
Also you said you will be also building rest of the pages in next video which is not exist. Is there any content related to this video that I can't find?
May thanks for a great work!
Sir., can u please tell me which application you use for take styling of those website screenshots.. It's really helpful for me
4:24 – When should I use the Uderstrap child theme?
Where did you get the host file? I used the similar hosts file like you. BUt it doesn't work. Are you using Xampp? or mamp?
It doesn't work the way you are showing
translate plase
I cannot find the files in github
so is this a parent theme or a child theme?
after "npm install" the gulp dependencies was not installed, what went wrong? Please help Adrian… and I cant find the gulpfile.js as well
Incrível! Pelo processo de tradução da imagem conceito ao código, eu aprendo mais aqui do que jamais aprendi! Por favor continue inspirando os frontend iniciantes !! Obrigado.
Great tutorial… and lovely design! Do you have a link for the completed files please?
thank you for the awesome tutorial! Where can we get the image files for this tutorial? kind regards, Peter
this video is hard to follow, i will rate it later on tho for fairness
How do you get a popup window (Chrome developer popup window) ???? Love from India💛💛💛💛
Is that XD to HTML or WordPress Theme Development, very confused?
In this tutorial , are your creating this site using react js???
Yo Adrian, I'm trying to start the gulp file, I did the npm install and when I write gulp watch I get Starting 'watch'… and it's stuck.
Can you help me?
How to remove node modules
Hi Adrian ! I tried to put a background image but it doesn't work at all. Even when I change the color background I can't see the changement. How can I resolve this issue ?
Is this tutorial good for beginner who doesn’t know much of programming basics. Would u recommend me to learn programming language first or u got it all covered in this video?
thank you sir, god bless you for your awesome tutorial
That's insanely impressive, but what's the use of doing that? The builders does the same thing in minutes. And yes, they talk about Google page speed, but many websites don't require SEO, and also, page speed is only one of multiple ranking parameters. Additionally, if you build a site like this and you lose your webmaster, it will cost you significantly more to maintain and fix than a regular wordpress site that every body and their dog can work on. So what is the true benefit of this type of building strategy?
Hi Adrin! Thanks for this valuable tutorial. is javascript necessary for wordpress theme development or learning php is enough?
Very clear and informative video … thanks ..❤
Love this stuff.