WordPress + Thickbox Requires Markup

I’ve been fighting with getting the contents of a WordPress page to display within Thickbox.

The great thing about WordPress, is that wiring this up is super straight forward.

  1. Tell WordPress you want to use thickbox in your theme by adding it to the functions.php file
    function init_theme_method() {
    add_thickbox();
    }
    add_action('init', 'init_theme_method');
  2. Update the paths to the thickbox images (cause WordPress can still get confused about something sometimes)
    <script type="text/javascript">
    if ( typeof tb_pathToImage != 'string' )
    {
    var tb_pathToImage = "< ?php echo get_bloginfo('url').'/wp-includes/js/thickbox'; ?>/loadingAnimation.gif";
    }
    if ( typeof tb_closeImage != 'string' )
    {
    var tb_closeImage = "< ?php echo get_bloginfo('url').'/wp-includes/js/thickbox'; ?>/tb-close.png";
    }
    </script>

The I spun up a get_post_content function:
function get_post_content($post_id) {
global $wpdb;
$data = $wpdb->get_results("SELECT * FROM $wpdb->posts WHERE ID=$post_id");
return $data[0]->post_content;
}

and added it as a hidden div in my footer.php
<div id="about" style="display:none;">
<?php echo get_post_content($id); } ?>
</div>

and created a link to launch the thickbox <a href="#TB_Inline?inlineId=about" class="thickbox"</a>

But it was blank.

Empty.

Nothing in the box.

Turns out thickbox requires some markup – any markup – within the requested inlineId.

<div id="about" style="display:none;">
<p><?php echo get_post_content($id); } ?></p>
</div>