# create-wp-refine-plugin > 1. Easy to Use Git clone this repository in `wp-content/plugins/` and `npm run bootstrap`, `npm run dev`, that's all the steps Latest version **4.0.10** (published 2025-12-02) · 0 weekly downloads ## Install ```sh npm install create-wp-refine-plugin pnpm add create-wp-refine-plugin yarn add create-wp-refine-plugin bun add create-wp-refine-plugin ``` Provides the command `create-wp-refine-plugin`. ## Health **Score 50/100 (C)** — status: stable. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. ## Facts | | | |---|---| | Version | 4.0.10 | | Published | 2025-12-02 | | First published | 2024-05-11 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | ESM | | Dependencies | 15 | | Unpacked size | 142.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | j7devgg | ## Links - npm: https://www.npmjs.com/package/create-wp-refine-plugin - npm.io page: https://npm.io/package/create-wp-refine-plugin ## Dependencies (15) - [antd](https://npm.io/package/antd.md) ^5.29.1 - [axios](https://npm.io/package/axios.md) ^1.6.8 - [dayjs](https://npm.io/package/dayjs.md) ^1.11.19 - [react](https://npm.io/package/react.md) ^18.2.0 - [react-dom](https://npm.io/package/react-dom.md) ^18.2.0 - [query-string](https://npm.io/package/query-string.md) ^9.0.0 - [@refinedev/cli](https://npm.io/package/@refinedev/cli.md) 2.16.42 - [@refinedev/antd](https://npm.io/package/@refinedev/antd.md) 5.45.1 - [@refinedev/core](https://npm.io/package/@refinedev/core.md) 4.57.5 - [react-router-dom](https://npm.io/package/react-router-dom.md) ^7.9.6 - [@ant-design/cssinjs](https://npm.io/package/@ant-design/cssinjs.md) ^2.0.1 - [@refinedev/inferencer](https://npm.io/package/@refinedev/inferencer.md) 5.0.3 - [@tanstack/react-query](https://npm.io/package/@tanstack/react-query.md) 4.36.1 - [@refinedev/simple-rest](https://npm.io/package/@refinedev/simple-rest.md) 5.0.10 - [@refinedev/react-router-v6](https://npm.io/package/@refinedev/react-router-v6.md) 4.6.2 ## Recent versions - 4.0.10 (latest) — 2025-12-02 - 4.0.8 — 2025-12-02 - 4.0.7 — 2025-12-02 - 4.0.5 — 2025-01-10 - 4.0.4 — 2025-01-10 - 4.0.3 — 2025-01-10 - 4.0.0 — 2024-08-19 - 3.0.4 — 2024-05-21 - 3.0.3 — 2024-05-12 - 3.0.2 — 2024-05-11 - 3.0.1 — 2024-05-11 ## README # WP Refine Plugin ## ⚡Features⚡ 1. Easy to Use
Git clone this repository in `wp-content/plugins/` and `npm run bootstrap`, `npm run dev`, that's all the steps 2. Integrate with WordPress RestFul API
By default, the `API_URL` would be `{site_url}/wp-json}` which is set in `inc/admin.php` 3. CRUD utility function
Default with `getPost` Example, check [more utilities in Refine](https://refine.dev/docs/#what-is-refine) 4. Integrate with JWT
We use `usefulteam/jwt-auth` in composer, every time a WordPress user logged in, he will get JWT (for call API, if the user has enough capability) automatically. 5. HMR (Hot Module Reload) for PHP
By using `vite-plugin-live-reload`, the page will auto reload while PHP files changed 6. Multi-React-App in one plugin
By default, we render 2 React App, 1 is for front-end page, and 1 is for admin page. You can add more React App in `js/src/main.tsx` ## Before getting start Tech stacks (knowledge you need to have) #### Front-end 1. [Vite](https://vitejs.dev/) - build tool 2. [Refine](https://refine.dev/) - React Admin Framework with lots of useful utilities 3. [React v18](https://beta.reactjs.org/) 4. [TypeScript](https://www.typescriptlang.org/docs/) - compile project with type safe 5. [Tailwind v3](https://tailwindcss.com/) - you can install any UI library, like Ant Design, MUI, Chakra...etc 6. [SCSS](https://sass-lang.com/documentation/syntax) 7. [React Query v4](https://tanstack.com/query/v4) - managing API status 8. [React Router v6](https://reactrouter.com/en/main) - front-end router, we use #️⃣hash router by default which is compatible with WordPress's router #### Back-end 1. [usefulteam/jwt-auth](https://github.com/usefulteam/jwt-auth) - get JWT if a wordpress user is logged in ## Install 1. Clone this repository into `/wp-content/plugins`. ```sh cd {your-project}/wp-content/plugins git clone https://github.com/j7-dev/wp-refine-plugin.git cd wp-refine-plugin ``` 2. Install dependencies: ⭐ You must have [Composer](https://getcomposer.org/) installed ```sh npm run bootstrap # This will run `npm install` & `composer install` npm run dev ``` 3. Change the API url to your project in `.env.development` ```sh APP_NAME='My Refine App' # ↑ Your App's Name APP1_SELECTOR='my-refine-app' # by default, the footer will render a
container at front-end page footer # You can custom the render id APP2_SELECTOR='my-refine-app-metabox' # by default, in admin page, when you want to add/edit a new post with post_type=my-refine-app, another React App will render in metabox # Remove it if you don't need a metabox React App VITE_API_TIMEOUT='30000' ``` 4. Activate the plugin from WordPress admin `/wp-admin`. 5. Visit your site's homepage and see the rendered application on the footer 🚀🚀🚀 6. Click `Count`, `Get Post Example` button to ensure the State and the WordPress API works 7. Check the admin page, you will see a new post type `My Refine App` and a new menu `My Refine App` 8. Click Add New, you will see a React App in the metabox 8. 🎉🎉🎉 Enjoy the dev 🎉🎉🎉 --- ## Any Suggestion ? Welcome to open issue and start a discussion 🎉🎉🎉 If this project is useful for you, please give me a github star ⭐ --- ## Reference 1. Inspired by [Vite for WP](https://github.com/kucrut/vite-for-wp) 2. [Refine](https://refine.dev/) 3. [WordPress REST API Handbook](https://developer.wordpress.org/rest-api/reference/) --- _Source: https://npm.io/package/create-wp-refine-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._