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.
- 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');
- 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>