WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I've been searching for a better way to utilize the built in Thickbox function for images. I've been using my method for a few months, but I don't think it's the best way to do it. Here is the code I've been using (I don't remember where I found the code or I'd link to the article):

if (!is_admin()){
add a word found in your domain name
$mydomain = ".com";
The css selector
.entry-content a img 
$myselector = "p a img";
wp_enqueue_style('thickbox'); //include thickbox .css
wp_enqueue_script('jquery');  //include jQuery
wp_enqueue_script('thickbox'); //include Thickbox jQuery plugin
    // Function that will write js
    function thickbox_js(){
        global $mydomain, $myselector;
        <script type='text/javascript'>
         var tb_closeImage = "<?php bloginfo('wpurl'); ?>/wp-includes/js/thickbox/tb-close.png";
         var tb_pathToImage = "<?php bloginfo('wpurl'); ?>/wp-includes/js/thickbox/loadingAnimation.gif";
         jQuery(document).ready(function() {
             jQuery("<?php echo $myselector; ?>").parent("a[href*=<?php echo $mydomain; ?>]").addClass("thickbox");
add_action('wp_footer', 'thickbox_js'); // use wp_footer hook to write our generated javascript into page footer.

Any suggestions would be appreciated. I've tried several different methods listed in tutorials, but none have worked. Thanks...

To be more specific, this is the part in question:

<?php bloginfo('wpurl'); ?>

What I'm using now:

    function add_themescript(){
     wp_enqueue_style('thickbox.css', '/'.WPINC.'/js/thickbox/thickbox.css', null, '1.0');

define("IMAGE_FILETYPE", "(bmp|gif|jpeg|jpg|png)", true);
function wp_thickbox($string) {
$pattern = '/(<a(.*?)href="([^"]*.)'.IMAGE_FILETYPE.'"(.*?)><img)/ie';
$replacement = 'stripslashes(strstr("\2\5","rel=") ? "\1" : "<a\2href=\"\3\4\"\5 class=\"thickbox\"><img")';
  return preg_replace($pattern, $replacement, $string);

function wp_thickbox_rel( $attachment_link ) {
$attachment_link = str_replace( 'a href' , 'a rel="thickbox-gallery" class="thickbox" href' , $attachment_link );
  return $attachment_link;
add_filter('the_content', 'wp_thickbox');
add_filter('wp_get_attachment_link' , 'wp_thickbox_rel');

I thinks that's a little better, but I'm still not sure it's the optimal way. Next I need to learn how to add navigation to the ThickBox pop-up images.

share|improve this question
this looks about right – Bainternet Aug 6 '11 at 0:32
Thanks Bainternet, I've revised to question to be more specific. One more question, how would I allow showing all images on a post/page? Let me know if this should this be a separate question and I'll re-post it in more detail. Thanks, Jeremy Jared. – Jeremy Jared Aug 6 '11 at 3:11
CSS enqueues should go in the head, JS is fine in the footer though. – t31os Aug 6 '11 at 10:57
up vote 1 down vote accepted

What if you try adding this to your functions.php

function tb(){
    wp_enqueue_style('thickbox.css', '/'.WPINC.'/js/thickbox/thickbox.css', null, '1.0');

and keeping your bit of jQuery (not sure what your are needing those php variables for):

 jQuery(document).ready(function() {
share|improve this answer
Hi Zac ,could you give a complete sample of the code as you would use it? I've tried implementing your suggestion with not luck. I'm sure it's something I'm doing wrong, but I just can't get it to work. – Jeremy Jared Aug 6 '11 at 4:57
Hi Jeremy, When you add that function do you see thickbox loaded in your source? – zac Aug 6 '11 at 5:39
Enqueues should never be done on init. – t31os Aug 6 '11 at 10:56
I ended up trying something else. I couldn't get Zac's code to work, but I notice it is very similar to what I am using now. I've been using the beta testers plug-in on most of my development sites. This seems to have caused some issues with my script and the ones that were suggested. It notice things were strange when I checked my permalinks, and they kept switching on me. After investigation things, I realized it was because I was using an unstable version of WordPress. I switched to the latest reslease and everything is working like expected now. – Jeremy Jared Aug 7 '11 at 2:04
@t31os I was having an annoying white flash on my site as the DOM was loading improperly. I remembered your comment and taking it off init was what it needed. Thanks :) – zac Sep 19 '11 at 4:35

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.