wordpress-rest-admin
v0.2.1
Published
A frontend for admin area of WordPress, using [WP REST API](https://v2.wp-api.org/) and [React](https://reactjs.org/). It works with Self-Hosted WordPress.
Downloads
26
Readme
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
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.