Jes.Gs v2.0 » fixes http://www.jes.gs The Portfolio and Blog of Minneapolis Web Designer Jessica C. Green Sat, 21 Jan 2012 19:56:25 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Fixing ThickBox in WordPress 2.8 http://www.jes.gs/htmlcss/how-to-fix-thickbox-in-wordpress-2-8/ http://www.jes.gs/htmlcss/how-to-fix-thickbox-in-wordpress-2-8/#comments Sat, 12 Sep 2009 20:45:49 +0000 Jess G. http://dumpster-fairy.com/?p=324 If you’re using ThickBox then you’ve probably noticed that ThickBox is technically broken in WordPress 2.8. After trial-and-error, I’ve tracked down the problems and this is what’s happening and here is how to fix it.

Edit: February 27th, 2009. Finally had to time to check but the missing ThickBox CSS is still a problem in WordPress 2.9. My guess is that it might not be an actual bug but a feature to accommodate designers creating their own custom ThickBox designs.

WordPress 2.8 requires themes to have wp_footer()

WP 2.8 introduced a new option when using wp_enqueue_script() to load JavaScript files. It allows you the option of having the scripts load in the footer, which is why WordPress themes now require wp_footer() to work properly. However, that wasn’t my problem since I’d always added wp_head(), wp_meta() and wp_footer() as a matter of course when designing themes. So if the absence or presence of wp_footer() wasn’t the problem, then what was really going on?

What’s with ThickBox anyway?

Now, for the problem with ThickBox. So we know that it is being loaded, just in the footer. What I have found is that WordPress is not loading all of the files that ThickBox needs to work. jQuery is being loaded, so that can be ruled out. What isn’t being loaded is the CSS file that ThickBox needs to format its popup window. Also, another part of the problem is the ThickBox.js file itself has the paths to the images it needs set to relative paths.

How we fix it

Starting off, if you haven’t added the code to load ThickBox, go ahead and add wp_enqueue_script( 'jquery' ) and wp_enqueue_script( 'thickbox' ) to your header. Now what we do is we add wp_enqueue_style(‘thickbox’) to our <head> section. I’ve seen people asking for wp_enqueue_css and “lamenting” the fact there isn’t such a function but there actually is, it is wp_enqueue_style(). The second part requires adding to an existing functions.php file or creating a functions.php if it doesn’t exist with your current theme. In your functions.php file, copy and paste this code:

add_action('wp_footer', 'load_tb_fix');
 
function load_tb_fix() {
	echo "\n" . '<script type="text/javascript">tb_pathToImage = "' . get_option('siteurl') . '/wp-includes/js/thickbox/loadingAnimation.gif";tb_closeImage = "' . get_option('siteurl') . '/wp-includes/js/thickbox/tb-close.png";</script>'. "\n";
}

This fixes those first few lines of the ThickBox.js file that calls the images that ThickBox uses, and it is inserted in the footer after the call that inserts the reference to ThickBox.js.

So now, ThickBox functionality should be restored. Quick recap:

  1. Add the code below to your <head> section: 
    <?php
wp_enqueue_script( 'jquery' );
wp_enqueue_style( 'thickbox' );
wp_enqueue_script( 'thickbox' );
?>
  2. Then add this code to your functions.php file: 
    1
2
3
4
5
6
7
8

    <?php
 
add_action('wp_footer', 'load_tb_fix');
 
function load_tb_fix() {
	echo "\n" . '<script type="text/javascript">tb_pathToImage = "' . get_option('siteurl') . '/wp-includes/js/thickbox/loadingAnimation.gif";tb_closeImage = "' . get_option('siteurl') . '/wp-includes/js/thickbox/tb-close.png";</script>'. "\n";
}
?>

Conclusion

Had do some research to figure out what was going on besides just looking at my own source code. The first reference to this issue I found was at this link: ThickBox and jQuery in WordPress 2.8, then I figured out how to fix the ThickBox dependency image loading issues by looking at the code for the NextGen Gallery plugin.

Good luck! And enjoy your restored ThickBox functionality ;-)

]]> http://www.jes.gs/htmlcss/how-to-fix-thickbox-in-wordpress-2-8/feed/ 12