O Thickbox é o recurso responsável por exibir as janelas de conteúdo, modais, caixas de diálogo, popups que o WordPress possui. Esse recurso pode ser facilmente utilizado também por um Tema ou Plugin personalizado bastando ao desenvolvedor incorporar os arquivos do Thickbox e respeitar a estrutura dos códigos HTML necessária ao funcionamento do recurso.

A inserção dos arquivo .js e .css pode ocorrer de duas formas diferentes. A primeira é através das funções de incorporação de estilos e scripts:

wp_enqueue_style( 'thickbox' );
wp_enqueue_script( 'thickbox' );

A outra forma é simplesmente disparar a função add_thickbox onde se deseja incorporar o recurso.

add_thickbox();

Pronto! O Thickbox já pode ser utilizado. Após incorporar seus códigos, a exibição de conteúdo dentro do modal ocorre em links que estão marcados com a classe thickbox.

<a class="thickbox" href="http://seusite.com.br/wp-content/uploads/2017/10/31/imagem.jpg">Exibir imagem dentro do Thickbox</a>

Essa funcionalidade usada pelo WordPress permite exibir itens em formato de galeria, onde é possível utilizar a navegação para ir de um arquivo a outro que esteja com o Thickbox aplicado. Esse recurso de galeria requer a inserção do atributo rel na tag HTML do link.

<a class="thickbox" rel="custom" href="http://seusite.com.br/wp-content/uploads/2017/10/31/imagem-1.jpg" title="Imagem #1">Exibir Imagem #1</a>
<a class="thickbox" rel="custom" href="http://seusite.com.br/wp-content/uploads/2017/10/31/imagem-2.jpg" title="Imagem #2">Exibir Imagem #2</a>
<a class="thickbox" rel="custom" href="http://seusite.com.br/wp-content/uploads/2017/10/31/imagem-3.jpg" title="Imagem #3">Exibir Imagem #3</a>

Imagens externas ao site também são aceitas, basta encaminhar o endereço completo da imagem; um link direto mesmo. Informando o atributo title para o link, esse conteúdo passa a ser apresentado como título do modal.

<a class="thickbox" title="Logo do WordPress" href="https://s.w.org/about/images/logos/wordpress-logo-stacked-rgb.png">Exibir logo do WordPress</a>

Outros dois formatos são possíveis de serem exibidos dentro da caixa de diálogo do Thickbox no WordPress; o iframe e conteúdos internos da página. A exibição de um iframe requer o link para o atributo src do iframe seguida da instrução TB_iframe=true. Em adição a esse parâmetro, as dimensões de largura e altura precisam ser informadas da seguinte maneira:

<a class="thickbox" title="WordPress 4.7" href="https://www.youtube.com/embed/KiS8rZBeIO0?TB_iframe=true&width=560&height=315">WordPress 4.7</a>

O conteúdo interno da página segue o mesmo padrão. O link deve informar na propriedade href a instrução #TB_inline seguida do parâmetro inlineId que deve receber o id do conteúdo que será inserido dentro da janela. Requer a inserção das dimensões assim como para o uso do iframe.

<div style="display: none;"><p id="meu-modal">Conteúdo interno</p></div>
<a class="thickbox" href="#TB_inline?inlineId=meu-modal&width=480&height=360">Conteúdo da div oculta</a>