Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rnaga/wordpress-rest-admin
A frontend for admin area of WordPress, using WP REST API and React. It works with Self-Hosted WordPress
https://github.com/rnaga/wordpress-rest-admin
material-ui react redux responsive-web-design single-page-app wordpress wordpress-rest-api
Last synced: about 2 months ago
JSON representation
A frontend for admin area of WordPress, using WP REST API and React. It works with Self-Hosted WordPress
- Host: GitHub
- URL: https://github.com/rnaga/wordpress-rest-admin
- Owner: rnaga
- License: mit
- Created: 2018-06-25T04:34:17.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T06:48:08.000Z (over 1 year ago)
- Last Synced: 2024-07-10T13:14:08.709Z (2 months ago)
- Topics: material-ui, react, redux, responsive-web-design, single-page-app, wordpress, wordpress-rest-api
- Language: JavaScript
- Homepage:
- Size: 1.01 MB
- Stars: 164
- Watchers: 9
- Forks: 44
- Open Issues: 48
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## WordPress REST Admin
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.
[](https://vimeo.com/283360988)
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/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](#how-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](https://wordpress.org/plugins/jwt-auth/#installation)
- [Tutorial](https://www.youtube.com/watch?v=Mp7T7x1oxDk)
### 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](https://github.com/facebook/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';
...
```
See example [here](https://github.com/rnaga/wordpress-rest-admin/tree/master/example)
## How to create your own page
- First, install [yeoman](http://yeoman.io/learning/)
```
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](https://material.io/tools/icons/?style=baseline))
```
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';
....
```
- 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](https://github.com/rnaga/wordpress-rest-admin/tree/master/example)
## Supported Browsers
By default, the generated project uses the latest version of React.
You can refer [to the React documentation](https://reactjs.org/docs/react-dom.html#browser-support) for more information about supported browsers.