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:
- Add the code below to your <head> section:
<?php wp_enqueue_script( 'jquery' ); wp_enqueue_style( 'thickbox' ); wp_enqueue_script( 'thickbox' ); ?>
- 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 
I’ve followed your instructions laid out in the Quick Recap but thickbox is not working for me yet. I’m using the Compromise theme for wordpress and I installed the thickbox plugin. Do I need to fix my theme? If so, where do I make ammendments?
As far as I know, you shouldn’t need any plugin to use ThickBox with WordPress at least since versions 2.7 and 2.8, which have the functionality built in. The fixes I outlined really should be all you need to do. It might be that the plugin you have installed and the fix are conflicting with each other. Have you tried disabling the plugin? Other than that, I can’t really suggest anything else :\
Although, if you haven’t already, check and make sure your theme has
wp_head()andwp_footer()included. Specificallywp_footer()since that was part of the problem that most folks were having with ThickBox; this post just outlines the other part of the problemI tried disabling the plugin to see if the two things were conflicting… no dice. I have wp_head() in my header.php file and wp_footer() in my footer.php files respectively. Does all this sound right? After this, I’m at a loss in knowing what direction to take to solve this problem.
Yep, that’s right. Another thing to consider is are you including
class="thickbox"on the links to your images? And, slight oversight on my part but are you usingwp_enqueue_script( 'thickbox' );to load the script? Try this:Two thumbs up. Lastnight I was going insane as I could not get thick box to work for the plugin I am building.
Thanks mate.
Hey thanks
thanks for the info!
i was going nuts trying to figure out why thickbox images wouldn’t load. i knew it was a relative path issue, just couldn’t figure it out.
thanks again.
Is it still broken in version 2.9.1? Could this be the reason I am getting errors on pages in IE8 and Opera (not Firefox strange enough). IE8 complains about a jquery related error and Opera complains about an error in wp-includes/js/thickbox/thickbox.css?ver=20090514
That’s a good question! I haven’t actually had the time to check it out. Hmm, considering that the errors are browser-specific, there could be some compatibility issues between jQuery, IE8 and Opera.
Just updated to WP 2.9 using an old theme that did not have wp_footer(). I was wondering why all of the other scripts loaded in the head except thickbox.js. Thanks for the helpful solution.
Thanks,
Jordan
You’re welcome ^_^
so awesome, it totally worked! thank you!!