Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prappo/wordpress-plugin-boilerplate
WordPress Plugin Boilerplate utilizing modern web technologies and tools such as React, TypeScript, SASS, Tailwind CSS, Shadcn UI, Vite, Grunt.js, Storybook, HMR and more.
https://github.com/prappo/wordpress-plugin-boilerplate
react shadcn-ui storybook tailwindcss typescript vite wordpress wordpress-development wordpress-plugin
Last synced: 9 days ago
JSON representation
WordPress Plugin Boilerplate utilizing modern web technologies and tools such as React, TypeScript, SASS, Tailwind CSS, Shadcn UI, Vite, Grunt.js, Storybook, HMR and more.
- Host: GitHub
- URL: https://github.com/prappo/wordpress-plugin-boilerplate
- Owner: prappo
- License: gpl-2.0
- Created: 2024-02-28T15:25:42.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-09-12T14:09:17.000Z (23 days ago)
- Last Synced: 2024-09-13T17:04:32.030Z (22 days ago)
- Topics: react, shadcn-ui, storybook, tailwindcss, typescript, vite, wordpress, wordpress-development, wordpress-plugin
- Language: JavaScript
- Homepage: https://prappo.github.io/wordpress-plugin-boilerplate/
- Size: 12 MB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-shadcn-ui - wordpress-plugin-boilerplate - WordPress Plugin Boilerplate utilizing modern web technologies and tools such as React, TypeScript, SASS, Tailwind CSS, Shadcn UI, Vite, Grunt.js, Storybook, HMR and more. (Boilerplates / Templates / Portfolios)
README
# WordPress Plugin Boilerplate
Create your WordPress plugin in weeks, not months. Rapidly prototype and deliver your plugin with confidence!
## Preview
### Screenshots
Light Mode
Dark Mode
## Get Started
The plugin consists of two main components: the frontend, built with React, and the backend, which communicates via an API.
To get started, you need to clone the repository and install the dependencies. Then you can rename the plugin and start development. It's that simple!
## Clone the repository
```bash
git clone https://github.com/prappo/wordpress-plugin-boilerplate.git
```
## Install dependencies
```bash
npm install
composer install
```
## Plugin renaming
You can easly rename the plugin by changing data in `plugin-config.json` file.
```json
{
"plugin_name":"WordPress Plugin Boilerplate",
"plugin_description":"A boilerplate for WordPress plugins.",
"plugin_version":"1.0.0",
"plugin_file_name":"wordpress-plugin-boilerplate.php",
"author_name":"Prappo",
"author_uri":"https://prappo.dev",
"text_domain":"wordpress-plugin-boilerplate",
"domain_path":"/languages",
"main_class_name":"WordPressPluginBoilerplate",
"main_function_name":"wordpress_plugin_boilerplate_init",
"namespace":"WordPressPluginBoilerplate",
"plugin_prefix":"wpb",
"constant_prefix":"WPB"
}
```
Then run the following command to rename the plugin
```bash
npm run rename
```
## Structure
📂 wordpress-plugin-boilerplate
-
📂 config
- 📄 plugin.php
-
📂 database
-
📂 Migrations
- 📄 create_posts_table.php
- 📄 create_users_table.php
-
📂 Seeders
- 📄 PostSeeder.php
- 📄 UserSeeder.php
-
-
📂 includes
- 📂 Admin
- 📂 Controllers
- 📂 Core
- 📂 Frontend
- 📂 Interfaces
- 📂 Models
- 📂 Routes
- 📂 Traits
- 📄 functions.php
- 📂 js
- 📂 libs
- 📂 views
- 📂 vendor
- 📄 plugin.php
- 📄 uninstall.php
- 📄 wordpress-plugin-boilerplate.php
### API Route
Add your API route in `includes/Routes/Api.php`
```php
Route::get( $prefix, $endpoint, $callback, $auth = false );
Route::post( $prefix, $endpoint, $callback, $auth = false );
// Route grouping.
Route::prefix( $prefix, function( Route $route ) {
$route->get( $endpoint, $callback, $auth = false );
$route->post( $endpoint, $callback, $auth = false );
});
```
#### API Example
```php
// Get All posts
$route->get( '/posts/get', '\WordPressPluginBoilerplate\Controllers\Posts\Actions@get_all_posts' );
// Get Single Posts
$route->get( '/posts/get/{id}', '\WordPressPluginBoilerplate\Controllers\Posts\Actions@get_post' );
```
## Development
```bash
npm run dev
```
## Build
```bash
npm run build
```
## Release
```bash
npm run release
```
It will create a relase plugin in `release` folder