This is a demo of WordPress plugin with cusom UI built in React.
Main features:
- Includes adding, removing, editing, marking as complete and filtering todos.
- Persists all todos as WordPress custom post type posts
- Completed state stored in post metadata.
- There is no custom REST endpoint registered. Everything is handled with native functions.
Screenshot:
It uses WordPress packages like @wordpress/components
, @wordpress/core-data
, @wordpress/data
and @wordpress/icons
.
The main purpose of this project is to showcase how to build such interfaces "the WordPress way".
There's not so much out there showing how it's done in practice so I made this little demo to help you get started.
The only requirement is Node (recommended at least version 20).
- Clone this repository:
git clone [email protected]:dawidurbanski/wordpress-todoapp.git
- Go to the folder:
cd wordpress-todoapp
- Run:
npm install & npm run build
- Run:
npm run start
- Visit http://localhost:8881/wp-admin/admin.php?page=todoapp
When you have your site running (with npm run start
) you can run npm run dev
to have assets build without running npm run build
.
You can opt in for HMR (Hot Module Replacement) feature by running npm run dev -- --hot
.