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.
Design for Developers – Enhance UI
A book I’ve created to help you improve the look of your apps and websites.
📘 Enhance UI: https://www.enhanceui.com/
#wordpress #theme #tutorial
Follow and support me:
🐦 Twitter: https://twitter.com/adrian_twarog
💬 Discord: https://discord.gg/nGdThpE
💸 Patreon: https://www.patreon.com/adriantwarog
🖥️ Dev.to: https://dev.to/adriantwarog
source
I am trying to grow my channel, so if you find this video useful, #subscribe & hitting the #bell 🙂 Thanks for watching and hope you liked and learnt something new!
hi Adrian
im from iran
this video is exactly what i need for my developing time
tnx alot
plz speak a little more slower in videos
Thank you for this! So to make the whole site dynamic we could use ACF and Custom Post Types?
Amazing video bro, keep up with the good work!
Hey Adrian, I am not sure what I am doing wrong. I had trouble with another project as well. I followed every step even downloaded wamp, I was using laragon before which is easier to get started on wordpress. Where I get stuck on is the Gulp Watch. For some reason that does not work anymore. I looked in forums and I havent found an answer.
Why you dont use elementor to build that page? Its easy and fast to build.
Subbed, liked, saved, about to rip for later. You are Wicked bro
They don't even teach this in University. 9 hours man. Holy crap. Why would anyone go to Uni and pay for their ancient technology when this type of stuff is on the Tube.
Can I use any theme?
Quick newbie question. does creating WP themes from scratch or Custom WP theme from scratch have a better website speed than WP builders like DIVI, Elementor etc?
Looking forward to start the tutorial, just to ask do you use Gulp here? Just to know what to expect since I had much trouble with setting it up before. Also, 2 minutes in and I see you are using custom builder – I thought this tutorial is about creating custom tools, not just how to use already made custom tools.
1 hour into the tutorial and I've just started to try to understand my phobia against php and WordPress. Sending lots of love for this great teacher!
So I try and follow this, and when I save my header file and load the page, it shows the blue color. I checked the theme variables stuff it's all right. I am doing this on a webserver, not on my local machine so im not using gulp, is that important?
I don't have any experience in html and css is this video help me learn all things
Hi, help..I just restarted my pc and the scss is not working, did also the npm gulp watch
9h! cool! but i m lost after 5min lol
Hey, how does your website auto reload on save. The readme for understrap mentions you have to configure browser sync and run gulp watch-bs for it to work, but you just used gulp watch?
Lol i didnt get any further than 8 minutes into the video. Looks like a great tutorial but im having trouble with the npm gulp watch thing. As it gives some error. Which after. 1. Day searching on the internet still couldnt fix the problem 😀
Started on the tutorial, but got stuck with the database error “Error establishing a database connection” any help?
adrian Twarog great tutorial can you provide the html and css tutorial for this theme
hello i liked the video , but can you explain me of where i get the host file in the begining i don't have host file . please help me
You are a god of wordpress. Im one of your worshipper my lord
8 hours… really respect !!!
Thank you
It will be great helpful if you give a complete A to Z theme development and submission for themeforest market palace. You are so great I am practicing your previous tuts on WP theme from scratch. Thanks
This is so so helpful tutorial for a WordPress theme developer. I have been looking for a course like this for a long time. Thank you so much Adrian. I am practicing following your tutorial. Want more advanced video tutorial about WordPress from you Adrian.