How to make a custom WordPress theme from scratch
Tags: wordpress, webdev, tutorial, beginners
Published: 2020-06-26 15:51:36

9 hour tutorial on WordPress, eCommerce and more, building a complete custom theme website! This is my biggest tutorial yet. I cover WordPress installation, developing a homepage, styling with SCSS, internal pages and blogs, products, etc.

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.

{% youtube cLhnubqavDg%}
<strong>[How to make a custom WordPress theme from scratch](https://youtu.be/cLhnubqavDg)</strong>

[00:00:00 - Introduction](https://youtu.be/cLhnubqavDg)
[00:02:00 - Installing WordPress and our Custom Theme](https://youtu.be/cLhnubqavDg?t=2m)
[00:10:30 - Setting up the WordPress Website Folders and Menus](https://youtu.be/cLhnubqavDg?t=10m30s)
[00:15:50 - Header](https://youtu.be/cLhnubqavDg?t=15m50s)
[01:05:04 - Home Call to Action](https://youtu.be/cLhnubqavDg?t=1h5m4s)
[01:29:55 - Home Banner](https://youtu.be/cLhnubqavDg?t=1h20m55s)
[01:49:40 - Home Special Offer](https://youtu.be/cLhnubqavDg?t=1h49m40s)
[02:14:40 - Home WooCommerce Products](https://youtu.be/cLhnubqavDg?t=2h14m40s)
[02:53:30 - Home Section Circles](https://youtu.be/cLhnubqavDg?t=2h53m30s)
[03:07:36 - Home Testimonials](https://youtu.be/cLhnubqavDg?t=3h07m36s)
[03:12:39 - Home Footer Contact Form](https://youtu.be/cLhnubqavDg?t=3h12m39s)
[03:31:55 - Internal WordPress Page](https://youtu.be/cLhnubqavDg?t=3h31m55s)
[03:53:33 - Blog Post News Items](https://youtu.be/cLhnubqavDg?t=3h53m33s)
[04:17:30 - Contact Us Page](https://youtu.be/cLhnubqavDg?t=4h17m30s)
[04:30:20 - Blog Categories](https://youtu.be/cLhnubqavDg?t=4h30m20s)
[04:58:45 - WooCommerce Setup](https://youtu.be/cLhnubqavDg?t=4h58m45s)
[05:13:05 - WooCommerce Product ](https://youtu.be/cLhnubqavDg?t=5h13m5s)
[05:58:12 - WooCommerce Variation Product](https://youtu.be/cLhnubqavDg?t=5h58m12s)
[06:16:00 - Custom JS Product Variation lookup](https://youtu.be/cLhnubqavDg?t=6h16m)
[07:20:13 - Home Dynamic WooCommerce Product Listing](https://youtu.be/cLhnubqavDg?t=7h20m13s)
[07:31:35 - Header Dynamic Ecommerce Lookup Listing](https://youtu.be/cLhnubqavDg?t=7h31m35s)
[08:52:30 - Conclusion](https://youtu.be/cLhnubqavDg?t=8hr52m30s)

This was only part 1 for this WordPress eCommerce Website design. I will post part 2 soon, where we customise other aspects of this website including the Cart and Checkout Pages!
TBA: Link

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.

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)
* [💬 Discord](https://discord.gg/nGdThpE)
* [❤ Patreon](https://www.patreon.com/adriantwarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Adobe XD to Fully Responsive WordPress Site](https://dev.to/adriantwarog/adobe-xd-to-fully-responsive-wordpress-site-16e0)
* [Adobe XD to HTML Full Process](https://dev.to/adriantwarog/adobe-xd-to-html-full-process-ao6)
* [Full Tutorial on how to use SASS to improve your CSS](https://dev.to/adriantwarog/full-tutorial-on-how-to-use-sass-to-improve-your-css-57on)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)