The Problem
Working within WordPress’ hooks, filters and functions can be a nightmare on a good day. Although there is plenty of documentation, examples are far and few between and there is very little high quality guides on building out custom features.
Everytime I work on a WordPress site or plugin, I find myself wishing I could use Laravel’s approach to building sites.
The Solution
Enter BYOL (pronounced Boyle, yes like Charles Boyle from Brooklyn 99). The idea behind this approach is to follow some of Laravel’s ideas and processes to make building WordPress plugins easier and more enjoyable. The majority of the plugin backs onto WordPress’ pre-exisiting RESTful API. I built a customer router that allows you to define routes in a similar way to Laravel. Then brought in the Elqouent ORM to make working with databases a dream compared to the wpdb class from WordPress. Phinx from CakePHP has been brought into to provide database migrations. As well as a Dependency Injection container. Then finally, any custom UI is powered by ReactJS.
The Result
Features can be quickly built out in either the admin panel or for the frontend. The plugin is built in a way that allows you to easily extend it and add your own features, without having to worry about the boilerplate code. Being able to drop a React SPA into either the admin panel or the frontend is a huge win, as it allows you to build out complex UIs without having to worry about the WordPress way of doing things.
It can get tricky to work drop in a React SPA. WordPress’ default admin styles can override your SPA and the same goes for a theme on the frontend. Plus you have to use hash routing to get around the fact that WordPress doesn’t have a catch all route. These inconveniences are worth it for the improvement to the developer experience.
The Tech
- WordPress RESTful API
- Vite
- ReactJS
- TailwindCSS
- Mantine
- React Icons
- Eloquent ORM (from Laravel)
- Phinx (from CakePHP)