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 🙂

Subscribe
Notify of
guest
9 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Linda
Linda
5 years ago

Great work on the plugin. I was really looking for something like this. However, when I add the shortcode to a page and view the page…I just see the shortcode. I tried it on multiple sites, but the same problem occurs. Is this a known problem? Is there a way to solve it?

shift8web
shift8web
5 years ago
Reply to  Linda

Thats strange indeed! I’ll email you directly to see if I can help resolve this for you.

Andy
Andy
5 years ago
Reply to  shift8web

It’s the same with me.. I just see the shortcode itself. Would be pleased if you help me with this 🙂

EDIT: I found it.. in your example its [shift8-modal] but it should be [shift8_modal]

Thanks for the superb plugin guys!!! 🙂

shift8web
shift8web
5 years ago
Reply to  Andy

Andy – good catch! I’ll push out an update to the plugin documentation today! So sorry for the confusion 🙂

Andy
Andy
5 years ago

I need a help with another thing though. I am using your navbar and when I open the modal, it stays behind the navbar. How can I put the modal on top when it’s opened. Maybe with CSS, but what is the css class of the modal window? Thanks in advance!

shift8web
shift8web
5 years ago
Reply to  Andy

Andy – can you send me a link to your site where this is happening? I can definitely help with this.

Andy
Andy
5 years ago
Reply to  shift8web

http://www.mavrov.com (at the bottom of the website) – I’m now experimenting with everything and it is not near completion. I have an idea how it should look, but am struggling with making it because my hobby is graphic design and photography 🙂 It would be better if we can communicate by mail or something if you are willing to help me of course 🙂 Will be very thankful!

shift8web
shift8web
5 years ago
Reply to  Andy

Sure – I’ll email you directly

nimo-tiger-562
nimo-tiger-562
1 year ago

Do you know where how I could use this with the Essential Grid plug-in, in WordPress?