Mr Digital, you're an amazing teacher - this tutorial was exactly what I was looking for! It helped me to move away from a skeleton theme and build entirely from scratch.
Mr. Digital to the rescue Thank you I've learned a lot religiously taking notes. I'm currently helping a colleague he uses SaaS for his style. I've heard about but im still writing in css. We are working on wordpress development and he provided the style but of course using sass. Thank you for this course I'm goung to dig down now.
Oh my word! This tutorial is awesome and has saved my life :):):) Thank you, Thank you, Thank you. I've spent about 3 days trying to work this all out by myself and have ended up with a mahoosive headache. Love your clarity on teaching. Truly awesome.
guys for anyone watching, don't be stupid like me and at minute 17 forget to add the 's' at the end of wp_enqueue_scripts in the last line. cause i spent 6 hours troubleshooting and trying to find the problem. Thank you btw Mr. Digital. You're awesome!
Hi! This tutorial is all i was looking around, i have tried to make sass work using other tutorials without success, but this one is just perfect. All steps are very clear and now i can run sass in wordpress using bootstrap just like magic. The only extra step i have to give was installing jquery and popper after installing bootstrap. Thanks man it really helps me a lot. PD: I'm not a bot hahaha....
Thanks you very much ! Aside from the dev experience it also minifies the JS/CSS files without to have to install another plugin. (I was looking for a solution to keep everything as lightweight as possible)
I didn't have any idea about how to make wordpress theme, after watching this i feel confident i can develop theme. thanks for making such good video. Please also make video on how to enable elementor plugin use in our custom theme. Looking forward for that video.
Hi there, if you found error while following mr digital, it is fine because laravel-mix has updated. now instead of go to the page he mentioned in the video, 1. go here github.com/JeffreyWay/laravel-mix/blob/master/docs/installation.md#stand-alone-projects 2. follow the step there, ps(this time we need to create the webpack.mix.js file ourselves) 3. put these codes in the webpack file: ``` let mix = require('laravel-mix'); mix.js('src/app.js', 'dist/').sass('src/style.scss', 'dist/'); // Replace the file path if needed ``` 4. remove the package-lock 5. `npm install` 6. run ` npx mix` at your terminal 7. DONE
However npx mix will require us to run it manually, so here is the way to automate it 1. `npm install nodemon sass-loader sass resolve-url-loader --save-dev` on the same folder 2. add this to the script: ```"scripts": { "watch": "nodemon -e scss -x \"npx mix\"" }, ``` 3. run `npm run watch` 4. DONE
Hi mate again! First of all, got thank u a lot for everything, been away from developing almost 4 year due external reasons and now im re enchanted again and u have a bit of responsibility . Second i think that Wordpress mix it with react is definitely the next step so it’d nice if u can do a website from scratch using wp headless or frontity. and once again thank u a lot. Hope to get a job soon.
Mr. Digital, you just saved me hours of research with this video, thanks!! Quick question, how (where) do you use SASS and JS compiling if you use parent/child theme? Do you even recommend using child theme if creating custom websites? Or what is your input on this matter?
Thank you, you have helped me understand laravel-mix installation better. I can't tell you how annoying it is to find a tutorial, follow it and then get errors because I will use the latest version that is no longer compatible with the tutorial I'm following. However your guide made me understand how things work, which made me aware of what may be causing the errors I'm getting and fix it. What do you think of tailwindcss?
It looks like things just got more complex. Though it does look like I need this. Only making 1 site for myself at the moment, but it might still be useful.
First of all, your teaching methodology is awesome. Now the question: I added bootstrap through npm and now it has a dependency of jquery but WP has jquery already in it. What should be done in this case?
Thanks Assad, appreciate it. Apologies for the late reply. You might need to put jQuery as dependency when enqueuing your app.js into the site. You can't not have jQuery in WordPress as then some plugins may not be able to work if they need jQuery. Hope that makes sense?
Any particular reason for not using an extension inside MVSC like Live Sass Compiler? Also, given the scope of the project used as example, what are the benefits here of using bootstrap+sass instead of only Sass?
Great very informative video. Quick question - does this method change how the file structure works in wordpress? I tried to use it with a site I'd made following the previous tutorials but my 'includes' don't seem to work anymore. Probably a mistake on my part but thought I'd ask...
Hey Mrs Gale. No this doesn't change the file structure - it should work nevertheless. Send some examples if you are having issues I may be able to assist. Cheers!
hi, very very good! thanks a lot for this good learning. i have a question: you'r included bootstrap sass styles in the project and then not need to include bootstrap's javascript in the project like The third video? With respect
Can Laravel Mix w/ BrowserSync watch for PHP files? I cannot for the life of me get that to work when I'm working on a WP theme. Only CSS and JS seem to trigger browserSync.
Hi, how do I compile those files with Laravel-mix once my files are stored on FTP server? For example, I've already hosted my WP site on some FTP, but I need to add some change in it. How do I work with that? Is there any option to automatize these tasks, instead of manually coping the files from ftp and putting them on my local server to compile, and then put them on the FTP again?
im running into problem with js not working, it seems it's not compiling the js bootstrap dependencies into the finished app.js so none of my bootstrap js is working. i know i can enqueue the cdn's but it seems there might be a better way to selectively import the js modules i need but then i cant find the popper module. seems like this is only a half solution to get started because it doesn't detail the best way of getting js setup with laravel mix. :/
when i come back to my theme making session, the scss isn't connected. the dist and app folder are talking to eachother just fine but the page isn't updating any css. do i have to reload any pluggins?
I am a bit confused what you mean .. the CSS is just not changing? Are you using SASS in your theme or are you using normal CSS like the beginning of the tutorial?: If you are maybe it's your browser cache try clear it and see if it appears?
Thank you for your lessons, they are great. How to set the TITLE and DESCRIPTION metatags in Wordpress? I can't see that option. Ideally if it can be eventually customised from the end-user front-end level. Thank you
Hey Piotr, metatags are probably best for something called YOAST SEO plugin it is a free plugin. I am not sure what you mean by editing them on front end level though, why would you want to do that?
@@mrdigitalau I'm doing the site for my friend. He has no idea about coding. I want to let him fill the content. meta info is important for SEO purposes. If there will be no option to change the title, I need to set the fixed title for all pages, which is not a good idea in terms of SEO. Thank you for the tip and all your work.
Hi Mr. Digital, thanks for this tutorial series, I'm currently converting a website developed with Bootstrap 4 with sass variables, I followed the step by step of this tutorial but the css is not working, I looked at the source code output but neither the css or the js are showing. Tried reinstalling laravel mix, tried reinstalling nodejs and nothing seems to work. Any help will be appreciated.
im getting an error on terminal found 1 low severity vulnerability run `npm audit fix` to fix them, or `npm audit` for details after running npm install bootstrap
Hey Janci. Yeah, well PSD to WordPress is basically - PSD to HTML/CSS/JS and then convert that to work in WordPress. I have a video on converting a static HTML theme to WordPress - would that help you? Assuming you know how to convert PSD to HTML?
@@mrdigitalau Hi. Thanks for answer I've seen that video, but i would love to know how to to that without ACF. Is the ACF standard procedure in this ? Or its betetter to do that without it?
@@jancifoxhound6380 Hi Janci - ACF makes it very simple for you and allows you to save a lot of time to build it. I was like you, I wanted to build it from absolute scratch - that is the goal - but what I've realised over the years is that time is extremely precious and unfortunately WordPress does not make it easy to custom code custom fields - especially when it comes to repeaters, flexible content fields etc - that would be an absolute nightmare. There is really no reason to re-invent the wheel and if you are some day wanting to build websites as a business, you could use ACF to do what you need in minutes as opposed to spending tens of hours trying to make a custom field that suits your client. It is really a shame WordPress has no "ACF-Like" interface naturally inbuilt - but ACF is in my opinion the most important plugin that any WordPress developer should use to save time AND money.
I must mention - by saying not to reinvent the wheel I am not suggesting to use 1000 plugins for everything on your website, however, there are 2 or 3 core time saving plugins that any wordpress developer should really use, it's just common sense - ACF is most definitely one of them - and yes the Pro version does cost money, however it is literally one of the most important parts of a WordPress theme (custom fields).
Extend your development with browser live reload on save, also on php files editing. The moment you press ctrl + s, the browser reloads automatically. It's so frustrating hitting f5 / reload each time you modify files. Gulp + browsersync can do that easily. I can help you This is gulp.js gist.github.com/bogdanbatsenko/2d905125446c1896aaa6094283a9bfd5 Note: you should modify pathes, folders, proxy server according to your project, which could be tricky This is package.json gist.github.com/bogdanbatsenko/2f65bf5c3ff3d955f51a5ad814e42850
After installing laravel mix via terminal and running the command cp node_modules/laravel-mix/setup/webpack.mix.js ./ I'm getting this error. cp : Cannot find path 'C:\laragon\www\sass\wp-content\themes
ode_modules\laravel-mix\setup\webpack.mix.js' because it does not exist. At line:1 char:1 + cp node_modules/laravel-mix/setup/webpack.mix.js ./ + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : ObjectNotFound: (C:\laragon\www \...\webpack.mix.js:String) [Copy-Item], ItemNotFoundExce ption + FullyQualifiedErrorId : PathNotFound,Microsoft.PowerShe ll.Commands.CopyItemCommand Also in the Lavel Mix website documentation, I have found the following: Stand-Alone Projects Step 1. Install Mix Begin by installing Laravel Mix through NPM or Yarn. mkdir my-app && cd my-app npm init -y npm install laravel-mix --save-dev There is no cp node_modules/laravel-mix/setup/webpack.mix.js ./ in the documentation for the Stand alone project. I couldn't reach to webpack.mix.js in my codes. Instead I could find this touch webpack.mix.js I tried to put touch webpack.mix.js instead of the previous code. I am also getting error: PS C:\laragon\www\sass\wp-content\themes> touch webpack.mix.js touch : The term 'touch' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + touch webpack.mix.js + ~~~~~ + CategoryInfo : ObjectNotFound: (touch:String) [], CommandNotFoun dException + FullyQualifiedErrorId : CommandNotFoundException How to continue? Please advise
I like the fast and quick approach. Not wasting valuable time talking instead you went diving in straight into work itself.
Mr Digital, you're an amazing teacher - this tutorial was exactly what I was looking for! It helped me to move away from a skeleton theme and build entirely from scratch.
Mr. Digital to the rescue
Thank you I've learned a lot religiously taking notes.
I'm currently helping a colleague he uses SaaS for his style. I've heard about but im still writing in css. We are working on wordpress development and he provided the style but of course using sass.
Thank you for this course I'm goung to dig down now.
Mr Digital you are an amazing teacher. I very much appreciate your effort. Your tutorials are simply the best on the internet.
Oh my word! This tutorial is awesome and has saved my life :):):) Thank you, Thank you, Thank you. I've spent about 3 days trying to work this all out by myself and have ended up with a mahoosive headache. Love your clarity on teaching. Truly awesome.
Thank you Mr Digital. Always a life savior! Hope, more tutorials will be release.
This tutorial is World Class! Thank you very much! I have rarely seen tutorials on the internet that are that good!
guys for anyone watching, don't be stupid like me and at minute 17 forget to add the 's' at the end of wp_enqueue_scripts in the last line. cause i spent 6 hours troubleshooting and trying to find the problem. Thank you btw Mr. Digital. You're awesome!
WOW this looks so great!!!! Be soooo great to not have to be stressing about a webpack.config file!!! AWESOME thank you!!!
Hi! This tutorial is all i was looking around, i have tried to make sass work using other tutorials without success, but this one is just perfect. All steps are very clear and now i can run sass in wordpress using bootstrap just like magic. The only extra step i have to give was installing jquery and popper after installing bootstrap.
Thanks man it really helps me a lot.
PD: I'm not a bot hahaha....
Thanks you very much ! Aside from the dev experience it also minifies the JS/CSS files without to have to install another plugin. (I was looking for a solution to keep everything as lightweight as possible)
Now, NPM scripts don't include in laravel mix documentation.Can you give me this code?Plese
I didn't have any idea about how to make wordpress theme, after watching this i feel confident i can develop theme. thanks for making such good video. Please also make video on how to enable elementor plugin use in our custom theme. Looking forward for that video.
Good on you Vaibhav. Glad you learnt something from me. I will do something soon on Elementor not a problem mate!
@@mrdigitalau Thanks for responding. 😊 I'll be waiting for that tutorial.
Hi there, if you found error while following mr digital, it is fine because laravel-mix has updated.
now instead of go to the page he mentioned in the video,
1. go here github.com/JeffreyWay/laravel-mix/blob/master/docs/installation.md#stand-alone-projects
2. follow the step there, ps(this time we need to create the webpack.mix.js file ourselves)
3. put these codes in the webpack file:
```
let mix = require('laravel-mix');
mix.js('src/app.js', 'dist/').sass('src/style.scss', 'dist/'); // Replace the file path if needed
```
4. remove the package-lock
5. `npm install`
6. run ` npx mix` at your terminal
7. DONE
However npx mix will require us to run it manually, so here is the way to automate it
1. `npm install nodemon sass-loader sass resolve-url-loader --save-dev` on the same folder
2. add this to the script:
```"scripts": {
"watch": "nodemon -e scss -x \"npx mix\""
},
```
3. run `npm run watch`
4. DONE
@@gen81828 Very helpful
Beautiful. Thank you for this video, and please keep on going. I love your tutorials:). Big Love!
You're welcome mate :)
Been looking for something like this forever. You are a great teacher. Thanks so much
An extremely useful tutorial, thanks so much for putting this together.
Nice tutorial! New subs here. Please do more.
Hi.Thank you for your great tutorial!
You are welcome Elham take care
Hi mate again! First of all, got thank u a lot for everything, been away from developing almost 4 year due external reasons and now im re enchanted again and u have a bit of responsibility .
Second i think that Wordpress mix it with react is definitely the next step so it’d nice if u can do a website from scratch using wp headless or frontity.
and once again thank u a lot. Hope to get a job soon.
Mr. Digital, you just saved me hours of research with this video, thanks!! Quick question, how (where) do you use SASS and JS compiling if you use parent/child theme? Do you even recommend using child theme if creating custom websites? Or what is your input on this matter?
Thank you, you have helped me understand laravel-mix installation better. I can't tell you how annoying it is to find a tutorial, follow it and then get errors because I will use the latest version that is no longer compatible with the tutorial I'm following. However your guide made me understand how things work, which made me aware of what may be causing the errors I'm getting and fix it. What do you think of tailwindcss?
Thank you Mr Digital!
@Mr Digital You added it!! Awesome. Thanks
It looks like things just got more complex. Though it does look like I need this.
Only making 1 site for myself at the moment, but it might still be useful.
I think there is an extension in vs code to work with sass.
First of all, your teaching methodology is awesome.
Now the question:
I added bootstrap through npm and now it has a dependency of jquery but WP has jquery already in it. What should be done in this case?
Thanks Assad, appreciate it. Apologies for the late reply. You might need to put jQuery as dependency when enqueuing your app.js into the site. You can't not have jQuery in WordPress as then some plugins may not be able to work if they need jQuery. Hope that makes sense?
Any particular reason for not using an extension inside MVSC like Live Sass Compiler? Also, given the scope of the project used as example, what are the benefits here of using bootstrap+sass instead of only Sass?
Awesome. Great tutorial buddy. Can you guide in making a theme for themeforest? Any recommendations will be helpful.
Thanks in advance.
Very good tutorial. Thank you.
Hi, I love your tutorials!! First of all, thank you!! Can you make a tutorial how to build a custom mega menu?
Hey Carlo. Thanks a lot. Mega Menu is a royal pain in the ass but I will see how to simplify and maybe do a video soon with it :) Cheers
@@mrdigitalau Royal pain in the ass LOL
Thanks for the video. How can you add hot reloading and tailwind?
Great very informative video. Quick question - does this method change how the file structure works in wordpress? I tried to use it with a site I'd made following the previous tutorials but my 'includes' don't seem to work anymore. Probably a mistake on my part but thought I'd ask...
Hey Mrs Gale. No this doesn't change the file structure - it should work nevertheless. Send some examples if you are having issues I may be able to assist. Cheers!
Very helpful thank you
thank you so much for the tutorial.
mr digital I follow all your steps but my terminal says its deprecated and too many errors. why is it ?
what are the possible errors.
hi,
very very good!
thanks a lot for this good learning.
i have a question: you'r included bootstrap sass styles in the project and then not need to include bootstrap's javascript in the project like The third video?
With respect
Can Laravel Mix w/ BrowserSync watch for PHP files? I cannot for the life of me get that to work when I'm working on a WP theme. Only CSS and JS seem to trigger browserSync.
very useful thank you very much
Hi, how do I compile those files with Laravel-mix once my files are stored on FTP server?
For example, I've already hosted my WP site on some FTP, but I need to add some change in it.
How do I work with that? Is there any option to automatize these tasks, instead of manually coping the files from ftp and putting them on my local server to compile, and then put them on the FTP again?
is this a good idea when developing wordpress themes for small businesses? I mean if someone else needed to read the code and edit things..
im running into problem with js not working, it seems it's not compiling the js bootstrap dependencies into the finished app.js so none of my bootstrap js is working. i know i can enqueue the cdn's but it seems there might be a better way to selectively import the js modules i need but then i cant find the popper module. seems like this is only a half solution to get started because it doesn't detail the best way of getting js setup with laravel mix. :/
Thanks a lot! Could you please explain that how can we use different java schript codes for different pages?
Thank you digital👍
Super!
Subscribed! You are very clever. :D
when i come back to my theme making session, the scss isn't connected. the dist and app folder are talking to eachother just fine but the page isn't updating any css. do i have to reload any pluggins?
same problem here
I am a bit confused what you mean .. the CSS is just not changing? Are you using SASS in your theme or are you using normal CSS like the beginning of the tutorial?: If you are maybe it's your browser cache try clear it and see if it appears?
@@mrdigitalau Seems I missed the 'hold ctrl + click refresh". seems to be the trick.
I solved it by making sure versions for scss and js were different - i had both versions as 1 as in the tut. changing js to 2 did the trick.
Does anyone else have problem with the cp node_modules/laravel......?
I keep getting an cp: Cannot fund parh.....
Thank you for your lessons, they are great. How to set the TITLE and DESCRIPTION metatags in Wordpress? I can't see that option. Ideally if it can be eventually customised from the end-user front-end level. Thank you
Hey Piotr, metatags are probably best for something called YOAST SEO plugin it is a free plugin. I am not sure what you mean by editing them on front end level though, why would you want to do that?
@@mrdigitalau I'm doing the site for my friend. He has no idea about coding. I want to let him fill the content. meta info is important for SEO purposes. If there will be no option to change the title, I need to set the fixed title for all pages, which is not a good idea in terms of SEO. Thank you for the tip and all your work.
Hi Mr. Digital, thanks for this tutorial series, I'm currently converting a website developed with Bootstrap 4 with sass variables, I followed the step by step of this tutorial but the css is not working, I looked at the source code output but neither the css or the js are showing. Tried reinstalling laravel mix, tried reinstalling nodejs and nothing seems to work. Any help will be appreciated.
Thanks Brother
Hi . How to add auto prefixer for css ?
im getting an error on terminal found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
after running npm install bootstrap
Pretty standard. Don't worry - it's not an error, I get them all the time.
Can u make PSD to WP without custom fields please?
Cant find video like that anywhere
Thanks for good content
Hey Janci. Yeah, well PSD to WordPress is basically - PSD to HTML/CSS/JS and then convert that to work in WordPress. I have a video on converting a static HTML theme to WordPress - would that help you? Assuming you know how to convert PSD to HTML?
@@mrdigitalau Hi. Thanks for answer I've seen that video, but i would love to know how to to that without ACF.
Is the ACF standard procedure in this ? Or its betetter to do that without it?
@@jancifoxhound6380 Hi Janci - ACF makes it very simple for you and allows you to save a lot of time to build it. I was like you, I wanted to build it from absolute scratch - that is the goal - but what I've realised over the years is that time is extremely precious and unfortunately WordPress does not make it easy to custom code custom fields - especially when it comes to repeaters, flexible content fields etc - that would be an absolute nightmare. There is really no reason to re-invent the wheel and if you are some day wanting to build websites as a business, you could use ACF to do what you need in minutes as opposed to spending tens of hours trying to make a custom field that suits your client. It is really a shame WordPress has no "ACF-Like" interface naturally inbuilt - but ACF is in my opinion the most important plugin that any WordPress developer should use to save time AND money.
I must mention - by saying not to reinvent the wheel I am not suggesting to use 1000 plugins for everything on your website, however, there are 2 or 3 core time saving plugins that any wordpress developer should really use, it's just common sense - ACF is most definitely one of them - and yes the Pro version does cost money, however it is literally one of the most important parts of a WordPress theme (custom fields).
@@mrdigitalau KINDY PROVIDE SOURCE CODE PLZZ I HAVE FACE SOME ERROR
Awesome, could you please teach how to deploy the site in a server, like hostgator, with data bases? Would be very helpful
Hey Daniel. yes I will no problem. Stay tuned :)
@@mrdigitalau Tks I will :)
@@mrdigitalau KINDLY PROVIDE SOURCE CODE PLZZZ
If u can do a long video with psd to html to wordpress
why are you working in a virtual environment?
THERE IS ALSO A SASS PLUGIN FOR VISUAL STUDIO. so why complicate things? huh...
Where did you go ? Why good chanels has to die like this every where I go 😔
Still here mate, I'm going to be doing many more videos in coming weeks! Sorry for the silence!
@@mrdigitalau I hope everything is right for you. Be safe I love your chanel
This is too much work. Just install live sass compiler extension into vscode and specify the path in setting.json you are ready to use sass.
KINDY PROVIDE SOURCE CODE PLZZ I HAVE FACE SOME ERROR
KINDLY PROVIDE SOURCE CODE
Extend your development with browser live reload on save, also on php files editing. The moment you press ctrl + s, the browser reloads automatically. It's so frustrating hitting f5 / reload each time you modify files. Gulp + browsersync can do that easily.
I can help you
This is gulp.js
gist.github.com/bogdanbatsenko/2d905125446c1896aaa6094283a9bfd5
Note: you should modify pathes, folders, proxy server according to your project, which could be tricky
This is package.json
gist.github.com/bogdanbatsenko/2f65bf5c3ff3d955f51a5ad814e42850
Thanks man. Appreciate it.
Or just use BrowserSync which comes already comes with mix :)
The development of Koala is stopped
Such a noisy keyboard
After installing laravel mix via terminal and running the command cp node_modules/laravel-mix/setup/webpack.mix.js ./ I'm getting this error.
cp : Cannot find path 'C:\laragon\www\sass\wp-content\themes
ode_modules\laravel-mix\setup\webpack.mix.js' because it does
not exist.
At line:1 char:1
+ cp node_modules/laravel-mix/setup/webpack.mix.js ./
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : ObjectNotFound: (C:\laragon\www
\...\webpack.mix.js:String) [Copy-Item], ItemNotFoundExce
ption
+ FullyQualifiedErrorId : PathNotFound,Microsoft.PowerShe
ll.Commands.CopyItemCommand
Also in the Lavel Mix website documentation, I have found the following:
Stand-Alone Projects
Step 1. Install Mix
Begin by installing Laravel Mix through NPM or Yarn.
mkdir my-app && cd my-app
npm init -y
npm install laravel-mix --save-dev
There is no cp node_modules/laravel-mix/setup/webpack.mix.js ./ in the documentation for the Stand alone project.
I couldn't reach to webpack.mix.js in my codes.
Instead I could find this touch webpack.mix.js
I tried to put touch webpack.mix.js instead of the previous code. I am also getting error:
PS C:\laragon\www\sass\wp-content\themes> touch webpack.mix.js
touch : The term 'touch' is not recognized as the name of a cmdlet, function,
script file, or operable program. Check the spelling of the name, or if a path
was included, verify that the path is correct and try again.
At line:1 char:1
+ touch webpack.mix.js
+ ~~~~~
+ CategoryInfo : ObjectNotFound: (touch:String) [], CommandNotFoun
dException
+ FullyQualifiedErrorId : CommandNotFoundException
How to continue? Please advise
how do we get hot reloading with this?
i figured it out, add to mix.webpack.js
mix.browserSync({
proxy: "wpbabelsassjs.local/",
files: ["./**/*"],
});