WordPress plugin to create animated full screen modal flyouts


We have recently created & submitted our first official WordPress plugin : Shift8 Modal.

This is a relatively straightforward plugin that integrates the animatedModal jQuery library into WordPress as an easy-to-use shortcode.

Submitting our plugin to the WordPress plugin directyl took roughly 7 days to complete. WordPress has pretty straightforward (though sometimes changing) development policies, standards and best practices to follow. Once approved, a WordPress team member provides SVN access to submit / commit your code to the plugin directory.

This plugin is pretty simple in terms of what it does, but I’ll break down what it does.

Load animatedModal.js and Animate.css

The animatedModal library makes use of the (popular) Animate.css library as well. So we’ll need to load both as an enqueue within the plugin :

Without the above files, the entire plugin will not function properly. Depending on what other libraries you are using, you might want to change the enqueue priority to accommodate.

Shortcode Options

The next thing that we want to do is define the function that will handle the remaining parts of the plugin. The shortcode is how the end-user will be triggering the plugin, loading the call button and the modal jQuery and HTML markup to generate everything that is needed.

While plans to expand the plugin with more diverse and useful options is in the works, we decided to start off with a few simple options :

The options indicated above are self explanatory. Options of note are the animatedIn and animatedOut shortcode options. These are the Animate.css animation options for triggering the full screen modal window and for closing the window itself (when the close button is triggered).

The other main option of node is the post_id option. This modal system pulls post content from a post that you have created. You simply have to identify the ID number of said page/post and the plugin will get the content body and inject it into the modal content body area. This means that you can use WordPress’ built-in WYSIWYG editor to format and style your content ahead of time. This gives you the flexibility to integrate your own styling and formatting in 90% of the generated content that is used by this plugin.

An idea for an option down the line would be to provide the option to use raw HTML input as a content source which would give even more flexibility.

Sanity Checks

Before we process the shortcode options, we want to ensure the key options provided are proper & valid before processing the rest. This goes in line with best practices as well as within a security context.

We simply will not proceed and return with an error if the post_id option is not numberic or if the field is empty. Second to that , if the post_id option uses an ID number that is not an active or valid post within WordPress, the plugin will exit and return an error.

There is always more sanity checks and more filtering that one could do, but given the simple nature of this plugin we thought it was more than enough.

Filter shortcode options for security

Continuing on the sanity and security best practices, the remaining shortcode inputs for our plugin are filtered using built-in wordpress functions designed just for these types of scenarios.

We are using two different WordPress filtering functions : esc_html and esc_js.

Both functions are designed to escape certain characters, quotes and whatnot within the context of the expected input. As the function names imply, they are intended to escape html special characters, single quotes and HTML blocks respectively.

This is an important note to make because not everyone that may be using this shortcode will be a WordPress administrator. Different user roles and subscribers may be able to generate this shortcode and its important to protect as best as one can against escaping via an attack vector (a shortcode option input) and changing the code to do something else.

Get the post content

While this function is very simple (and widely used), it deserves its own section

We are getting the post content and assigning it to a variable called $modal_content to be used later in the markup generation portion of the function. Its possible to use the alternate WordPress function sanitize_post() to be even more restrictive.

It was decided to not use that function in order to give as much flexibility as possible to the end-user. Limiting the styling and post content fields could mean that this plugin actually becomes less useful because its more difficult to make the output actually look good.

Shortcode Output

The last part of this plugin’s function is for it to generate the markup in order for the system to work. We take the post content that we loaded in the above snippet and generate the markup needed to render the animated Modal.

You can see in the above markup that we are simply encapsulating the dynamic content generated either by shortcode options or post content pulled from shortcode options. We are using static and dynamically generated CSS classes, so that you can style all of the plugin output or specific plugin output.

Additionally the jQuery is being generated below the markup in order to utilize the animatedModal.js library. Because this is generated with dynamic selectors, IDs and Classes , you can technically have as many multiple shortcodes on the same page (provided they all use different post_id options).

We hope you like this plugin! There are more that will be submitted to the WordPress plugin directory in the near future 🙂