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: 24 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.

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.github.io",

    "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
      • 

          
    

        

        
    • 

        
  • 

        📂 src

        
      

            
    • 📂 admin
      • 

            
    • 📂 frontend
      • 

            
    • 📂 blocks
      • 

          
    

        

        
    • 

        
  • 📂 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' );

```



## ORM ( Object Relational Mapping )



If you are familiar with Laravel, you will find this ORM very familiar. It is a simple and easy-to-use ORM for WordPress.



You can find the ORM documentation [here](https://github.com/prappo/wp-eloquent)



Create your model in `includes/Models` folder.



Example: `includes/Models/Posts.php`



```php

 'Hello World', 'post_content' => 'This is a test post' ) );

```



You can also update a post like this:



```php

$post = Posts::find( 1 );

$post->post_title = 'Hello World';

$post->save();

```



You can also delete a post like this:



```php

$post = Posts::find( 1 );

$post->delete();

```



You can also use the `where` method to filter your posts.



```php

$posts = Posts::where( 'post_title', 'like', '%hello%' )->get();

```



You can also use the `orderBy` method to sort your posts.



```php

$posts = Posts::orderBy( 'post_title', 'desc' )->get();

```



## Passing data from backend to frontend



Just pass your data to the array in the Asset file.



For example: For admin:



https://github.com/prappo/wordpress-plugin-boilerplate/blob/8d982b63f50beb1dffd43c29bff894814b5e7945/includes/Assets/Frontend.php#L104-L110



And access data on react like this 



https://github.com/prappo/wordpress-plugin-boilerplate/blob/8d982b63f50beb1dffd43c29bff894814b5e7945/src/frontend/components/application-layout/LayoutOne.jsx#L58



Remember the object `wordpressPluginBoilerplateFrontend` name can be defined here 



https://github.com/prappo/wordpress-plugin-boilerplate/blob/8d982b63f50beb1dffd43c29bff894814b5e7945/includes/Assets/Frontend.php#L30



## Development



```bash

npm run dev

```

## Development with server



```bash

npm run dev:server

```



## Build



```bash

npm run build

```

## Start block



```bash

npm run block:start

```



## Build block



```bash

npm run block:build

```



## Release



```bash

npm run release

```



It will create a relase plugin in `release` folder