A Full WordPress Plugin Example — Part 2 Shortcode

In this part, we will add our own shortcode for the plugin GCMovie created in part 1. The process involves implementing a shortcode parser function and registering it to the shortcode.

We add a new file named gcmovie-shortcode.php in the plugin folder. Now the plugin folder structure looks like this:

gcmovie/        // The plugin folder
    gcmoive.php // The main plugin file
    inc/
        gcmovie-shortcode.php  // Shortcode
    assets/     // Resoure folder        
        css/
            gcmovie-admin.css  // Styles for admin pages
            gcmovie-puglic.css // Styles for public pages

Create Shortcode Class

Add below code to gcmovie-shortcode.php file.

<?php
/*
 * Shortcode for GCMovie
 */

if ( ! defined( 'WPINC' ) ) {
    die( 'No direct access.' );
}

class GCMovie_Shortcode {
}

Next we will define some functions inside the class GCMovie_Shortcode.

Register Shortcode

We registers a callback parse_shortcode() to shortcode gcmovie in a static function.

   static function init() {
        $gcmovie_shortcode = new GCMovie_Shortcode;
        add_shortcode( 'gcmovie', array( 'GCMovie_Shortcode', 'parse_shortcode' ) );
    }

Parse Shortcode

In the callback, it takes care of parsing the shortcode and then returning the corresponding contents.

    /**
     * Shortcode, support the following attributes:
     * - id, (Required) The ID of the GCMovie post.
     * - show_thumbnail (Optional) Whether to show the thumbnail, the default value is true.
     */
    static function parse_shortcode( $atts ) {
        if ( ! isset( $atts['id'] ) ) {
            return '';
        }

        $shortcode_atts = shortcode_atts(
            array(
                'id'             => 0,
                'show_thumbnail' => true,
            ),
            $atts,
            'gcmovie'
        );

        $post_id = intval( $shortcode_atts['id'] );
        $post = get_post( $post_id );
        $app = GCMovie::get_instance();

        ob_start();
        ?>
        <h4><?php echo $post->post_title; ?></h4>
        <div class="gcmovie-box">
        <?php
        if ( $shortcode_atts['show_thumbnail'] ) {
        ?>
            <div class="post-thumbnail top">
                <a href="<?php echo get_post_permalink( $post ); ?>">
                    <?php echo get_the_post_thumbnail( $post ); ?>
                </a>
            </div>
            <div class="bottom">
               <?php $app->display_movie_information( $post_id ); ?>
            </div>

        <?php
        } else {
            $app->display_movie_information( $post_id );
        }
        ?>
        </div>
        <?php

        return ob_get_clean();
    }

The shortcode gcmovie accepts two attributes:

• id — Integer (required). the ID of a movie post.
• show_thumbnail — Bool (optional). Whether to show the movie tailer. It is true by default.

We get content from database through the parsed ID and construct the HTML content to be returned. Here we show the movie title, the tailer if show_thumbnail is true, and three custom filed contents using display_movie_information defined in the main plugin file.

Let’s look at what these functions do in the code above.

shortcode_atts combines user attributes with all the known attributes and fill in defaults when needed.

ob_start() and ob_get_clean() are a couple of PHP methods that ob_start() turns output buffering on (That means no output is sent from the script other than headers, instead the output is stored in an internal buffer.) and ob_get_clean() returns the contents of the output buffer.

Call init method

At the end of the file outside GCMovie_Shortcode class, remember to call its init() to enable shortcode.

class GCMovie_Shortcode {
    //...
}

GCMovie_Shortcode::init();

Include Shortcode File in Plugin Main File

Add below code to the bottom of gcmovie.php to make the code take effect.

gcmovie.php

//...
GCMovie::init();
require_once GCMOVIE_PLUGIN_DIR . 'inc/class-gcmovie-shortcode.php';

Now you can add a shortcode in a post such as gcmovie id=123 (Wrapped in []). Below is an example of a shortcode in a post.