Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/vojay-dev/wp-plugin-boilerplate

WordPress plugin development boilerplate to jumpstart WordPress plugin projects with Docker and Github Actions (includes examples for an admin page, shortcode and Gutenberg block)
https://github.com/vojay-dev/wp-plugin-boilerplate

boilerplate docker docker-compose php wordpress wordpress-development wordpress-plugin wordpress-site

Last synced: 3 months ago
JSON representation

WordPress plugin development boilerplate to jumpstart WordPress plugin projects with Docker and Github Actions (includes examples for an admin page, shortcode and Gutenberg block)

Host: GitHub
URL: https://github.com/vojay-dev/wp-plugin-boilerplate
Owner: vojay-dev
License: apache-2.0
Created: 2024-03-23T15:13:37.000Z (9 months ago)
Default Branch: main
Last Pushed: 2024-03-24T14:22:13.000Z (9 months ago)
Last Synced: 2024-09-27T14:24:30.310Z (3 months ago)
Topics: boilerplate, docker, docker-compose, php, wordpress, wordpress-development, wordpress-plugin, wordpress-site
Language: PHP
Homepage: http://vojay.de/
Size: 1.5 MB
Stars: 33
Watchers: 1
Forks: 11
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# WordPress plugin development boilerplate

![Logo](doc/wp-boilerplate.png)

This project is a WordPress plugin development boilerplate to jumpstart WordPress plugin projects. It utilizes Docker for a local environment and includes an automated setup of WordPress with a configurable admin user and password.

![Plugin example](doc/plugin.png)

With the boilerplate you get a simple template to get started with a plugin, which includes a dedicated **admin page**, an example **shortcode to be rendered on any page** as well as a **custom Gutenberg block**.

Furthermore it includes a build script and Github Workflow to generate an installable plugin release.

**Environment:**
* Docker
* Linux, macOS

Simply create a fork of this repo and get started by implementing your plugin in an efficient environment.

## Setup

* Fork the project
* Adjust the plugin name in `.env`
* Enable access to the `GITHUB_TOKEN` for the Github workflow to create releases: `Repository settings` -> `Actions` -> `General` -> `Workflow permission` -> select `Read and write permissions`.

![Workflow settings](doc/workflow-settings.png)

Commands to interact with Docker as well as building the plugin are encapsulated in the `Makefile`.

## Start local WordPress via Docker
```sh
make wp-start
```

This starts a local WordPress and database container. It uses the latest WordPress version and installs the WordPress CLI to automatically setup an admin user with the configured user and password in `.env`. After the setup is complete, you will get details on how to access WordPress in the log output.

![Start WordPress](doc/wp-start.png)

After starting the Docker setup, you can reach WordPress locally via:

* Frontend: http://localhost:8080
* Backend: http://localhost:8080/wp-admin

Your plugin is already installed automatically and can be activated!

![Plugin example](doc/plugin-example.png)

## Stop local WordPress via Docker
```sh
make wp-stop
```

## Build plugin
```sh
make
```

This command will trigger the `bin/build.sh` script with the configured plugin name in `.env` to create an installable WordPress plugin `.zip` file.

![Build plugin](doc/build.png)

Also the Github workflow in `.github/workflows/build.yml` will automatically build the plugin and create a release with the `.zip` file on any push to `main`.

![Release plugin](doc/release.png)

## Plugin development

The source of your plugin is in `src/`. There are already examples added, to get started quickly:

* `src/index.php`: General setup and global variables / functions
* `src/admin.php`: Admin page
* `src/frontend.php`: Code to render the custom shortcode
* `src/block.js`: Custom Gutenberg block example
* `src/script.js`: Custom JS code loaded with your plugin
* `src/style.css`: Custom CSS code loaded with your plugin

With the given example, you will get a custom admin page, a shortcode `[my-plugin]` that will be rendered with a "Hello World!" example as well as a custom Gutenberg block that simply renders a text.

**Shortcode:**

![Shortcode example 1](doc/frontend1.png)
![Shortcode example 2](doc/frontend2.png)

**Gutenberg block:**

![Gutenberg example](doc/block.png)

**Admin page:**

![Admin example](doc/plugin.png)

From here, you can get started with your plugin within an efficient local environment including a build workflow.

> If you use this boilerplate, feel free to star ⭐️ this repo and add your project to this README. Knowledge shared is knowledge squared!