How to Build a WordPress Theme from Scratch with WooCommerce (2019)
ฝัง
- เผยแพร่เมื่อ 5 มิ.ย. 2019
- In this rather long tutorial, I'm going to show you how to create a WordPress theme from scratch, and then incorporate WooCommerce into it. You can then go for your life and customise it with CSS how you want.
Specifically, I will be talking about:
- Using Webpack (from Laravel) for CSS and JS (With SASS)
- Creating a new WordPress theme from scratch
- Using Menus, Widgets and Post Thumbnails
- Different WordPress page templates
- Installing and Configuring WooCommerce and then making it work in the simple theme we developed.
I am using Webpack to combine my SASS and JS, but you do not have to use it if you do not want to. You can simply enqueue your CSS and JS directly in functions.php.
Two hours is not enough to explain everything about developing a WordPress theme with WooCommerce, but it gives you a good idea of how to start and the absolute basics.
WooCommerce is an excellent E-Commerce solution for small to medium sized websites that need a way to sell products easily. WooCommerce in WordPress allows this.
Let me know what you think and if you have any questions and I can help you learn more! Cheers. - แนวปฏิบัติและการใช้ชีวิต
![ภาพนี้ก็ฮาเหมือนกันนะเนี้ย #2 SS8 [ พากย์นรก MEME.EXE ] | easy boy](http://i.ytimg.com/vi/RMhUgxxD49Q/mqdefault.jpg)
Love it, thanks for the tuts! For anyone wondering, Laravel updated their package.json, which doesn't include SASS so here is what worked for me:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.8",
"sass-loader": "^11.0.1"
}
}
Thank you!
thank youu
The unsung hero.
coming from some one who watches lot of these videos , u r one of the best , right up there the way u explain everything precise but very efficient , u r rock star , thanks a lot .
This is how tutorials should be.
1:54:11 the funniest thing here is that u write border : 0 ; at the bottom and u was asking why the the border is not showing hehehe , Thanks mate for your efforts
Great tutorial. There is unfortunately not very much information at all about custom theming with WooCommerce on TH-cam, thankfully this video came to the rescue. Very much appreciated!!
Thank you no problem you are welcome
I've been looking for the tutorial like this for months, thanks for the great lesson.
You're welcome Usama!
This is an excellent tutorial.
I would REALLY love a part 2 on how to go deeper into WooCommerce and add more functionality.
Hey thank you! Yes I am looking into doing this please subscribe and you will be notified once it becomes available :) Cheers
@@mrdigitalau Can't wait for that! Thanks so much Mr Digital!
@@mrdigitalau Would love to watch part 2
Me too really !
part 2 master!!! thanks for the class!!
Great Tutorial! Very clear and specific. Thanks a lot.
39:31 "I will show you the power, my young padawan!" :D You are a great teacher. The first video that makes it all clear. Thank you!
Thanks Alex :) Appreciate it man
This is a best WooCommerce tutorial I've ever seen, thank you sir!
Thanks Evgeny, much appreciated!
Que tutorial mas completo! una joya de verdad ;) Thanks a lot for this, gonna help me to start building eCommerce from scratch.
I enjoy your tutorials. They are full explained and consistent!
Glad you like them! Take care Roman
Thank you very much sir. This is an amazing tutorial. I have been looking for things forever. This marks a new beginning in my web designing.. Thanks again.
And done i have build an client theme watching this tutorial Thank you so much dear.
very helpful video to any one who wants to learn wordpress development
I've had the pleasure or rather displeasure of working with woocommerce, and there's a hell of a lot of junk to wade through to stylize it. Still better than magento though! Great tutorial though, I personally would have left out the basic home / about pages etc as you've covered that in the other videos. I thought about writing my own small custom e-commerce plugin, but then there's the backend to completely style. That being said this is one of the best 'english' woocommerce tuts on youtube so far.
Fantastic, great tutorial. Very simple and understanding. I appreciate your efforts. Thanks!!!
Thanks for creating this tutorial!! This is exactly what I was looking for. It's really comprehensive and I've learnt so much from it. :)
Thank you very much :)
You are the king of WP IMHO
Thank you very much! all tutorials are all I really needed. excellent specific .. really great!! appreciate you all!!
The guide that I really need right now, thanks!
You're welcome :) Good luck
Excellent Tutorial. Waiting for part 2
Love this tutorial
Thank you Sir!!!!! :) Really helpful. Must watch tutorial! The best so far :)
I agree with previous comments, this is an amazing tutorial.
Thanks Dragan appreciate it mate!
Excellent Work Mr. Digital!! Cheers
Good way to start! THANKS =)
Just another way to tweak the columns issue (for instantce, in 1:52:00, and in 1:56:00) is to overwrite the styles in your custom SASS file, such as:
.woocommerce-columns,
.u-columns,
.col2-set
{
@extend .row;
}
.col-1,
.col-2{
@extend .col-lg-6;
}
This way you don't need to mess with the woocommerce files
very helpful video...excellent for basic theme from scratch.
What a great tutorial. Many thanks!
Excellent tutorial, absolutely great. If you are new to WP or not. Useful no matter your level
Thanks Jorge!
Alot of things make sense to me now. I thought alot of it was coded by some genius (maybe in the beginning), but now I see that it is mostly imports and npm. I would have never known. I should have come here when you first uploaded.
Thanks.. . explained simply. Expecting more tutorials on different topics
Sure 👍 More to come soon mate!
amazing tutorial, would love more custom woocomerce theme tutorials if you get a chance to make them
Congrats man - this is excellent!
Senior Developer looks like this ;)
Love your tuts.
what a gem of channel. awesome stuff :)
What shall i say, all i have to say is just thank you for this video you are just awesome in fact you are a philanthropist.
Haha, thanks very much. Glad you enjoyed.
Thanks 3000 times sir for this effort which makes my big problem resolve
For your hosts on mac you can simply open your terminal and type sudo nano /etc/hosts then voila enter in your new host and save and exit (shortcuts will be displayed at the bottom of the terminal for you, the exit shortcut is to save too)
Bro, AWESOME! . Keep up with new videos! really helpful, Thanks a lot.
Thank you ! It's really helpful when we start working with WordPress ;)
This is a wonderful tutorial. Only needed some basic info about theme building for woocommerce, but the whole tutorial is great.
Thanks mate. Appreciate it
very great tutorial u have made I not only understood the woo-commerce but I also got how to use web pack very very interesting
i'm from Brazil, excellent tutorial yours
Solid Tutorial. Thank you
thank you. Great tut.
LEGEND FOR real man good job
Awesome video! Really helped me understand how WordPress works
Thanks man you help me so much I wish you the best of luck and every success in business.
Lovely sir, thank you very very much for this outstanding tutorial !!!!
You are very welcome!
great tutorial!many thanks.
subscribed - waiting for another great video woocommerce.
Mr. Digital, make some long more advanced WordPress tutorial on Udemy. We will buy it. You are the best instructor on WordPress I have seen.
This is phenomenal! Thank you so much!
You're so welcome!
It's Brilliant, thank you SO much!
So useful, thanks
Hello from Siberia. Thank you so much
Hi,
Thank you for your great tutorials
this helps a lot, thanks
Great man, thank you so much, very helpful
Really enjoyed this video.
Amazing tutorial.. Thank you very much.
Thank you very much very usefully and clear
this is a nice tutorial, please, please, we need part 2, but more deeper into woocommerce
Amazing tutorial, luoooouved it. Really helped me :)))))
Guess i watched 5 minuets of this and you got yourself a new subscriber ;) thanks, for this great tutorial and specially for the timestamp.
Thanks Poya appreciate it! Cheers
You explain everyting in nice and easy way. Great content. Could you create more videos for example: how to create custom plugin in php for woo or how to make some changes in existing plugins? Or something about backend in php usefull for woo or about API and how to connect it. Thank you!
Great tutorial I'm following you step by step and pausing to enter the codes because I'm determined to build a online store without paying a website designer.
very useful thank you !!!!
Really good work sir!
Very good tutorial, tks!
This is top quality content
Thanks Matias!
Great video!
amazing tutorial keep it up man!
I posted a comment earlier where I voiced some critique about you using SCSS and NodeJS(npm) and such. While my opinion still stands I just wanted to say that this tutorial has been really valuable for me and that I appreciate you taking the time to make this video!
Hey mate. Thank you. I know its a bit of a shit tutorial, focusing on stuff that's probably not needed. I'm going to re-do a WooCommerce tutorial that is more focused on hooks and actually getting it working on a blank theme already created. All the best mate
@@mrdigitalau Can't wait for it to drop. In the meantime I'm still busy following the WordPress Theme Development From Scratch series which is actually very good and probably the best out there. Once again thanks for putting in the time/work to educate the dev community!
@@mrdigitalau did this get made? 2024 now and struggling to find any tutorial on coding a woocommerce theme from scratch!
good thank you . great tutorial.
Excellent, learned a lot, thanks !
You are welcome!
Thanks for this tutorial, it is very great and it'll help me with e-commerce in wordpress. I like so much your tutorial.
No worries Danillo - you're welcome mate!
Thank you it's very useful
Best video on youtube, please make some more
Very good tutorial
thank you so much for these videos. you helped me a lot!
You're very welcome :)
You are the best you helped me a lot!
Awesome! thanks.
Thanks. Love from Bangladesh.
How you setup webpack? I can't do it. I'm from Bangladesh.
Really professional. I'm not even trying to make my own Wordpress theme but I'm hooked nonetheless XD
Thanks heaps, much appreciated!
it's great video, thanks so much sir!
Awesome helps a lot for learning thank you so much❤
You're welcome Sir
Thank you for your video
Thanks, you are the best:)
Beast, thank you a lot!
Happy to help!
Lot a Thank you !!!
Thanx. It was really helpful..
Great Video
I've been programming for a decade now, mostly software tho, done a few years of web dev too but not with WordPress, this is why I'm here. It helped me a LOT. You seem extremely experienced. But it kinda bothers me your indentation, 8 spaces indentation? but the worst part is that you're not even consistent, I saw you do 12 and 4 spaces indentation too. This and the closing of the php tag to just open another one in the next line made me cry a little bit. I just think it's much cleaner like this...
instead of this
But maybe you did like that because you were thinking ahead and knew you would put some HTML in between those bad boys(which I don't really know if you did, because I skipped the stuff I already knew).
Regardless, great video, appreciate it.
AWESOME!!! Thanks
You're welcome Hadi!
THANK YOU!!!!!!!!!!!!!!!!!!
It's really grate.
This is an outstanding tutorial, covering a lot of necessary details. I have a confusion and request you to please guide me. Please let me know, how to install nodejs and laravel on hosting server? Are we allowed to install such softwares on servers and which tool or tools do we use ? Your answer will be highly appreciated. Thanks
PID(s) are processus ID given by windows to each service and program you start, the same PID you'll see in task manager
Thanks mate. Appreciate it :)
so far so good!! excited to see how far i get. Im at the point where ive pasted the webpack.mix.js
yours is .sass
mine is .postCss
i hope that doesnt matter 😅