Using wordpress built into a thick box without a plugin

Question

I am trying to use the built-in thickness in wordpress in my theme. I'm trying to make sure that all the photos that I add through the administrator automatically have a thick boxing function. I tried putting this in function.php, but this did not work:

function fb_add_thickbox($content){ $content = preg_replace('/<a(.*?)href="(.*?).(jpg|jpeg|png|gif|bmp|ico)"(.*?)><img/U', '<a$1href="$2.$3" $4 class="thickbox"><img', $content); return $content; } add_filter('the_content', 'fb_add_thickbox', 2); 

Answer 1

Assuming your code really works - (is your markup actually filtered?) - this will not work, as the thick box is not activated. You must manually enter it:

As @Alexcp noted - you must register and queue javascript and css manually (outside the admin section). In addition to your preg_replace function, add the following to the Functions.php template.

 // register scripts if (! function_exists(thickbox_register){ function thickbox_register() { wp_deregister_script( 'jquery' ); wp_register_script( 'jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'); wp_register_script( 'thickbox', 'path to thickbox'.thickbox.js, 'jquery'); } } add_action('init', 'thickbox_register'); //print the now registered scripts if (! function_exists(thickbox_enqueue){ function thickbox_enqueue() { wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'thickbox' ); } } add_action('wp_print_scripts', 'thickbox_enqueue'); // do the same for css if (! function_exists(thickbox_style_enqueue){ function thickbox_style_enqueue() { wp_register_style( 'thickbox', 'path to css'.thickbox.css ); wp_enqueue_style( 'thickbox' ); } } add_action('wp_print_styles', 'thickbox_style_enqueue'); 

Note that there are several ways to get there - but you need to start with something like bloginfo('url'); .

If you still have problems, use FireBug or something like that to make sure thickbox is correctly registered in the jQuery DOM object.

Hope that helps

Answer 2

A few simple ways, Wordpress already contained thickbox.js in its script folder.

So just open wp-include/script-loader.php

find the line from function print_head_scripts() ,

Add $wp_scripts->do_items( 'thickbox' ); after $wp_scripts->do_items( 'l10n' );

Then refresh the page, you will see that thickbox.js already included in your header part , and then add class="thickbox" to your <a> tag , you can completely call the thick box.

Answer 3

add this to your functions.php file in your theme:

 <?php // Adds thickbox to all images with a link inside of $content. // Uses the title attribute in the Media Library. add_filter('the_content', 'brentini_addthickboxclass'); function brentini_addthickboxclass($content) { add_thickbox(); $pattern[0] = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i"; $replacement[0] = '<a$1href=$2$3.$4$5 class="thickbox">'; $pattern[1] = "/(<a href=)('|\")([^\>]*?)(\.bmp|\.gif|\.jpg|\.jpeg|\.png)('|\")([^\>]*?)(>)(.*?) title=('|\")(.*?)('|\")(.*?)(<\/a>)/i"; $replacement[1] = '$1$2$3$4$5$6 title=$9$10$11$7$8 title=$9$10$11$12$13'; $pattern[2] = "/(<a href=)('|\")([^\>]*?)(\.bmp|\.gif|\.jpg|\.jpeg|\.png)('|\")([^\>]*?) title=([^\>]*?) title=([^\>]*?)(>)(.*?)(<\/a>)/i"; $replacement[2] = '$1$2$3$4$5$6 title=$7$9$10$11'; $content = preg_replace($pattern, $replacement, $content); return $content; } 

It will work flawlessly if you do it that way. There is no need to add all the calls that others talked about. This is not necessary at all, since WordPress initially includes jquery and thickbox for use on the server. So add_thickbox () is all you need to call thickbox in your theme. The rest of the script simply adds class = "thickbox" to any image inside $ content and uses the title attribute from the WordPress library.

If you are interested in a script that includes this Thickbox support for navigation galleries, check it out on pastebin .

For a more simplified version that does not include navigation, this one in pastebin uses jquery to add a thickbox class to galleries.