{"id":14954953,"url":"https://github.com/prappo/wordpress-plugin-boilerplate","last_synced_at":"2025-04-06T09:07:02.840Z","repository":{"id":224965938,"uuid":"764713900","full_name":"prappo/wordpress-plugin-boilerplate","owner":"prappo","description":"WordPress Plugin Boilerplate utilizing modern web technologies and tools such as React, TypeScript, SASS, Tailwind CSS, Shadcn UI, Vite, Storybook, HMR and more.","archived":false,"fork":false,"pushed_at":"2025-03-14T10:58:00.000Z","size":19335,"stargazers_count":102,"open_issues_count":0,"forks_count":14,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-30T08:11:55.470Z","etag":null,"topics":["react","shadcn-ui","storybook","tailwindcss","typescript","vite","wordpress","wordpress-development","wordpress-plugin"],"latest_commit_sha":null,"homepage":"https://prappo.github.io/wordpress-plugin-boilerplate/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prappo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["prappo"],"buy_me_a_coffee":"prappo"}},"created_at":"2024-02-28T15:25:42.000Z","updated_at":"2025-03-27T14:46:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"788d9dfe-78e3-427c-b264-a5e683c20af4","html_url":"https://github.com/prappo/wordpress-plugin-boilerplate","commit_stats":{"total_commits":85,"total_committers":1,"mean_commits":85.0,"dds":0.0,"last_synced_commit":"3aa7ac6fc4ef434a0aeba284ee8f3bb93caeb3b5"},"previous_names":["prappo/wordpress-plugin-boilerplate"],"tags_count":1,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prappo%2Fwordpress-plugin-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prappo%2Fwordpress-plugin-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prappo%2Fwordpress-plugin-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prappo%2Fwordpress-plugin-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prappo","download_url":"https://codeload.github.com/prappo/wordpress-plugin-boilerplate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247457799,"owners_count":20941906,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","shadcn-ui","storybook","tailwindcss","typescript","vite","wordpress","wordpress-development","wordpress-plugin"],"created_at":"2024-09-24T13:10:17.298Z","updated_at":"2025-04-06T09:07:02.820Z","avatar_url":"https://github.com/prappo.png","language":"JavaScript","readme":"# WordPress Plugin Boilerplate\n#### Create your WordPress plugin in weeks, not months. Rapidly prototype and deliver your plugin with confidence!\n\n#### This boilerplate has built-in marketing site and documentation setup which you can use to showcase your plugin.\n## Preview\n\n\u003ca href='https://prappo.github.io/wordpress-plugin-boilerplate/preview' target=\"_blank\"\u003e\u003cimg alt='Wordpress' src='https://img.shields.io/badge/Live_Preview-100000?style=for-the-badge\u0026logo=Wordpress\u0026logoColor=white\u0026labelColor=21759B\u0026color=21759B'/\u003e\u003c/a\u003e\n\n### Screenshots\n\n\u003ctable\u003e\n \n  \u003ctr\u003e\n  \u003ctd\u003e\u003cimg src=\"documentation/public/artworks/images/chart.png\" /\u003e\u003c/td\u003e\n  \u003ctd\u003e\u003cimg src=\"documentation/public/artworks/images/dashboard-light.png\" /\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"documentation/public/artworks/images/inbox-light.png\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"documentation/public/artworks/images/settings-light.png\" /\u003e\u003c/td\u003e\n    \n  \u003c/tr\u003e\n  \n\u003c/table\u003e\n\n## Get Started\nThe plugin consists of two main components: the frontend, built with React, and the backend, which communicates via an API.\n\nTo 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!\n\n\u003cimg width=\"100%\" src=\"documentation/public/artworks/plugin-dev-process.svg\" /\u003e\n\n## Clone the repository\n```bash\ngit clone https://github.com/prappo/wordpress-plugin-boilerplate.git\n```\n\n## Install dependencies\n```bash\nnpm install\ncomposer install\n```\n## Plugin renaming\n\nYou can easly rename the plugin by changing data in `plugin-config.json` file.\n\n```json\n{\n    \"plugin_name\":\"WordPress Plugin Boilerplate\",\n    \"plugin_description\":\"A boilerplate for WordPress plugins.\",\n    \"plugin_version\":\"1.0.0\",\n    \"plugin_file_name\":\"wordpress-plugin-boilerplate.php\",\n    \"author_name\":\"Prappo\",\n    \"author_uri\":\"https://prappo.github.io\",\n    \"text_domain\":\"wordpress-plugin-boilerplate\",\n    \"domain_path\":\"/languages\",\n    \"main_class_name\":\"WordPressPluginBoilerplate\",\n    \"main_function_name\":\"wordpress_plugin_boilerplate_init\",\n    \"namespace\":\"WordPressPluginBoilerplate\",\n    \"plugin_prefix\":\"wpb\",\n    \"constant_prefix\":\"WPB\"\n}\n```\n\nThen run the following command to rename the plugin\n\n```bash\nnpm run rename\n```\n## Add Shadcn UI\n\n```bash\nnpx shadcn@latest add accordion\n```\nIt will install the component in `src/components` folder.\n\n\n## Structure\n\n\u003cdetails open\u003e\n  \u003csummary\u003e\u003cstrong\u003e📂 wordpress-plugin-boilerplate\u003c/strong\u003e\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\n    \u003cdetails\u003e\n    \u003csummary\u003e\u003cstrong\u003e📂 config\u003c/strong\u003e\u003c/summary\u003e\n    \u003csummary\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📄 plugin.php\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/summary\u003e\n    \u003c/details\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n    \u003cdetails\u003e\n    \u003csummary\u003e\u003cstrong\u003e📂 database\u003c/strong\u003e\u003c/summary\u003e\n    \u003csummary\u003e\n      \u003cul\u003e\n        \u003cli\u003e\n        \u003cdetails\u003e\n        \u003csummary\u003e\u003cstrong\u003e📂 Migrations\u003c/strong\u003e\u003c/summary\u003e\n        \u003cul\u003e\n          \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📄 create_posts_table.php\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n          \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📄 create_users_table.php\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003c/details\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n        \u003cdetails\u003e\n        \u003csummary\u003e\u003cstrong\u003e📂 Seeders\u003c/strong\u003e\u003c/summary\u003e\n        \u003cul\u003e\n          \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📄 PostSeeder.php\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n          \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📄 UserSeeder.php\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003c/details\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/summary\u003e\n    \u003c/details\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003cdetails\u003e\n    \u003csummary\u003e\u003cstrong\u003e📂 includes\u003c/strong\u003e\u003c/summary\u003e\n    \u003cul\u003e\n      \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📂 Admin\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n      \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📂 Controllers\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n      \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📂 Core\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n      \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📂 Frontend\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n      \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📂 Interfaces\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n      \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📂 Models\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n      \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📂 Routes\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n      \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📂 Traits\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n      \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📄 functions.php\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003c/details\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003cdetails\u003e\n    \u003csummary\u003e\u003cstrong\u003e📂 src\u003c/strong\u003e\u003c/summary\u003e\n    \u003cul\u003e\n      \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📂 admin\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n      \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📂 frontend\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n      \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📂 components\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n      \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📂 lib\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n      \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📂 blocks\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003c/details\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📂 libs\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n    \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📂 views\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n    \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e📂 vendor\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n    \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e 📄 plugin.php\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n    \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e 📄 uninstall.php\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n    \u003cli\u003e\u003csummary\u003e\u003cstrong\u003e 📄 wordpress-plugin-boilerplate.php\u003c/strong\u003e\u003c/summary\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n### API Route\n\nAdd your API route in `includes/Routes/Api.php`\n\n```php\nRoute::get( $prefix, $endpoint, $callback, $auth = false );\nRoute::post( $prefix, $endpoint, $callback, $auth = false );\n\n// Route grouping.\nRoute::prefix( $prefix, function( Route $route ) {\n    $route-\u003eget( $endpoint, $callback, $auth = false );\n    $route-\u003epost( $endpoint, $callback, $auth = false );\n});\n```\n#### API Example\n```php\n// Get All posts\n$route-\u003eget( '/posts/get', '\\WordPressPluginBoilerplate\\Controllers\\Posts\\Actions@get_all_posts' );\n\n// Get Single Posts\n$route-\u003eget( '/posts/get/{id}', '\\WordPressPluginBoilerplate\\Controllers\\Posts\\Actions@get_post' );\n```\n\n## ORM ( Object Relational Mapping )\n\nIf you are familiar with Laravel, you will find this ORM very familiar. It is a simple and easy-to-use ORM for WordPress.\n\nYou can find the ORM documentation [here](https://github.com/prappo/wp-eloquent)\n\nCreate your model in `includes/Models` folder.\n\nExample: `includes/Models/Posts.php`\n\n```php\n\u003c?php\n\nnamespace WordPressPluginBoilerplate\\Models;\n\nuse Prappo\\WpEloquent\\Database\\Eloquent\\Model;\n\nclass Posts extends Model {\n\t/**\n\t * The table associated with the model.\n\t *\n\t * @var string\n\t */\n\tprotected $table = 'posts';\n\n\t/**\n\t * The attributes that are mass assignable.\n\t *\n\t * @var array\n\t */\n\tprotected $fillable = array( 'post_title', 'post_content' );\n}\n\n```\n\nYou can access all your posts like this:\n\n```php\n$posts = Posts::all();\n```\n\nYou can also create a new post like this:\n\n```php\n$post = Posts::create( array( 'post_title' =\u003e 'Hello World', 'post_content' =\u003e 'This is a test post' ) );\n```\n\nYou can also update a post like this:\n\n```php\n$post = Posts::find( 1 );\n$post-\u003epost_title = 'Hello World';\n$post-\u003esave();\n```\n\nYou can also delete a post like this:\n\n```php\n$post = Posts::find( 1 );\n$post-\u003edelete();\n```\n\nYou can also use the `where` method to filter your posts.\n\n```php\n$posts = Posts::where( 'post_title', 'like', '%hello%' )-\u003eget();\n```\n\nYou can also use the `orderBy` method to sort your posts.\n\n```php\n$posts = Posts::orderBy( 'post_title', 'desc' )-\u003eget();\n```\n\n## Passing data from backend to frontend\n\nJust pass your data to the array in the Asset file.\n\nFor example: For admin:\n\nhttps://github.com/prappo/wordpress-plugin-boilerplate/blob/8d982b63f50beb1dffd43c29bff894814b5e7945/includes/Assets/Frontend.php#L104-L110\n\nAnd access data on react like this \n\nhttps://github.com/prappo/wordpress-plugin-boilerplate/blob/8d982b63f50beb1dffd43c29bff894814b5e7945/src/frontend/components/application-layout/LayoutOne.jsx#L58\n\nRemember the object `wordpressPluginBoilerplateFrontend` name can be defined here \n\nhttps://github.com/prappo/wordpress-plugin-boilerplate/blob/8d982b63f50beb1dffd43c29bff894814b5e7945/includes/Assets/Frontend.php#L30\n\n## Shortcode\n\nYou can create a shortcode by using the `Shortcode` class.\n\n```php\n\n/**\n * Example Usage\n * \n * Registering a shortcode that renders a PHP view file\n */\nShortcode::add()\n    -\u003etag('myshortcode')\n    -\u003eattrs(['id', 'name'])\n    -\u003erender( plugin_dir_path( __FILE__ ) . 'views/shortcode/myshortcode.php');\n\n/**\n * Registering a shortcode that renders with a function\n */\nShortcode::add()\n    -\u003etag('customshortcode')\n    -\u003eattrs(['title', 'class'])\n    -\u003erender(function($atts, $content) {\n        return \"\u003cdiv class='{$atts['class']}'\u003e\u003ch3\u003e{$atts['title']}\u003c/h3\u003e\u003cp\u003e{$content}\u003c/p\u003e\u003c/div\u003e\";\n    });\n```\n\nThe php render file should be in the `views/shortcode` folder.\n\nFor example: `views/shortcode/myshortcode.php`\n\n```php\n\u003cdiv id=\"\u003c?= isset($id) ? esc_attr($id) : '' ?\u003e\" class=\"shortcode-box\"\u003e\n    \u003ch3\u003e\u003c?= isset($name) ? esc_html($name) : 'Default Title' ?\u003e\u003c/h3\u003e\n    \u003cp\u003e\u003c?= isset($shortcode_content) ? esc_html($shortcode_content) : '' ?\u003e\u003c/p\u003e\n\u003c/div\u003e\n```\n\n### Example Usage in WordPress editor\n\n```\n\n[myshortcode id=\"box1\" name=\"Example Shortcode\"]\nThis is the content inside the shortcode.\n[/myshortcode]\n\n[customshortcode title=\"Dynamic Title\" class=\"highlight\"]\nSome highlighted content.\n[/customshortcode]\n```\n\n## Development\n\n```bash\nnpm run dev\n```\nIf you want to run only frontend or admin you can use the following commands:\n\n```bash\nnpm run dev:frontend\nnpm run dev:admin\n```\n\n## Development with server\n\n```bash\nnpm run dev:server\n```\n\n## Build\n\n```bash\nnpm run build\n```\n## Start block\n\n```bash\nnpm run block:start\n```\n\n## Build block\n\n```bash\nnpm run block:build\n```\n\n## Release\n\n```bash\nnpm run release\n```\n\nIt will create a relase plugin in `release` folder\n\n## Trouble shooting\n\nIf you are facing any issue with the development server, you can try the following steps:\n\n1. 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 mode` to `localhost`.\n\n2. Sometimes you might see on the first run of `npm run dev` you might see nothing is happening. You can try to run `npm run dev` again.\n\n","funding_links":["https://github.com/sponsors/prappo","https://buymeacoffee.com/prappo"],"categories":["Boilerplates / Templates","Boilerplates \u0026 Starters","Templates"],"sub_categories":["Portfolios"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprappo%2Fwordpress-plugin-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprappo%2Fwordpress-plugin-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprappo%2Fwordpress-plugin-boilerplate/lists"}