Blog Post Icon
Blog
06/17/2016

WordPress plugin to create animated full screen modal flyouts

Hello!

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 :

// Load Animated Modal
function shift8_modal_scripts() {
        wp_enqueue_script( 'animate-js', plugin_dir_url( __FILE__ ) . 'js/animatedModal.min.js', array(), true );
        wp_enqueue_style( 'animate', plugin_dir_url( __FILE__ ) . 'css/animate.min.css' );
}
add_action( 'wp_enqueue_scripts', 'shift8_modal_scripts', 12 );

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.

// Shortcode for menu overlay system
function shift8_modal_shortcode($atts){

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 :

        extract(shortcode_atts(array(
                'post_id' => '',
                'close_modal' => 'CLOSE MODAL',
                'call_modal' => 'DEMO',
                'call_type' => 'button',
                'animatedIn' => 'lightSpeedIn',
                'animatedOut' => 'bounceOutDown',
                'color' => '#3498db',
                'title' => 'Overlay Modal'
        ), $atts));

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.

        // Cant proceed without post_id
        if (empty($post_id) || !is_numeric($post_id)) {
                return 'You must enter a post ID number for the shortcode to work!';
        }

        if ( FALSE === get_post_status($post_id)) {
                return 'The post ID you entered isn\'t valid!';
        }

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.

                // Clean vars
                $call_modal = esc_html($call_modal);
                $close_modal = esc_html($close_modal);
                $animatedIn = esc_js($animatedIn);
                $animatedOut = esc_js($animatedOut);
                $color = esc_html($color);

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

                // Grab content from post id
                $modal_content = get_post($post_id, $filter = 'display');

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.

                // Prepare output
                $modal_output = $close_modal_output;
                $modal_output .=  '
'.$close_modal.'
'.$modal_content->post_content.'
'; $modal_output .= ''; return $modal_output;

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 šŸ™‚

At Shift8, we cater to all sorts of businesses in and around Toronto from small, medium, large and enterprise projects. We are comfortable adapting to your existing processes and try our best to compliment communication and collaboration to the point where every step of the way is as efficient as possible.

Our projects are typically broken into 5 or 6 key “milestones” which focus heavily on the design collaboration in the early stages. We mock-up any interactive or unique page within your new website so that you get a clear picture of exactly how your design vision will be translated into a functional website.

Using tools like Basecamp and Redpen, we try to make the process simple yet fun and effective. We will revise your vision as many times as necessary until you are 100% happy, before moving to the functional, content integration and development phases of the project.

For the projects that are more development heavy, we make sure a considerable amount of effort is spent in the preliminary stages of project planning. We strongly believe that full transparency with a project development plan ensures that expectations are met on both sides between us and the client. We want to ensure that the project is broken into intelligent phases with accurate budgetary and timeline breakdowns.

Approved design mock-ups get translated into a browse-ready project site where we revise again and again until you are satisfied. Client satisfaction is our lifeblood and main motivation. We aren’t happy until you are.

Need Web Design?

Fill out the form to get a free consultation.

shift8 web toronto – 416-479-0685
203A-116 geary ave. toronto, on M6H 4H1, Canada
Ā© 2023. All Rights Reserved by Star Dot Hosting Inc.

contact us
phone: 416-479-0685
toll free: 1-866-932-9083 (press 1)
email: sales@shift8web.com

Shift8 Logo