WP React Starter 1.0: WordPress Plugin Development reinvented

WP React Starter 1.0

WP React Starter is a WordPress plugin boilerplate that allows you to create (multiple) WordPress plugins that use React, TypeScript, and object-oriented PHP in a fully customizable Docker development environment, commited in a monorepo. We have released version 1.0 of this amazing tool and would like to give you a deeper insight into the boilerplate in this article.

Why do you need a boilerplate for the development of WordPress plugins?

We have started to develop our first WordPress plugin in 2015. In other words, we installed PHP, a WordPress instance and our favorite IDE – and the journey has begun. But this quick start was a pitfall. Over time, we got caught in several problems caused by a missing structure in our plugin and hundreds of manually steps. This is not only time-consuming, but also costs your customers a lot of fun with the products.

In 2018, we started with the development of a boilerplate, which today is the basis of our products. This basis tries to contain all functions, tools and processing that we need in our daily business. Over the years we have learned a lot about what works and what doesn’t. This knowledge has a high value, and we would be glad to have started with a better base.

If you start your WordPress plugin development with a real boilerplate, you will have a structure, much less work and don’t fall into the same traps that many developments have fallen into before.

WP React Starter: The All-in-One Solution

Our goal with WP React Starter was to create a solution that includes everything you need in most WordPress plugins. In addition, we tried not to follow the “old-school PHP WordPress world”, but to introduce structures, patterns and tools that you may be more familiar with from professional software development projects. In practice this means that we write the frontend in TypeScript with React, maintainable object-oriented (OOP) PHP code in the backend, a Docker environment from development to release, and have a fully integrated CI/CD with GitLab.

Technologies used in WP React Starter

PHP
TypeScript
React
React
React
Docker
Docker
Docker
Gitlab
Gitlab
Gitlab

We categorize all features into five classes:

  • Client-Side Features: WP React Starter properly sets up an entire ecosystem, such as a bundler, state management, multi-language support, style preprocessor, automated tasks, liniting, and documentation generators.
  • Server-Side Features: You write OOP PHP code with namespace support, autoloading, a package manager and cache, preconfigured code preprocessing, debugging capabilities, and automated documentation tools.
  • Testing Features: Write a lot of code today, but it may be garbage tomorrow if it is not tested. With built-in unit testing, integration testing, snapshot testing, and end-to-end testing that uses proven patterns for these common types of testing, you can ensure that your code works even tomorrow properly.
  • Automation Features: Use a proper CI/CD process within the GitLab CI to perform everything you’ve done manually so far, such as liniting, testing, license checking, bundling, release management, and publishing to wordpress.org.
  • Developer Experience Features: Pre-installed debugging tool, automatic scripting via git hooks, commit-linting, semantic versioning, changelog generation will help you write better code with ease.

One (Git) workspace, multiple WordPress plugins

WP React Starter solves one more problem that we had in our daily business. We are currently maintaining four WordPress plugins and more are in our pipeline. This means that we use similar structures, same configurations and sometimes exactly the same code in several plugins. We have to make sure that everything is synchronized and all our plugins use the same software versions. If you haven’t dealt with this kind of problem before, you can’t imagine how much time this problem can take.

The solution to this problem is a concept that has become more and more popular recently, especially with large companies like Google, Facebook or Microsoft: A monorepo. We only create one Git repository for all WordPress plugin projects to have a single point of truth. A well done structure is the key to not end up with a mess, but if you do it right, it will allow you to have superpowers in your daily business as a developer. You can find a short article about the benefits of monorepos in the WP React Starter documentation.

All devowl.io WordPress plugins with different use cases are stored in one monorepo

Real Cookie Banner
Real Cookie Banner
Real Cookie Banner
Real Category Management
Real Category Management
Real Category Management
Real Physical Media
Real Physical Media
Real Physical Media
Real Media Library
Real Media Library
Real Media Library
Real Thumbnail Generator
Real Thumbnail Generator
Real Thumbnail Generator

Supported use cases: Free, paid and freemium plugins

WordPress plugins are not just 300 lines of free code, nor are they just premium/paid plugins. Freemium is on the rise in the WordPress ecosystem.

All three forms of WordPress plugins bring their own challenges. Free WordPress plugins should be distributed via wordpress.org, and you have to work with their SVN system (which almost nobody used anymore 20 years after its invention, despite WordPress). Paid plugins often have to be high quality solutions that have to be well tested software to not yet get bad reviews from customers. And Freemium WordPress plugins not only need both, but also have to meet wordpress.org requirements, protect the developer’s commercial tool and respect the GPL license.

These are a lot of problems you have to face in different use cases of your WordPress plugin development. We try to cover all three types of plugins with WP React Starter and provide you with predefined structures that allow you to focus on what really matters: features and customer support.

Start WordPress plugin development with WP React Starter

We hope that in this rough overview of WP React Starter you have seen that over the past two years we have put a lot of features, experience and time into the development of WP React Starter version 1.0.

Try WP React Start today with our CLI create-wp-react-app and start developing your first WordPress plugin in just 5 minutes. Happy coding!