Learn how to supercharge WordPress with @wordpress/scripts
Vložit
- čas přidán 27. 12. 2023
- Get ready for an incredible journey of enhancement for your WordPress theme! In this video, I'll guide you through the powerful @wordpress/scripts package, unveiling its secrets and demonstrating, in practice, how to completely integrate it with an existing theme.
I'll also be sharing practical examples involving the integration of two essential tools: BrowserSync and Tailwind CSS.
In this tutorial, we demystify the process for aspiring designers who want to build a classic theme from scratch.
Feeling overwhelmed by pre-made themes? Fear not! We guide you through the essential files and step-by-step process. Let's turn your theme creation dreams into reality!
************************************
SUPER DISCOUNT in all my courses at Udemy!
Get them NOW: www.codigowp.net/wordpress-co...
************************************
My new book, "The Web Developer's Guide to WordPress," is now available.
GET IT NOW, Kindle or Paperback format: www.amazon.com/dp/B088H2LDSJ
************************************
🚀 Some pieces of code used in this video:
1) package.json
"scripts": {
"start": "npm-run-all --parallel sync wpstart tailwindwatch",
"wpstart": "wp-scripts start",
"build": "npm-run-all --parallel wpbuild tailwindbuild",
"wpbuild": "wp-scripts build",
"sync": "browser-sync start -p 'test-site.local' --files '**/*.php' 'build/*.js' 'build/*.css'",
"tailwindwatch": "tailwindcss -i ./src/index.css -o ./build/index.css --watch --minify",
"tailwindbuild": "tailwindcss -i ./src/index.css -o ./build/index.css --minify"
}
2) tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./**/*.php", "./src/**/*.js"],
plugins: []
}
Don't forget to like, share with other WordPress enthusiasts, and subscribe for more tips, tricks, and tutorials!
#wordpress #wordpresstutorial #themedesign #wordpresstheme #webdevelopment - Věda a technologie
Thanks so much, this is exactly what i was looking for, i want to use tailwind with blocks.
Glad it was helpful, dear James!
Thanks for the tutorial. I was trying to figure out how to get tailwind and @wordpress/scripts working together and was missing that I needed to import index.css into the index.js for it to actually create the index.css file in the build folder
Hi Marcelo! Thank you! 🙏🏻🌷🙏🏿
Thank you for your comment, dear friend :-)
Hi Marcelo! I already knew and used @wordpress/scripts but I tried in vain to activate browser-sync at the same time and in 2 minutes you solved the problem! Eternally grateful! I have a second problem and maybe you would know how to solve it. When I create a wordpress project I first create the project in HTML-CSS-JS using PostCSS to organize my CSS. Unfortunately @wordpress/scripts uses SCSS. Could PostCSS be integrated into the scripts so I don't have to translate all my mixins from PostCSS to SCSS? I hope I have explained myself. In any case this is a wonderful day thanks to you!!!
Oh my God! I really don't know what to say! I'm so happy when I see my content is meaningful to other people! Thanks for sharing your opinion and valuable experience :-)
Well, do you believe if I say I've never used PostCSS before? Can you share your project with me somehow? Maybe I can find a way to test it and help you... My email is marceloquinze@gmail.com
I can't guarantee I'll be able to help you, but I can try.
I learn a lot from your work
Thank you for your comment, dear friend! Very glad to know you like the content :-)
Hi marcelo you doing a great Job keep it up I learn alot from your lessons.
Glad to hear that! Thank you very much for your comments, my dear! :-)
Amazing tutorial ❤
Thank you! 😊
Hey Marcelo! Could you create a detailed tutorial on WordPress speed optimization and Core Web Vitals? I'm eager to learn how to achieve a 90%+ Google PageSpeed score and pass the Core Web Vitals for a WordPress site without solely relying on plugins. I'm not interested in the typical speed optimization methods, such as installing caching or image optimizer plugins. Instead, I'm looking for a manual and comprehensive guide that really helps. Thanks!🙏
Thanks for the suggestion :-) On my list.
@@marceloxv
@@marceloxv Hello Marcelo! Is there any update?🥲
Great, how can I purge the unnecessary css?
Sorry, I didn't quite get your question. What exactly you want to do with your CSS?
@@marceloxv I mean to remove unncessary CSS like I use bootstrap so all CSS classes I don't use for each page, you can search more about puregCSS module.