WordPress Complete REST API + WP Scripts + WP Data + PHPUnitTesting + Jest Unit Testing Setup
Categories - PHP Tags - PHP   Maniruzzaman Akash   1 month ago   128   0

WordPress Complete REST API + WP Scripts + WP Data + PHPUnitTesting + Jest Unit Testing Setup

Hei, WordPress developer, if you’re struggling with enhancing your career with React, TypeScript, WordPress Rest API, PHP Unit and many more, then this tutorial is for you. Let’s see a simple starter kit for WordPress plugin development.

WP-React-Kit

A simple starter kit to work in WordPress plugin development using WordPress Rest API, WP-script, React, React Router, Tailwind CSS, PostCSS, Eslint, WP-Data, WP-Data Store, React Components, React CRUD, i18n, PHPUnit Test, JestUnit Test, e2e Test and PHP OOP plugin architecture easily in a minute.

Github Link -

https://github.com/ManiruzzamanAkash/wp-react-kit

What’s included?

  1. WordPress Rest API
  2. WP-script Setup
  3. React
  4. React Router
  5. TypeScript
  6. Tailwind CSS [Nested + ]
  7. Scss
  8. PostCSS
  9. Eslint
  10. WP-Data
  11. WP-Data Redux Store [Redux Saga, Generator function, Thunk, Saga Middleware]
  12. React Components
  13. React CRUD Operations [Continuing…]
  14. Internationalization - WP i18n
  15. PHPUnit Test [Test + Fix]
  16. JestUnit Test
  17. e2e Test
  18. PHP OOP plugin architecture [Traits + Interfaces + Abstract Classes]

Quick Start

# Clone the Git repository
git clone https://github.com/ManiruzzamanAkash/wp-react-kit.git

# Install PHP-composer dependencies [It's empty]
composer install

# Install node module packages
npm i

# Start development mode
npm start

# Start development with hot reload (Frontend components will be updated automatically if any changes are made)
npm run start:hot

# To run in production
npm run build

After running start, or build command, there will be a folder called /build will be generated at the root directory.

Activate the plugin

You need activate the plugin from plugin list page. http://localhost/wpex/wp-admin/plugins.php

Run PHP Unit Test

./vendor/bin/phpunit

Run Jest Unit Test

npm run test:unit --maxWorkers=10

PHP Coding Standards - PHPCS

Get all errors of the project:

vendor/bin/phpcs .

Fix all errors of the project:

vendor/bin/phpcbf .

Browse Plugin

http://localhost/wpex/wp-admin/admin.php?page=jobplace#/

Where, /wpex is the project root folder inside /htdocs.

Or, it could be your custom processed URL.

REST API’s

Postman API Link - https://www.getpostman.com/collections/f94073131fc1411506e8

REST API Documentation

  1. Job Types
  2. Job Lists
  3. Job Details
  4. Create Job
    {
        "title": "Simple Job Post",
        "slug": "simple-job-post",
        "description": "Simple job post description",
        "company_id": 1,
        "job_type_id": 2,
        "is_active": 1
    }
    
  5. Update Job
    {
        "title": "Simple Job Post Updated",
        "slug": "simple-job-post-updated",
        "description": "Simple job post description",
        "company_id": 1,
        "job_type_id": 2,
        "is_active": 1
    }
    
  6. Delete Jobs
    {
        "ids": [1, 2]
    }
    

Detailed Documentation - View Detailed documentations with parameters and responses of the REST API

Get specific file errors of the project:

vendor/bin/phpcs job-place.php

Fix specific file errors of the project:

vendor/bin/phpcbf job-place.php

Versions

Simple Version with raw PHP

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vSimple

Version with EsLint and i18n Setup

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vSimpleEslint

Version with EsLint, i18n and React Router Setup

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vReactRouter

Version with PostCSS and Tailwind CSS Setup

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vTailwindCss

Version with PHPCS setup

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vPHPCS

Version with PHP OOP Architecture

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vPhpOOP

Final Demos

Job List Page

Job List Page

Job List Page with Pagination

Job List Page with Pagination

Job List Page with search

Job List Page with Search
Previous
PHP If-else-elseif and Switch-case
Next
PHP String Functions - All necessary String functions in PHP to manage strings better.