Use Dockup to develop plugins and themes for Wordpress

Spin up on-demand staging environment to test out your custom plugins and themes for Wordpress

Setting up staging stack and maintaining them every time you start a theming/plugin project for WordPress can be very daunting. If you have taken the trouble of doing this every time you decided to work on a new theme or plugin, then am sure you can understand the amount of time you have spent on it.

What if Dockup took care of the chores for you, while you were having a cup of coffee?

How can Dockup help?

Dockup can automatically spin up a staging environment every time you open a PR for the theme project. This way, you will have an environment ready at your disposal, with all the changes from PR. All you have to do is, test your changes for the theme, and perhaps show it your team.

You can also deploy your branches manually on Dockup. Sounds super useful and interesting to me. Let's continue.

What you will need

  1. Source code for your theme/plugin

  2. Dockerfile

  3. And of course, Dockup

Assuming you have prior knowledge on how/where themes and plugins fits in WordPress, let me quickly setup a sample plugin for the sake of this documentation. If you don't have any current project, tag along the next step to have a simple source code which we can deploy on Dockup to test things out.

Sample Plugin

This plugin for Wordpress will append a line to each of the post that we create. This can be used to write some thanks message or a goodbye message to the end of each post.

Setup the project folder as below:

  • We have a root project folder called "ending-line-wp-plugin"

  • A file with the plugin code, "ending-line-wp-plugin/ending-line/ending-line.php"

  • Dockerfile for building images for Dockup

Project structure

Copy paste the following code in the ending-line.php file:

ending-line.php
<?php
/**
* A sample plugin that appends a line to every post
* Take this as a base plugin and modify as per your need.
*
* @package Ending Line Wordpress Plugin
* @author Codemancers
* @license MIT
* @link https://github.com/code-mancers/ending-line-wp-plugin
* @copyright 2019 Codemancers Technologies. All rights reserved.
*
* @wordpress-plugin
* Plugin Name: Ending Line Wordpress Plugin
* Plugin URI: https://github.com/code-mancers/ending-line-wp-plugin
* Description: A sample plugin that appends a line to every post.
* Version: 1.0
* Author: Codemancers
* Author URI: https://codemancers.com/
* Text Domain: ending-line-wp-plugin
* Contributors: Codemancers
*/
/**
* Adding Submenu under Settings Tab
*
* @since 1.0
*/
function add_submenu() {
add_submenu_page (
"options-general.php",
"Ending Line Plugin",
"Ending Line Plugin",
"manage_options",
"ending-line-wp-plugin",
"start_plugin"
);
}
add_action ( "admin_menu", "add_submenu" );
/**
* Setting Page Options
* - add setting page
* - save setting page
*
* @since 1.0
*/
function start_plugin() {
?>
<div class="wrap">
<h1>
A Sample Plugin Template By <a
href="https://codemancers.com/" target="_blank">Codemancers</a>
</h1>
<form method="post" action="options.php">
<?php
settings_fields ( "ending_line_config" );
do_settings_sections ( "ending-line-wp-plugin" );
submit_button ();
?>
</form>
</div>
<?php
}
/**
* Init setting section, Init setting field and register settings page
*
* @since 1.0
*/
function init_plugin_settings() {
add_settings_section ( "ending_line_config", "", null, "ending-line-wp-plugin" );
add_settings_field ( "ending-line-text", "This is sample Textbox", "get_options", "ending-line-wp-plugin", "ending_line_config" );
register_setting ( "ending_line_config", "ending-line-text" );
}
add_action ( "admin_init", "init_plugin_settings" );
/**
* Add simple textfield value to setting page
*
* @since 1.0
*/
function get_options() {
?>
<p id="tagline-description" class="description">
Provide any text value here for appending it to end of every post.
</p>
<input type="text" name="ending-line-text" class="large-text"
value="<?php
echo stripslashes_deep(esc_attr(get_option('ending-line-text')));
?>"/>
<?php
}
/**
* Append saved textfield value to each post
*
* @since 1.0
*/
add_filter ( 'the_content', 'append_content' );
function append_content($content) {
return $content.stripslashes_deep(
esc_attr(
get_option( 'ending-line-text' )
)
);
}
?>

Now let's dockerise this one. Its pretty straightforward here. All you have to do is copy this one project folder in to a plugins folder inside the "wp-content".

FROM wordpress:php7.3-apache
WORKDIR /var/www/html
COPY ending-line/ wp-content/plugins/ending-line/

Note that we are not using any scripts to start a MySQL server before we run the actual WordPress server. Dockup let's us spin up both containers separately and we will connect them via the Environment variables.

Let's create a Dockup Blueprint for this project and see how we can stage our plugin project.

We will need two containers here:

  1. MariaDB

  2. The GitHub source using which we will build image.

Make sure that you have set the env variables for the database container.

MYSQL_USER=wordpress
MYSQL_PASSWORD=password
MYSQL_ROOT_PASSWORD=password
MYSQL_DATABASE=wordpress
Container for database

Note that we are using GitHub as the source here, but you can have a pre-built image of the plugin/theme you are developing.

Also, double check the env variables that your project might need. For this one, we need three. To know what env variables are supported by WordPress, head over here

WORDPRESS_DB_USER=wordpress
WORDPRESS_DB_PASSWORD=password
WORDPRESS_DB_NAME=wordpress
WORDPRESS_DB_HOST=${DOCKUP_SERVICE_mysql}

In case you are wondering what the DOCKUP_SERVICE is, please read more about Environment Variable Substitution

Container for WordPress server

Looks good, let's test it out with a deployment!

Successfully deployed WordPress

Now, you have a staging environment ready for you to test the plugin you just wrote!

Don't forget to activate your plugin from the admin panel of WordPress. If you are following this sample app, remember to add the text to be appended to every post via Settings > Ending Line Plugin