Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 2 months 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.

Awesome Lists containing this project

README

        

# WordPress Plugin Boilerplate
Create your WordPress plugin in weeks, not months. Rapidly prototype and deliver your plugin with confidence!
## Preview

Wordpress

### 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
```
## Development with server

```bash
npm run dev:server
```

## Build

```bash
npm run build
```

## Release

```bash
npm run release
```

It will create a relase plugin in `release` folder