jQuery UI Dialog Demo/Example for WordPress

October 2017

Abstract: jQuery UI has been included with WordPress since version 3.3. However, not only is the necessary CSS not included (the CSS is required for some functionality), documentation within the WordPress documentationis also rather sparse. Code is provided to enqueue both jQuery UI and the missing CSS correctly, as well as providing a method for making jQuery UI Dialog responsive.

Open-source software is excellent. Apache web servers, Linux, PHP, mySQL databases … These are what the internet is built on. MacOS in various forms originated as FreeBSD, a version of the Linux operating system. And WordPress itself, also open-source, powers more blogs and web sites than anything else.

But there’s a problem. Open-source developers write documentation for each other. It’s not often that users can really figure out what’s going on, especially beginning users. And when they try to get into the guts of some of it to do their own thing, they end up completely lost.

When it comes to documentation, jQuery UI is different. Their documentation pages are filled with rock-solid examples and demos. For eample, this page presents the Dialog functionality as a modal popup dialog that the underlying page then responds to. (Modal means the Dialog is on top of the page that called it.) Clicking on the “view source” link on that page opens the code for the page itself.

The question though is, how does one use this Dialog within a WordPress site? And if you’re building your first plugin for WordPress, how do you ue it with the Admin pages?

Searching for this info within the WordPress docs lands you on this page, which is the technical version of how to use wp_enqueue_script. The list of jQuery UI handles mentioned on that page has a link for jQuery UI Dialog … which goes right back to the jQuery UI demo page, which doesn’t address WordPress at all.

Before we go any further, if you’re only looking to use jQuery UI on your WordPress site for visitors, just install the jQuery UI Widgets plugin from David Gwyer. Follow his instructions and you’ll be set.

If, however, you’re writing a plugin and need to use jQuery UI, the following is for the modal Dialog portion of it. You can then modify this as needed to use any other aspects of jQuery UI.

Enqueue jQuery, jQuery UI, and jQuery’s CSS

The jQuery UI modal Dialog demo is intended to describe how to use the functionality on pages outside the WordPress environment. Within WordPress though, it’s simple to get that same functionality without retrieving the Javascript from outside sources. You’ll need to call what you need while you’re enqueuing the rest of the functionality for your Admin pages. This function includes jQuery and jQuery Core from within WordPress, along with the jQuery UI portions we need for our plugin. Other functions are commented out.

WordPress has yet to include the jQuery UI CSS. This CSS actually provides some functionality for jQuery UI, and is required for proper operation. What’s interesting though is that their CSS provides themes. You can link to their online theme CSS files (we’re using the Base theme), or build your own using their ThemeRoller and include it with your plugin. You do need to do one or the other though.

Note that this code references a local file, js/jquery-ui-custom.js, We’ll get to that next.

js/jquery-ui-custom.js File

Next, we’ll pull the Javascript that does the custom work out of the jQuery UI Dialog source and save it as jquery-ui-custom.js in a subfolder we’ll name “js” in our plugin files. This is a simple copy-and-paste of the code between the script tags within their source code. This is part of the code you’ll need to modify for your own purposes.

Note that this includes code stolen from Nate Finch on making the Dialog responsive for use on tablets and smart phones. I could have figured this out, but he already did.

HTML Page

Once the foundation pieces are in places, it’s a matter of dropping the HTML code from the demo page into your Settings page in the Admin portion of the plugin you’re building. You could also include this in a callback function if you’re using the WordPress API to build your Settings pages. This is the other section of code you’ll need to modify for your own purposes. This only recreates the jQuery UI Dialog modal demo, nothing more. The rest is up to you.