Uploaded June 2020 | Updated September 2026, 2 weeks ago
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:
figma.com/file/Qeah95CxhSqU5DQHxdpZQC/How-to-make-a-custom-WordPress-theme-from-scratch?node-id=0%3A1
drive.google.com/file/d/1HlA4aMPpq356WWw4XtwfYRCdZuKbdhhh/view?usp=sharing
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: youtu.be/cLhnubqavDg
Part 2: youtu.be/fxaeY0J5pTw
Part 3: youtu.be/WC4v4EjkUGk
Part 4: youtu.be/8TOIZVLCZiE
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: 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
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:
figma.com/file/Qeah95CxhSqU5DQHxdpZQC/How-to-make-a-custom-WordPress-theme-from-scratch?node-id=0%3A1
drive.google.com/file/d/1HlA4aMPpq356WWw4XtwfYRCdZuKbdhhh/view?usp=sharing
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: youtu.be/cLhnubqavDg
Part 2: youtu.be/fxaeY0J5pTw
Part 3: youtu.be/WC4v4EjkUGk
Part 4: youtu.be/8TOIZVLCZiE
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: 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
