Follow these steps to add thickbox support to your WordPress site and display the contents of a widget in the thickbox overlay.

High Level Process:

1. Add thickbox support to WordPress theme
2. Register Custom widget
3. Reference widget in theme code
4. Add widget content

Step 1: Add thickbox

There are a number of WordPress plugins for thickbox that should do this for you, however I was unable to get them to work on WordPress 3.1 and not automatically change image behavior.  In this case I want to control when thickbox is used.

1. Get thickbox code at thickbox website http://jquery.com/demo/thickbox/

2. Add reference to js file in header of theme

Path: <root>/wp-content/themes/<your theme>/header.php

Standard

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/thickbox.js"></script>

Compressed

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/thickbox-compressed.js"></script>

2.  Create “js” folder and save thickbox.js or thickbox-compressed.js to the folder and upload to your server (also jquery if this does not already exist)

Path: <root>/wp-content/themes/<your theme>/js/

3. Add reference to thickbox.css OR add thickbox styles to your existing style sheet

Step 2: Register Custom Widget

Path: <root>/wp-content/themes/<your theme>/functions.php

Standard

if ( function_exists('register_sidebar') ) {

register_sidebar(array(
'name' => 'Contact Links',

));
}

Step 3. Add link to custom widget with thickbox tags and add custom widget reference:

Path: <root>/wp-content/themes/<your theme>/header.php

NOTE: Could be any page in your theme, in this case the link is in the header of the theme.

<a href="#TB_inline?height=400&width=600&inlineId=contact-links"
title="link title">Link</a>

Path: <root>/wp-content/themes/<your theme>/footer.php

NOTE: Could be any page in your theme, in this case I wanted on all pages but at the bottom of the code for SEO.

<div id="contact-links" style="display:none;">
<div>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Contact Links') ) : ?>
<?php endif; ?>
</div>
</div>

Step 4. Add widget content in Appearance > Widgets in administration UI

If you added the reference correctly you should see the following:

Add any widget content you wish, in this case a custom text widget was used.

Step 5: Test

Your setup is now complete, upload all new files and test your new thickbox link.  If needed add CSS to style the widget and change the height, width parameters on the link.

Let me know if this works for you or if I can be of assistance.  Also, is there an easier way to do this?  A plugin maybe?