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:
https://www.figma.com/file/Qeah95CxhSqU5DQHxdpZQC/How-to-make-a-custom-WordPress-theme-from-scratch?node-id=0%3A1
https://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: https://youtu.be/cLhnubqavDg
Part 2: https://youtu.be/fxaeY0J5pTw
Part 3: https://youtu.be/WC4v4EjkUGk
Part 4: https://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: 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