How to start WordPress plugin development with Docker, Part 2: create a simple page with shortcodes

Photo by Stephen Phillips - Hostreviews.co.uk on Unsplash

Simplicity is the essence of happiness. ~ Cedric Bledsoe

I like starting blog posts with a quote and this, in particular, is amazingly true. Think for a second at the K.I.S.S. (Keep It Simple, Stupid) philosophy: it simply says that systems work better while kept… well… simple! If you’ve never heard about this principle, at first glance may appear like “this is kinda obvious” but I assure you it’s not.

Think about how many times you used a new paradigm or a new pattern and you overthought how to use it or it overengineered your project to guarantee you further maintainability or a cleaner structure but… it doesn’t.

Shortcodes

A Shortcode is the simplest way to “bind” a page content to a PHP function. In short, this means that you simply write a shortcode in the editor, with your parameters (if anyone) and it will do the trick!

But how shortcodes work?

[shortcodeName parameter1="value1" parameter2="value2"]

And how to register them?

add_shortcode('shortcodeName', 'functionName');

And how to handle them?

function functionName( $attributes ) {
    // do the magic
}

Super easy!

Shortcodes and our boilerplate

We want to keep our boilerplate logic consistent, this means that we must follow the plugin flow to add our shortcode. But plugin boilerplate currently, doesn’t support shortcodes, which means that we must add the shortcode support to it! Actions and filters are currently supported and loaded via the bundled loader in includes/class-*-loader.php. Filters and actions are here stored in two separate arrays and then applied when the run method is called, so to add shortcodes we should simply add this:

/**
  * The array of shortcodes registered with WordPress.
  *
  * @since    1.0.0
  * @access   protected
  * @var      array    $shortcodes The shortcodes registered with WordPress to fire when the plugin loads.
  */
 protected $shortcodes;
/**
  * Add a new shortcode to the collection to be registered with WordPress
  *
  * @since     1.0.0
  * @param     string        $tag           The name of the new shortcode.
  * @param     object        $component      A reference to the instance of the object on which the shortcode is defined.
  * @param     string        $callback       The name of the function that defines the shortcode.
  */
 public function add_shortcode( $tag, $component, $callback, $priority = 10, $accepted_args = 1 ) {
    $this->shortcodes = $this->add( $this->shortcodes, $tag, $component, $callback, $priority, $accepted_args );
 }

The add shortcode will enqueue our shortcode in the shortcodes array and all the method parameters are the same from the WordPress documentation, so nothing new here!

And improve the run method this way:

/**
  * Register the filters and actions with WordPress.
  *
  * @since    1.0.0
  */
 public function run() {
    // other stuff...
    foreach ( $this->shortcodes as $hook ) {
       add_shortcode( $hook['hook'], array( $hook['component'], $hook['callback'] ), $hook['priority'], $hook['accepted_args'] );
    }
}

Registering our first shortcode

Now that our loader is ready to handle shortcodes, we just need to register them in the core class in includes/class-*.php.

So get straight to the define_public_hooks and add our shortcode this way:

$this->loader->add_shortcode( 'hello_from_kalizi', $plugin_public, 'shortcode_hello' );

This means that our shortcode will be hello_from_kalizi and that it will be handle by the $plugin_public via its method shortcode_hello. So the only step we’ll have to do is to define the method in public/class-*-public.php.

The frontend folder structure is the same as the admin side, this means that we have a partials folder where all the views are stored. For testing purposes, I’ll edit the file in there just by putting a “Hello world from Kalizi”.

And finally, I’ll define my method this way:

public function shortcode_hello($attributes) {
    include 'partials/kalizi-hello-world-public-display.php';
}

Say hello, shortcode

Now that our plugin is ready to handle the shortcode, we just need to create a new page and add it! So just get to the page section in WordPress and create a new page. Once you’re in the editor look for shortcodes to add them to your page.

Adding shortcode component

And after the shortcode is picked, we have to say WordPress that the shortcode is the previously declared one, so [hello_from_kalizi].

Shortcode added (remember the brackets)

And if everything went good, after publishing the page, you should see the hello world!

Hello world, from shortcode!

Ok, the theme I picked wasn’t very stylish but we can work on it!

The first step is done!

Photo by Volodymyr Hryshchenko on Unsplash

As I said in the previous episode of this series, the WordPress world is really big and has lots of things you can do in very different ways. Shortcodes are an easy way to handle pages content with few codes, they’re very powerful.

If you have any question about this part, want to know more about wp-admin or have a question about plugin development, please leave a comment down below. 💬

Stay tuned for the next articles of this series, we’ll deep into the boilerplate, talk about how to do something on the public part, how to use ajax or your favourite JS framework or libraries, and much more stuff! Let me know if you want me to focus on some aspects of the WP Plugins development and have a nice day! ☕️