rnaga / 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)
• Media Upload(Images)
• Categories and Tags
• Comments
• Users
• Profile
• Settings
• Code generator to 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

JWT 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

Quick start with docker-compose.yml

• Use docker-compose to start wordpress-rest-admin along with wordpress and MySQL

git clone https://github.com/rnaga/wordpress-rest-admin.git .
docker-compose up --build

Once all containers are up, visit http://localhost:3000 and login with the following creds

Site URL: http://localhost
Username: demo
Password: demo

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

• First, 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 (Choose your icon from here)

yo wordpress-rest-admin:contents [mypage]

It creates new files(components) 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 components(List.js, Edit.js and Create.js) as needed to change output

How to import existing pages into your project

This is useful in case you want to modify existing pages

yo wordpress-rest-admin:contents --copy-from=[content]

where "content" is one of the following.

categories  comments  dashboard  pages  posts  media profile  settings  tags  users

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.