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

source

47 Comments

  4. I only saw the beginning of the video. I don't have a special interest in Bootstrap. I guess the same design can be developed without that tool. I'm right?

  5. Greaaaaaaaaatttt Oneeeeee!!!! I see that this was requested by someone. I would like to make a request now. I hop you do this. Can we get a course where we can develop theme from scratch for WordPress or for peoples who can make use of our theme?

  6. This yellow is actually orange! Lol. Love you man, amazing job you have done and even better help for me. I'm currently learning WP for upcoming project. Thank you, thank you, thank you!

  23. Hi,
    I'm trying to understand, what's this tool that you are working with to see all the different styles(mobile,desktop etc)? all the video you are working with it.

  25. Nothing more discouraging than looking at the 9hr duration before beginning. Wouldn't it have been better to make each section into a separate video and have them grouped into a playlist on your Y.T.Channel? At least that way you could gauge which topic was the most popular. You're not the only W.P. content creator. I've already watched hours of this stuff…. really don't want to sit through another 9! P.S…. you've picked a really awful color scheme and industry example too. Why would I sit through 9 hours of tutorial to create this!?

  26. Hello Adrian Thank you very much for this awesome tutorial
    I kind of faced a problem in 8:26:00 when you are trying to get the variation prices that code just didn't work for me
    if you just can share the code of this project then it will be helpful
    thank you in advanced.

  28. Always remember to repent of your sins (sin is transgression of YAHUAH The Father In Heaven’s LAW: Genesis, Exodus, Leviticus, Numbers, & Deuteronomy) And Have Belief On Yahusha The Messiah. HE Died and Rose three days later so that you can be forgiven of your sins!

    HE Loves you! Come to HIM!🙂

  29. Can't get _theme and _theme_variables to overwrite the default bootstrap. Any suggestions?

    Unfortunately, I'm 16 mins into this tutorial and have spent 2-3 hours troubleshooting all the disconnects. Environment set up is broken / overly complicated and the scss files edited in the video don't overwrite the bootstrap files.

    I applaud the time you took and I appreciate your efforts, but this tutorial is currently obsolete. Might be good to add some notes or create a 2021 version.

  30. I just spent about an hour creating an easier environment setup for this, the npm/gulp issue, etc… and Youtube seems to have deleted the comments for whatever reason

    tl;dr
    – set up your site with Local by Flywheel, this takes care of everything up to getting understrap set up
    – for understrap, go to the github, download the .zip, unzip, copy and paste all the unzipped files into a new theme directory, then in your Terminal, cd to the west-coast theme folder and enter the command:
    npm link gulp
    then enter:
    npm install

  33. i want to know how to upload this theme for public ?? how can they download it and customize it in their own way like adding their product images and editing the product description and price? please reply I am so confused

  36. (sees tutorial is 9 hours long) Alright, this certainly won't leave any gaps. Time to settle in for the day.
    (reads the description) Wait… this is only part one??

  38. Hi Adrian,
    Thank you for your time to teach us theme development, after gulp watch, it gets stuck to starting how do I fix this.
    Do the changes on the host file modification have to be done on the system32 folder?

    TIA

  46. Hi Adrian, how can I install "npm" in vscode? the video shows so fast. I watched it a couple of times, I still didn't get it……Anyways, thank you for your time and dedication

Leave A Reply

Please enter your comment!
Please enter your name here