Wordpress + Laravel Mix

Develop a theme with a modern development workflow

Transcript

1. Wordpress + Laravel Mix Develop a theme with a modern development workflow
2. ~$ whoami
3. What is Wordpress? WordPress is a free and open-source content management system (CMS) written in PHP and paired with a MySQL or MariaDB database. Features include a plugin architecture and a template system (called themes). https://github.com/WordPress/WordPress
4. What is Laravel? Laravel is a free and open-source PHP web framework intended for the development of web applications following the model–view–controller (MVC) architectural pattern and based on Symfony. https://github.com/laravel/laravel
5. What is Vue? Vue (pronounced /vjuː/, like view) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be they simple or complex. https://github.com/vuejs/core
6. Some numbers about Wordpress • WordPress is used by 43.2% of all websites on the internet. (W3Techs, 2022) • WordPress is used by 65.2% of all websites using a CMS. (W3Techs, 2022) • WordPress powers 36.28% of the top 1 million websites. (BuiltWith, 2022) • Roughly every two minutes, another top 10 million site starts using WordPress. (W3Techs, 2021) • There are almost 60,000 free plugins in the official WordPress plugin directory. (WordPress, 2022) • There are over 9,000 free themes in the official WordPress theme repository. (WordPress, 2022)
7. Developing on Wordpress is a pain Spaghetti code Old development workflow
8. New web development tools
9. Can we use them with Wordpress? Yes, but configuration is boring
10. But... Laravel Mix can help us!
11. What is Laravel Mix? Laravel Mix provides a clean, fluent API for defining basic webpack build steps for your applications.
12. Let’s code! https://github.com/thebatclaudio/wp-laravel-mix-example-theme
13. What will we do? 1. Create a Twenty Twenty child theme 2. Configure Laravel Mix 3. Create and compile a SASS file (with Laravel Mix) 4. Create a widget with a Vue component (compiled with Laravel Mix)
14. Create a Twenty Twenty child theme A child theme allows you to change small aspects of your site’s appearance yet still preserve your theme’s look and functionality. A parent theme is a complete theme which includes all of the required WordPress template files and assets for the theme to work. Wordpress themes are located in /wp-content/themes/ directory
15. Create a Twenty Twenty child theme The following information is required: - Theme Name: needs to be unique to your theme - Template: the name of the parent theme directory
16. Create a Twenty Twenty child theme The following information is required: - Theme Name: needs to be unique to your theme - Template: the name of the parent theme directory
17. Configure Laravel Mix Init NPM project Install Laravel Mix Install Webpack Live Reload Plugin
18. Create and compile a SASS file (with Laravel Mix) Create webpack.mix.js
19. Create and compile a SASS file (with Laravel Mix) Create /scss/homepage.scss
20. Create and compile a SASS file (with Laravel Mix) Run npx mix and watch your new css file: /css/homepage.css
21. Create and compile a SASS file (with Laravel Mix) Include your new style on the theme
22. Create and compile a SASS file (with Laravel Mix) Compile all SASS files in scss directory
23. Create a widget with a Vue component Create new file /widgets/VueWidget.php
24. Create a widget with a Vue component
25. Create a widget with a Vue component
26. Create a widget with a Vue component
27. Create a widget with a Vue component
28. Create a widget with a Vue component
29. Create a widget with a Vue component Create /src/components/Counter.vue
30. Create a widget with a Vue component Create /src/counter.js
31. Create a widget with a Vue component Install Vue Configure Laravel Mix
32. Create a widget with a Vue component Insert the new component inside the widget
33. Create a widget with a Vue component Insert the new component inside the widget
34. Create a widget with a Vue component Look the widget in action!
35. Conclusion We learned that Laravel Mix isn't just for Laravel projects, but it can be used also for Wordpress (and other CMS or PHP projects). Integrating it on a Wordpress Theme (or plugin) allow us to develop without a frustrating experience, using the modern tools that we are used to work with nowadays. Give a look to Laravel Mix Documentation to see how powerful it is: https://laravel-mix.com/docs/6.0/installation
36. Some refs • Laravel Mix: https://laravel-mix.com/ • Wordpress Theme Development: https://codex.wordpress.org/Theme_Development • Wordpress Child Themes https://developer.wordpress.org/themes/advanced-topics/child-themes/ • Sass: https://sass-lang.com/ • Vue: https://vuejs.org/
37. Thank you! Get in touch! thebatclaud.io github.com/thebatclaudio twitter.com/thebatclaudio linkedin.com/in/claudio-la-barbera