WP React Starter

WP React Starter

Use Cases of WP React Starter

WP React Starter enables you to create free, paid and freemium WordPress plugins as well as reusable JavaScript and PHP packages. Learn what this means for your development and business cases based on devowl.io WordPress plugins.

Screenshot for WP React Starter instance in Visual Studio Code
Drag and drop a page for a custom post order

Free WordPress Plugin

Real Custom Post Order is a free WordPress plugin, which enables you to create a custom order of post order for posts, pages, WooCommerce products and custom post types in the default WordPress table. It is available at wordpress.org for free. This plugin uses the React frontend of WP React Starter to provide a drag & drop capability of items in the table. The order of the e.g. posts get saved in the database via a REST-API endpoint, which is written in OOP style in the backend of the plugin.

WP React Starter provides in this case not only the core structure of the plugin, but also the publish process on wordpress.org. On merge to the master branch it continuous deployment process get triggered and automatically publish the plugin on wordpress.org.

Paid WordPress Plugin

Real Media Library started as our best-selling paid plugin on codecanyon.net. It is a heavier plugin that allows you to create folders, collections and galleries in the WordPress Media Library.

The plugin must be able to keep a tree of several thousand files from the media library in the frontend. The advantages of reactive programming are the key to delivering the performance the user deserves. Many alternative plugins suffer from poor performance with many files – we do not.

All communication between the frontend and the database are handled by custom REST API endpoints, which are created in OOP style. A maintainable code is important for these plugins because the backend has to be deeply integrated into the WordPress Core media library functionality as well as into all common page builders.

Moreover, WP React Starter provides us with the end-to-end process for creation, testing and publishing that we need to quickly publish features and fixes. Exactly what our customers expect from a paid plugin.

Real Media Library
Real Thumbnail Generator

Freemium WordPress Plugin

In 2019, we wanted to create a free version of our WordPress plugin Real Thumbnail Generator, which was a paid only product until then. This step should enable us to reach new customer segments who want to try out plugins on their WordPress instance first and maybe buy a PRO version later. But simply adding an “if-else” to disable features for customers of the free version is not allowed by wordpress.org or the GPL licence agreement. You must remove PRO features from your code for the free version on wordpress.org.

The flexible structure of WP React Starter helped to make WordPress Real Thumbnail Generator a true freemium product despite these requirements. We added a custom autoloader for the PHP backend and a modified the Webpack configuration for the frontend JavaScript to remove code blocks during build time. The result of these changes is that we have a code base with two build processes: PRO and FREE. Both builds have different code depending on the features you want to include in each version.

Reusable JavaScript and PHP packages

If you are developing multiple WordPress plugins, you may experience the same problems over and over again. In our case we want to use the great Ant Design Library for advanced UI components and at the same time adapt the look and feel of the components to the WordPress (backend) design. We have implemented the necessary steps to achieve this goal – in every plugin again.

WP React Starter comes with packages for JavaScript and PHP. These are nothing more than packages you would consume from NPM or Packagist, but private, directly in your monorepo and with hot reloading. We were able to extract styles and logic to extend Ant Design to a custom package that we can consume use in all our plugins. The next time a WordPress core update changes the styles, we only need to fix it once, instead of in each of our plugins.

Ant Design website screenshot