To know about what is thickbox please check this link. WordPress use this a main popup window or modal view. Thickbox is a jquery plugin and it’s available with wordpress with jquery. So my tips is how to use that in front end , using the thickbox available with it, no need to use externally.
At first let me tell you where you can get it if u search wordpress directory manually. Just check in wp-includes\js where you will get all the js library and plugins used with wordpress or available for use with plugin and theme. And here is every thing you need for thickbox
Let me tell you now how to use it in theme or plugin. Let’s play with functions.php file of your theme file
Add this line in your functions.php file any where with care
wp_enqueue_style(‘thickbox.css’, ‘/’.WPINC.’/js/thickbox/thickbox.css’, null, ‘1.0’);
wp_enqueue_script function is used to load js file using theme and plugin. It helps you to load library js and plugin availble with wordpress and as well as loading js from external links like from theme , plugin or external sites. Also it will not load same js file again and again if same function used in diff plugin and theme. To know more about adding java script and stylesheet(custom css file) see in wordpress codex adding js and adding css
Hei, we are not done yet. need to do some lines more so that the loading image and close button show properly. Open your footer.php and write the follow lines before wp_footer() this.
if ( typeof tb_pathToImage != ‘string’ )
var tb_pathToImage = "<?php echo get_bloginfo(‘url’).’/wp-includes/js/thickbox’; ?>/loadingAnimation.gif";
if ( typeof tb_closeImage != ‘string’ )
var tb_closeImage = "<?php echo get_bloginfo(‘url’).’/wp-includes/js/thickbox’; ?>/tb-close.png";
and how to use thickbox you can see the <a href="http://jquery.com/demo/thickbox/"> thickbox page</a> in jquery site .
To show feedbernuer subscription link in popup windows I used this code
<a href="http://feedburner.google.com/fb/a/mailverify?uri=manchumahara&loc=en_US&KeepThis=true&height=450&width=600&TB_iframe=true" class="thickbox">Subscribe to my blog via Email</a>
Hei don’t think I will now say … pls donate me if you like my writings… because I have removed my donate button as nobody care about my time to do all the plugins/extentions and tips 😛
codeboxr, thank u for reply. I pasted the codes below in functions.php and footer.php files, but the thickbox window in my website are empty.
Please, look the orange buttons in http://www.sistemasuperavit.com.br/como-funciona .
Jonathan Medeiros Can you please share what or how you added thickbox ?
Hello, my friend!
Thank you for your post. Thickbox is activated, but the window is empty. Could u help me to fix it?
thanks buddy you helped me a lot 🙂
keep writing !
oops… sorry… my code:
great tutorial, but for some reason the iframe does not show. the thickbox opens to the size i specify but it just shows a blank white box. 🙁 any ideas??
You save me a lot of time!!!
very very nice .
thanks a lot
This code is very helpful to me.
God Bless You !!!
very good! thanks, I used your method of calling User Photo plugin in Frontend
So, there is no need of addition lighbox plugin?
Nice article … thanks.
Thanks a lot …
Great advice, but is there also a way to show the Now and Next buttons?
Nice buddy, i can see the loading animation and close button now 😀
Nice writeup. Thanks for this nice tut