wordpress-rest-admin

WordPress REST Admin

A frontend for admin area of WordPress, using WP REST API and React. It works with Self-Hosted WordPress.

This project was bootstrapped with Create React App.

Features

• Login (using JWT WP REST Plugin)
• Dashboard
• Posts(List, Edit, Add New, Trash)
• Pages(List, Edit, Add New, Trash)
• Categories and Tags
• Comments
• Users
• Profile
• Settings
• Create your own page

Usage

Backend - what needs to be done first

Make sure you have WP REST API and JWP plugin installed in your wordpress

WP REST API

• https://v2.wp-api.org/
• Note that WordPress (4.7 or later) has this installed by default

JWP Authentication for WP REST API

• Installation instructions
• Tutorial

git clone and npm start

• Run these commands just to see how it works

git clone https://github.com/rnaga/wordpress-rest-admin.git .
npm install
npm start

• Visit http://localhost:3000

Use as a React Component

• Create a new React project with Create React App
• Import package

cd /path/to/your/project
npm install
npm i wordpress-rest-admin

• and render it

import WPAdmin from 'wordpress-rest-admin/WPAdmin';
import contents from 'wordpress-rest-admin/contents';
import loginLogo from './WordpressLogo.svg';
import headerLogo from './WordpressLogo.png';

...

<WPAdmin
  loginLogo={loginLogo}
  headerLogo={headerLogo}
  defaultContent={defaultContent}
  contents={contents}
/>

See example here

How to create your own page

• Install yeoman

npm install yo -g

• clone this repo, and install generator (generator-wordpress-rest-admin)

git clone https://github.com/rnaga/wordpress-rest-admin.git . 
cd ./generator
npm link

There is "generator" directory in this repo. Go under the directory, then run "npm link" as above

• Go to "src" directory under your React project, and run yo command

yo wordpress-rest-admin:contents [mypage]

It creates new files under "contents" directory (see blow)

• Import and pass your new page to WPAdmin component

import mypage from './contents/mypage';

....

<WPAdmin contents={{mypage}} />

• Start your project, and visit http://localhost:3000

• Update List.js, Edit.js and Create.js as needed to change output

See example here

Supported Browsers

By default, the generated project uses the latest version of React.

You can refer to the React documentation for more information about supported browsers.