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.

“Surely, this is already in WordPress.”Corey Salzano

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 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.


Comments

2 responses to “Thickbox.js: a modal API hidden in WordPress core”

  1. Hi,
    sorry, but how should I use it? Where should I paste it? Thank you!
    I

  2. Instructions for ThickBox are here https://codex.wordpress.org/Javascript_Reference/ThickBox

    The JavaScript I shared in this post allows you to use height and width values like “50%” while using ThickBox.