Uploaded June 2020 | Updated September 2026, 2 weeks ago
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
youtu.be/ANGVvpe7oCw
Follow along on Figma with the Design UI:
figma.com/file/zrPD4gbiEi2J0YZYq5lrkt/WordPress-Theme-Development-2020?node-id=0%3A1
Code Snippets:
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: enhanceui.com
Feel free to follow me on:
🐦 Twitter: twitter.com/intent/follow?screen_name=adrian_twarog
💬 Discord: discord.gg/6gmmFvxkD7
💸 Patreon: patreon.com/adriantwarog
Software & Discounts:
🚾 Webflow: webflow.grsm.io/adrian
🌿 Envato: https://1.envato.market/yRZjz2
🌿 Envato Elements: https://1.envato.market/LP0OJZ
🔴 Elementor: elementor.com/adrian/?ref=23140
✖ Editor X: editorx.com/adrian-twarog
Computer Gear:
⬛ Monitor: amzn.to/3f9DOQI
⌨ Keyboard: amzn.to/3eA5UFD
🐁 Mouse: amzn.to/3xVJO8l
🎤 Mic: amzn.to/3hgCfms
📱 Tablet: amzn.to/3ewt7sa
💡 Lighting: amzn.to/3vOZeZY
💡 Key Lighting: amzn.to/3f6qP2f
Camera Equipment:
📷 Camera: amzn.to/3uCv4J9
📸 Primary Lens: amzn.to/3vT6wMm
📸 Secondary Lens: amzn.to/3tyqWIX
🎥 Secondary Camera: amzn.to/3o2zCGi
🎙 Camera Mic: amzn.to/33tCz9l
🎞 USB to HDMI: amzn.to/33yW9RE
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
youtu.be/ANGVvpe7oCw
Follow along on Figma with the Design UI:
figma.com/file/zrPD4gbiEi2J0YZYq5lrkt/WordPress-Theme-Development-2020?node-id=0%3A1
Code Snippets:
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: enhanceui.com
Feel free to follow me on:
🐦 Twitter: twitter.com/intent/follow?screen_name=adrian_twarog
💬 Discord: discord.gg/6gmmFvxkD7
💸 Patreon: patreon.com/adriantwarog
Software & Discounts:
🚾 Webflow: webflow.grsm.io/adrian
🌿 Envato: https://1.envato.market/yRZjz2
🌿 Envato Elements: https://1.envato.market/LP0OJZ
🔴 Elementor: elementor.com/adrian/?ref=23140
✖ Editor X: editorx.com/adrian-twarog
Computer Gear:
⬛ Monitor: amzn.to/3f9DOQI
⌨ Keyboard: amzn.to/3eA5UFD
🐁 Mouse: amzn.to/3xVJO8l
🎤 Mic: amzn.to/3hgCfms
📱 Tablet: amzn.to/3ewt7sa
💡 Lighting: amzn.to/3vOZeZY
💡 Key Lighting: amzn.to/3f6qP2f
Camera Equipment:
📷 Camera: amzn.to/3uCv4J9
📸 Primary Lens: amzn.to/3vT6wMm
📸 Secondary Lens: amzn.to/3tyqWIX
🎥 Secondary Camera: amzn.to/3o2zCGi
🎙 Camera Mic: amzn.to/33tCz9l
🎞 USB to HDMI: amzn.to/33yW9RE
