Create your WordPress plugin in weeks, not months. Rapidly prototype and deliver your plugin with confidence! This boilerplate has a built-in marketing site and documentation setup that you can use to showcase your plugin.
 |
 |
 |
 |
Install PlugKit. You can find the installation instructions from here https://github.com/prappo/plugkit
To create a new WordPress plugin boilerplate.
plugkit create my-pluginplugkit.mp4
Or you can follow the manual installation process.
Manual installation
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!
git clone https://github.com/prappo/wordpress-plugin-boilerplate.gitnpm install
composer installYou 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.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
npm run renamenpx shadcn@latest add accordionIt will install the component in src/components folder.
đź“‚ 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
đź“‚ components
đź“‚ lib
đź“‚ blocks
đź“‚ libs
đź“‚ views
đź“‚ vendor
đź“„ plugin.php
đź“„ uninstall.php
đź“„ wordpress-plugin-boilerplate.php
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 );
});
// Authentication.
Route::prefix( $prefix, function( Route $route )
$route->post( $endpoint, $callback, $auth = false );
})->auth( 'AuthController@check' );// 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' );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
Create your model in includes/Models folder.
Example: includes/Models/Posts.php
<?php
namespace WordPressPluginBoilerplate\Models;
use Prappo\WpEloquent\Database\Eloquent\Model;
class Posts extends Model {
/**
* The table associated with the model.
*
* @var string
*/
protected $table = 'posts';
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = array( 'post_title', 'post_content' );
}You can access all your posts like this:
$posts = Posts::all();You can also create a new post like this:
$post = Posts::create( array( 'post_title' => 'Hello World', 'post_content' => 'This is a test post' ) );You can also update a post like this:
$post = Posts::find( 1 );
$post->post_title = 'Hello World';
$post->save();You can also delete a post like this:
$post = Posts::find( 1 );
$post->delete();You can also use the where method to filter your posts.
$posts = Posts::where( 'post_title', 'like', '%hello%' )->get();You can also use the orderBy method to sort your posts.
$posts = Posts::orderBy( 'post_title', 'desc' )->get();Just pass your data to the array in the Asset file.
For example: For admin:
wordpress-plugin-boilerplate/includes/Assets/Frontend.php
Lines 104 to 110 in 8d982b6
And access data on react like this
Remember the object wordpressPluginBoilerplateFrontend name can be defined here
You can create a shortcode by using the Shortcode class.
/**
* Example Usage
*
* Registering a shortcode that renders a PHP view file
*/
Shortcode::add()
->tag('myshortcode')
->attrs(['id', 'name'])
->render( plugin_dir_path( __FILE__ ) . 'views/shortcode/myshortcode.php');
/**
* Registering a shortcode that renders with a function
*/
Shortcode::add()
->tag('customshortcode')
->attrs(['title', 'class'])
->render(function($atts, $content) {
return "<div class='{$atts['class']}'><h3>{$atts['title']}</h3><p>{$content}</p></div>";
});The php render file should be in the views/shortcode folder.
For example: views/shortcode/myshortcode.php
<div id="<?= isset($id) ? esc_attr($id) : '' ?>" class="shortcode-box">
<h3><?= isset($name) ? esc_html($name) : 'Default Title' ?></h3>
<p><?= isset($shortcode_content) ? esc_html($shortcode_content) : '' ?></p>
</div>
[myshortcode id="box1" name="Example Shortcode"]
This is the content inside the shortcode.
[/myshortcode]
[customshortcode title="Dynamic Title" class="highlight"]
Some highlighted content.
[/customshortcode]
npm run devIf you want to run only frontend or admin you can use the following commands:
npm run dev:frontend
npm run dev:adminnpm run dev:servernpm run buildnpm run block:startnpm run block:buildnpm run releaseIt will create a relase plugin in release folder
If you are facing any issue with the development server, you can try the following steps:
-
If you are using Local WP you might see dev server is not working because of SSL certificate issue or domain mismatch.You can fix this by chaning your
Router modetolocalhost. -
Sometimes you might see on the first run of
npm run devyou might see nothing is happening. You can try to runnpm run devagain.
