https://github.com/fed/wordpress-widget-example
Wordpress Widget Example
https://github.com/fed/wordpress-widget-example
react wordpress wordpress-widget
Last synced: about 2 months ago
JSON representation
Wordpress Widget Example
- Host: GitHub
- URL: https://github.com/fed/wordpress-widget-example
- Owner: fed
- Created: 2017-02-20T00:27:43.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-09T17:52:51.000Z (about 7 years ago)
- Last Synced: 2025-01-18T13:33:22.891Z (3 months ago)
- Topics: react, wordpress, wordpress-widget
- Language: JavaScript
- Size: 171 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Wordpress React Widget Example
## Prerequisites
* Node.js (https://nodejs.org/)
* Yarn (https://yarnpkg.com/)
## Development Tasks
| Command | Description |
|---------|-------------|
| `yarn install` | Fetch dependencies and build binaries for any of the modules |
| `yarn start` | Run the app in development mode with live reload on `http://localhost:3000` |
| `yarn build` | Generate an optimised, production-ready `build` folder |
| `yarn test` | Run test suite in the interactive watch mode |
## Deploying to Wordpress
First run `yarn build` to generate the `build` folder along with the PHP configuration file required by Wordpress.
Copy the contents of the `build` directory to `wp-content\plugins\your-widget`.
## Activating the Widget
We now need to call `wp_widget_setup()` somewhere in our theme so that React has a root div to mount on.
Alternatively, you can [add a new text widget](http://i.imgur.com/bUWJ4mc.png) (instead of calling the previous function). As a site administrator go to **Appearance > Widgets** and drag a new "Text" widget to the top of the sidebar. The text content should be the mountpoint to the React app:
```html
```
You can make this *id* as specific as you want to avoid name clashes.
## Project Structure
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
For the project to build, these files must exist with exact filenames:
* `public/index.html` is the page template;
* `src/index.js` is the JavaScript entry point.
You can safely delete or rename any of the other files.
Only files inside `public` can be used from `public/index.html`.
## Credits
Original instructions for putting this plugin together can be found [here](http://myappincome.co.uk/how-to-make-a-react-js-wordpress-plugin/).
## License
MIT