WP React Plugin Boilerplate - WordPress Setting via React and Rest API

Overview

WP React Plugin Boilerplate is a starter WordPress plugin to develop WordPress Plugin via React and Rest API.

WP React Plugin Boilerplate

WP React Plugin Boilerplate is a starter WordPress plugin to develop WordPress Plugin via React and Rest API. The Plugin Settings was added by React, Gutenberg Components and Rest API

GETTING STARTED

Upload the plugin files to the /wp-content/plugins/wp-react-plugin-boilerplate directory, or install the plugin through the WordPress plugins screen directly.

You need to rename the plugin folder name and files name. Also need to rename constants, variables, classes , text-domain, and functions inside of it to fit your needs. For example, if your plugin is named 'react-settings' then:

  • rename folder from wp-react-plugin-boilerplate to react-settings
  • rename all files from wp-react-plugin-boilerplate to react-settings PHP,JS and CSS
  • change wp_react_plugin_boilerplate to react_settings
  • change wp-react-plugin-boilerplate to react-settings
  • change Wp_React_Plugin_Boilerplate to React_Settings
  • change WP_REACT_PLUGIN_BOILERPLATE to REACT_SETTINGS

It's safe to activate the plugin at this point. Activate the plugin through the 'Plugins' screen in WordPress

Development Process

Don't have Node.js + npm installed? You have to install them first. (CLICK TO EXPAND)

Go to the Node's site download + install Node on your system. This will install both Node.js and npm, i.e., node package manager — the command line interface of Node.js.

You can verify the install by opening your terminal app and typing...

node -v
# Results into 7.19.1 — or installed version.

npm -v
# Results into v14.15.1 — or installed version.

Follow the following steps to add your functionalities to the plugin:

  1. Navigate to plugin files /wp-content/plugins/your-renamed-plugin-folder, open terminal app.
  2. Run the npm install command to install npm dependencies, wait sometimes to complete it.
  3. Run the npm run packages-update command to update the package.
  4. Run npm run start command to initialize development of React JS, Development can be done any time. Use it in the development environment.
  5. Run the npm run build command to finalize the development and be ready for production. The command creates production files. After building the production file move it to the production level.

Go to WordPress Dashboard => React Settings and View the Default Settings of the Plugin.

Folder Information

WP React Plugin Boilerplate Folder Information

INSIDE: /wp-installatioon-folder/wp-content/plugins/your-renamed-plugin-folder

├── .gitignore
├── index.php
├── LICENSE.txt
├── package.json
├── readme.md
├── README.txt
├── uninstall.php
├── your-renamed-plugin.php
|
├── admin
|  |  ├── class-your-renamed-plugin-admin.php
|  |  └── index.php
|  |
|  └── partials
|     └── your-renamed-plugin-admin-display.php
|
├── build
|  ├── index.asset.php
|  ├── index.js
|  └── style-index.css
|
├── includes
|  ├── class-your-renamed-plugin.php
|  ├── class-your-renamed-plugin-activator.php
|  ├── class-your-renamed-plugin-deactivator.php
|  ├── class-your-renamed-plugin-i18n.php
|  ├── class-your-renamed-plugin-loader.php
|  ├── functions.php
|  └── index.php
|
├── languages
|  └── your-renamed-plugin.pot
|
├── public
|  |  ├── class-your-renamed-plugin-public.php
|  |  └── index.php
|  |
|  └── css
|  |  └── your-renamed-plugin-public.css
|  |
|  └── js
|  |  └── your-renamed-plugin-public.js
|  |
|  └── partials
|     └── your-renamed-plugin-public-display.php
|
└── src
   ├── components
   |  ├── render-tabs
   |  |  ├── advanced.js
   |  |  └── general.js
   |  |
   |  └── tabs.js
   |
   ├── utils
   |  └── components.js
   |
   ├── index.js
   └── style.scss

Changelog

1.0.0

  • Initial Release

License & Attribution

I would like to thanks all the React.js team, Gutenberg Team, WordPress Core Contributors, WordPress Plugin Boilerplate teams and My friends to motivate me to create the starter plugin.

About Me

I just love WordPress more…

Recent Projects

Gutentor - WordPress Page Building Blocks - Page Builder for Gutenberg

You might also like...
Boilerplate between the Magento API and ImportExport, so that you can do fast Array/XMLRPC/SOAP based product imports.

Boilerplate between the Magento API and ImportExport, so that you can do fast Array/XMLRPC/SOAP based product imports.

Kick-start you next Laravel based API with this awesome boilerplate 🚀
Kick-start you next Laravel based API with this awesome boilerplate 🚀

Laravel API boilerplate 🚀 An awesome boilerplate for your next Laravel 9 based API. It's only goal is to simply kick-start your API development and p

Api first backend boilerplate build with laravel 🎯 you can use as a template 😉

Laravel Backend Template i use this as a starting point for my backend projects , it saves time with basic auth functionalities and has code examples

Automatically Create professional ready to use Laravel REST API for MySQL Database With Postman Docs and JWT Authentication

Laravel Simple Rest API Generator An API Boilerplate to create a ready-to-use REST API in seconds with Laravel 8.x Install with Composer $ curl -s

A Laravel 8 and Vue 3 SPA boilerplate using tailwind styling and sanctum for authentication :ghost:
A Laravel 8 and Vue 3 SPA boilerplate using tailwind styling and sanctum for authentication :ghost:

Laravel Vue Sanctum SPA Laravel and vue spa using tailwind (laravel/ui looks) for styling and sanctum for authentification Features Laravel 8 Vue + Vu

Laravel and AngularJS Starter Application Boilerplate featuring Laravel 5.3 and AngularJS 1.5.8

💁 Zemke/starter-laravel-angular has been upgraded to AngularJS 1.5.8. 💁 Zemke/starter-laravel-angular has been upgraded to Laravel 5.3. You can pull

Laravel 8 boilerplate in docker-compose with Treafik and SSL setup and github workflow ready for CI/CD pipeline

Laravel8 boilerplate Laravel 8 boilerplate in docker-compose with Treafik and SSL setup with .github workflow ready To start the containers in prod en

A simple and clean boilerplate to start a new SPA project with authentication and more features from fortify
A simple and clean boilerplate to start a new SPA project with authentication and more features from fortify

A simple and clean boilerplate to start a new SPA project with authentication and more features from fortify. Its like the little sister of Jetstream, but as SPA.

Creating a simple weather web application with Laravel rest API.

Weather Channel Creating a website for weather status, with Laravel restAPI. See the Website Weather.Channel-1.mov Features REST API Invoake Controlle

Comments
  • Delete or add Settings resolves in null response from API

    Delete or add Settings resolves in null response from API

    Describe the bug:

    When alternating the default options, the API returns a NULL response.

    Following scenario:

    1. Modify /src/admin/pages/advanced -> remove 'setting_5' section
    2. Modify /admin/class-wp-react-boilerplate-admin.php -> remove setting_5 in schema
    3. Modify /includes/functions.php -> remove 'setting_5' from $default_theme_optoins

    Run: {yarn|npm} start / build

    The response from the API is the following:

    wp_react_plugin_boilerplate_options: null

    Expected Behaviour: Return the remaining or modified options

    opened by Etheliene 0
  • POST data on API fetch

    POST data on API fetch

    Use the data key to send POST data on API fetch https://github.com/codersantosh/wp-react-plugin-boilerplate/blob/c3d91e9c15bf3e1fc03fc15b208f4b737012899d/src/api/settings.js#L37

    opened by codersantosh 0
Releases(1.0.1)
  • 1.0.1(Jul 25, 2022)

    Major Update

    • Added: Uses React Router, Context, and Reducer
    • Added: Atomic Design Methodology
    • Added: AT Grid
    • Added: Uses Inbuilt WordPress Settings API
    • Added: Settings via register_setting
    • Updated: UI and UX
    • Removed: Custom API and Custom Sanitization Functions
    Source code(tar.gz)
    Source code(zip)
  • 1.0.0(Jul 23, 2022)

Owner
Santosh Kunwar
I just love WordPress more...
Santosh Kunwar
🔪 WordPress + React Starter Kit: Spin up a WordPress-powered React app in one step

Postlight's Headless WordPress + React Starter Kit is an automated toolset that will spin up three things: A WordPress backend that serves its data vi

Postlight 4.3k Dec 1, 2022
A Laravel 5.8 API Boilerplate to create a ready-to-use REST API in seconds.

Laravel API Boilerplate (JWT Edition) for Laravel 5.8 Laravel API Boilerplate is a "starter kit" you can use to build your first API in seconds. As yo

Francesco Malatesta 1.2k Nov 17, 2022
Rest API boilerplate for Lumen micro-framework.

REST API with Lumen 5.5 A RESTful API boilerplate for Lumen micro-framework. Features included: Users Resource OAuth2 Authentication using Laravel Pas

Hasan Hasibul 484 Sep 16, 2022
A Laravel REST API backend with React/Redux, hot module reloading in development and route-level code splitting

React Laravel Boilerplate This is the boilerplate that I personally use for getting projects off the ground quickly using my favourite stack of techno

Carwyn Stephen 173 Nov 23, 2022
The Laravel Boilerplate Project - https://laravel-boilerplate.com

Laravel Boilerplate (Current: Laravel 8.*) (Demo) Demo Credentials Admin: [email protected] Password: secret User: [email protected] Password: secret Offici

Anthony Rappa 5.4k Dec 2, 2022
A preconfigured Laravel, React, Typescript, Docker boilerplate to save you time!

Laravel - React - Docker - Boilerplate This repo is built with the following: Laravel 9 React 17 Vite 3 ESLint 8 TypeScript 4.7 Husky/Commit lint PHP

Lockhinator 22 Sep 28, 2022
Laravel 8 + React + Typescript + React Router v4 + Hot Module Reloading

Laravel React Typescript Boilerplate An opinionated boilerplate based on Laravel 8.*, React 16 and Typescript empowering you to get off the ground qui

George Cameron 57 May 26, 2022
Free WordPress Gutenberg block-type Plugin Boilerplate for Developers.

ClioWP Blocks Boilerplate ClioWP Blocks Boilerplate is a Free WordPress Gutenberg block-type Plugin Boilerplate for Developers. Links Website https://

Christos Pontikis 5 Nov 19, 2022
Start WordPress Plugin Development with React JS Package in just few steps

React Js & Wordpress Plugin Package Start WordPress Plugin Development with React JS Package in just few steps Getting Started with this Setup Clone t

Devang Vachheta 2 Aug 17, 2022
Hydra is a zero-config API boilerplate with Laravel Sanctum that comes with excellent user and role management API out of the box

Hydra - Zero Config API Boilerplate with Laravel Sanctum Hydra is a zero-config API boilerplate with Laravel Sanctum and comes with excellent user and

Hasin Hayder 859 Dec 3, 2022