Skip to content

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.

License

Notifications You must be signed in to change notification settings

prappo/wordpress-plugin-boilerplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

81 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

git clone https://github.com/prappo/wordpress-plugin-boilerplate.git

Install dependencies

npm install
composer install

Plugin renaming

You can easly rename the plugin by changing data in plugin-config.json file.

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

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

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

// 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

npm run dev

Development with server

npm run dev:server

Build

npm run build

Start block

npm run block:start

Build block

npm run block:build

Release

npm run release

It will create a relase plugin in release folder

About

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.

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published