Nearly every WordPress Theme benefits from a dynamic structure of shortcodes. The little piece of code gives one extra control over the layout ,allowing editor to put the structured content whenever needed.

Their flexbility lets one reuse common content and create several differently layouted pages.Ā The siteĀ benefits fromĀ dynamic and interestingĀ content.

We’re going to present you with a simple, yet powerful way of creating shortcode popup windows which generate the and place the shortcode in the editor. This removes the hassle of having to put everything manually which is error prone.

Prerequisities for the Shortcode popup

First we need to create the shortcode itself. To improve the readability we’ll use the powerful method of output control, which is described in theĀ Use output control with shortcodes WP doin post.

Let’s assume we have a simple shortcode which creates an element with two headings and a short description.

Toggle Code

Into the Media Buttons

Now we’ll need to add a button the Media Buttons toolbar and a corresponding input elements that will show up on the button click, we’ll do so with the following two hooks.

Toggle Code

The above code seems quite complex due to it’s length. However there’s nothing to worry about as most of the code is the custom CSS and HTML markup to style theĀ overlay. The important thing to bear in mind are the id attributes of the divs and input elements. The former is used for the TinyMCE overlay window as the identificator of what popup to show upon the shortcode clik.
The latterĀ isused by the custom JavaScript which populates the content with values from input elements.

End effect

With the code in place will finish with the following.

Media Button Shortcode

Media Button Shortcode

After clicking the shortcode button we’ll end up with a nice overlay window. When filled it willĀ create the shortcode markup for us.

Shortcode Overlay

Shortcode Overlay

We believe that getting familiar with custom shortcode overlay popups givesĀ one a serious advantage in User Experience. The ones that not provide these and require the end user to place everything manually are hard to manage.

The following two tabs change content below.
WordPress Blogger, Certified Codeable Expert Developer, Senior WordPress developer. Having worked with WordPress for over 8 years creating plugins, themes and WordPress based applications. I am contributor, CodeCanyon creator and YouTuber.