WordPress 3.1: Show widget content in Thickbox overlay

March 7th, 2011 Posted by Public 1 comment on “WordPress 3.1: Show widget content in Thickbox overlay”

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?

Tags: , , ,
  • http://digitalrenewal.com Trisha

    Awesome this totally worked for me! Thank you
    Justin Tadlock commented on another blog that you can now call jquery and thickbox by adding this to the functions.php file:add_thickbox(); Also from another board i saw a print function array that looked promising. Its nice and clean without hiding divs, however, I dont exactly know how to replace the url with a wordpress function or if it would even work. for now i stick with your code :D’someclass thickbox’),”height=300&width=450″); ?>