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.n...
************************************
My new book, "The Web Developer's Guide to WordPress," is now available.
GET IT NOW, Kindle or Paperback format: www.amazon.com...
************************************
🚀 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
5 окт 2024
