How to make a custom WordPress theme from scratch

Adrian Twarog

How to make a custom WordPress theme from scratch

We create a WordPress theme from scratch by building it from a basic design. The whole process from installing Wordpress to setting up a theme template and getting it up and running will be covered. This also has woocommerce and eCommerce aspects which I will also cover while we build the HTML, CSS and JS.

00:00:00 – Introduction
00:02:00 – Installing WordPress and our Custom Theme
00:10:30 – Setting up the WordPress Website Folders and Menus
00:15:50 – Header
01:05:04 – Home Call to Action
01:29:55 – Home Banner
01:49:40 – Home Special Offer
02:14:40 – Home WooCommerce Products
02:53:30 – Home Section Circles
03:07:36 – Home Testimonials
03:12:39 – Home Footer Contact Form
03:31:55 – Internal WordPress Page
03:53:33 – Blog Post News Items
04:17:30 – Contact Us Page
04:30:20 – Blog Categories
04:58:45 – WooCommerce Setup
05:13:05 – WooCommerce Product
05:58:12 – WooCommerce Variation Product
06:16:00 – Custom JS Product Variation lookup
07:20:13 – Home Dynamic WooCommerce Product Listing
07:31:35 – Header Dynamic Ecommerce Lookup Listing
08:52:30 – Conclusion

Figma Design UI Files and Assets:

This was only part 1 for this WordPress eCommerce Website design. In part 2, where we customise other aspects of this website including the Cart and Checkout Pages!

Part 1:
Part 2:
Part 3:
Part 4:

This Wordpress tutorial will also be covering some of the javascript and PHP elements that help you know how to make a website with basic programming and coding. If you enjoy web design tutorials and looking for Wordpress for beginners videos like this, these are part of a series I do about how to create a Wordpress website and do Wordpress theme installation, and you can check out some of the other playlists on my channel.

Learn Design for Developers!
A book I’ve created to help you improve the look of your apps and websites.
📘 Enhance UI:

Feel free to follow me on:
🐦 Twitter:
💬 Discord:
💸 Patreon:

Software & Discounts:
🚾 Webflow:
🌿 Envato:
🌿 Envato Elements:
🔴 Elementor:
✖ Editor X:

Computer Gear:
⬛ Monitor:
⌨ Keyboard:
🐁 Mouse:
🎤 Mic:
📱 Tablet:
💡 Lighting:
💡 Key Lighting:

Camera Equipment:
📷 Camera:
📸 Primary Lens:
📸 Secondary Lens:
🎥 Secondary Camera:
🎙 Camera Mic:
🎞 USB to HDMI: