Thickbox.js: a modal API hidden in WordPress core

Yesterday, I needed to create a modal, but I didn’t want to create a modal. I thought, “Surely, someone has done this to a level of completion that will both satisfy my need and exceed the amount of effort I am prepared to invest in this thing that should already exist.” Building blocks, etc.

So, I went looking for a modal in WordPress core, and I was delighted when I found one. Thickbox is JavaScript library that was created more than one decade ago and began shipping with WordPress in 2008.

Why Thickbox in WordPress is great

  1. It’s a modal API built into core
  2. It’s a simple white box with an optional title, close button, and no offensive styling
  3. You don’t have to build it

Perhaps Also Not Great

I quickly noticed one shortcoming of the implementation. There is no way to specify the height and width of the modal using percentages. The values are required to be supplied in pixels, unless you use this JavaScript I wrote that enables the use of percentages:

Thickbox’s fate as a part of WordPress core is questionable. Here’s a six year discussion of whether it should still be included, and WordPress core also bundles jQuery UI Dialog via the ‘jquery-ui-dialog’ script handle.

Even if WordPress core drops this library in a future version, a plugin could be written to maintain compatibility. Today, I prefer thickbox because its implementation is so simple.