How to use jQuery UI elements in the WordPress admin interface

One thing I’ve been struggling with was to use jQuery UI elements in my plugins, for example jQuery UI Tabs. Even though the libraries are included with WordPress, I couldn’t get them to work.

Thanks to Pippin’s Plugins I could figure it out – thanks, Pippin!

My initial mistake was the way I created the admin page. WordPress provides so called wrapper functions that make creating an admin page very easy. For example, adding an admin page under the Dashboard works like this:

Check the WordPress Codex for detailed explanations on how to create other pages:

Even though this works fine, it’s not quite possible to enqueue scripts inside pages created like that – which is why it wasn’t working for me. Instead, as Pippin points out, you can create admin pages in a more complex fashion:

The reason for this extra complexity is that now we have a global reference to our menu page. This is important, because now we can

– use that reference to call scripts, and
– make sure we load our scripts only in our own admin page, not in every admin page there is

The latter point is rather important: just image what would happen if my scripts are loaded on every possible admin page, potentially causing problems with many other plugins and core functions.

I know this is complex stuff, so please bear with me before we start loading those builtin scripts. Because before we do, we probably have a js file of our own we want WordPress to load on our admin page. To make that possible, we’ll have to register it first, like so:

Nothing is happening just yet, other than WordPress being aware that a new script has been registered and is ready for use if enqueued.

With our reference at hand, and our own script registered, let’s enqueue all the scripts we need to make our admin page look smashing. For this example, I’ll use jQuery UI Tabs, and of course my own custom-starter-script:

You can find a list of libraries included in WordPress and their respective enqueue codes here:

If we’d build an interface without WordPress we’d also have to load the jQuery library (as jQuery UI needs it to work), however there’s no need for it when we’re using WordPress because it’s clever enough to load dependencies for us. Neat, huh?

Full Project Code

All that’s left now is to display the HTML for our tabs inside the main function. Rather than pasting that here, take a look at a full working project I’ve posted to GitHub called Plugin Starter. The code is well documented and contains links to further reading too.

I think I would never have understood this concept had it not been for Pippin’s excellent explanations, with many “how not to” examples. Check out his post here:

Loading Scripts Correctly in the WordPress Admin

Now go forth and create many funky admin interfaces for themes and plugins!

About Jay Versluis

Jay is a medical miracle known as a Super Survivor. He runs two YouTube channels, five websites and several podcast feeds. To see what else he's up to, and to support him on his mission to make the world a better place, check out his Patreon Campaign.

1 thought on “How to use jQuery UI elements in the WordPress admin interface

Add your voice!