Shiba

Adventures in WordPress

  • Home
  • Dog
  • Art
  • Contact
  • WordPress Articles
    • WP Plugins
    • WP Programming
    • WP Admin Panels
    • WP Theme Design
    • WP How-To
    • WP Theme Images
You are here: Home / WordPress Programming / Create Pop-up Windows in Your WordPress Blog with Thickbox

Create Pop-up Windows in Your WordPress Blog with Thickbox

by ShibaShake 57 Comments

One simple way of enabling pop-up windows right from your WordPress posts, is by using the Thickbox javascript library that comes with WordPress.

You can link the pop-up window to a HTML input element such as a button, or you can simply link the pop-up window to a HTML hyperlink. Below we show examples of both –

Show Thickbox Example Pop-up 2

Example Pop-up Window 1

I was born at DAZ Studio. They created me with utmost care and that is why I am the hottie that you see today. My interests include posing, trying out cute outfits, and more posing.

Just click outside the pop-up to close it.

Example Pop-up Window 2

I was born at DAZ Studio. They created me with utmost care and that is why I am the hottie that you see today. My interests include posing, trying out cute outfits, and more posing.

This pop-up window uses the modal=true option in thickbox. Refer to the thickbox tutorials for more examples on thickbox options and features.

Just click on the OK button below to close the pop-up.

How to Add Pop-up Windows to Your WordPress Posts

Step 1

You need to add thickbox to your WordPress post. You can do this by adding the add_thickbox function to the ‘init’ function of your theme. In particular, add the code below to your theme functions.php file.

<?php
add_action('init', 'init_theme_method');

function init_theme_method() {
   add_thickbox();
}
?>

Step 2

Now we can just add the button right in our post and link it to thickbox by specifying class=thickbox. Click on the HTML tab in your post editor and paste the HTML code below into your post.

<div style="text-align:center;padding:20px 0;"> 
<input alt="#TB_inline?height=300&width=400&inlineId=examplePopup1" title="add a caption to title attribute / or leave blank" class="thickbox" type="button" value="Show Thickbox Example Pop-up 1" />  
</div>

Step 3

Finally, we specify the content that goes into our pop-up window by creating a div with id=examplePopup1.

<div id="examplePopup1" style="display:none">
<h2>Example Pop-up Window 1</h2>
<div style="float:left;padding:10px;">
<img src="https://shibashake.com/wordpress-theme/wp-content/uploads/2010/03/bio1.jpg"  width="150" height = "168"/>
</div>
I was born at DAZ Studio. They created me with utmost care and that is why I am the hottie that you see today. My interests include posing, trying out cute outfits, and more posing.

<select name=""><option>test</option></select>

<strong>Just click outside the pop-up to close it.</strong>
</div>

And just like that, we have our pop-up window.

There are a variety of other thickbox options including using iframes, displaying image galleries, and using AJAX content.

Only Include Thickbox as Necessary

While the example above works, it is not the most efficient because you are including the thickbox library into all of your WordPress posts, whether you are using it or not.

Ideally, you only want to include thickbox in those posts that actually require it.

One way to achieve this is by using the is_single or is_page WordPress functions to include thickbox on a post by post basis.

add_action('template_redirect', 'add_scripts');

function add_scripts() {
	if (is_single('2794')) {
	  add_thickbox(); 
	}
}

Line 1 – Instead of tying the add_thickbox function to the init action hook, we tie it to the template_redirect action hook instead. This will allow us to properly use the is_single and is_page commands in our hook function.

Lines 4-6 – Only add thickbox to this post which has an id of 2794.

Include Thickbox Based on Post Tags

The solution above works well if you want to include pop-up windows to a small set of posts and pages. However, if you later decide to use pop-ups on a large set of posts, using is_single may quickly become unwieldy.

While you can pass in an array of posts to the is_single function, you will still need to list out the title or id of each and every post that uses thickbox.

A more elegent solution, is to include the thickbox libraries based on post tags.

<?php
function add_scripts() {
	global $wp_query;
	if (!is_singular() || !$wp_query->post) return;
	// Get post tags
	$tags = wp_get_object_terms($wp_query->post->ID, 'post_tag');
	foreach ($tags as $tag) {
		if ($tag->name == "thickbox") {
			add_thickbox();
			break;
		}
	}	
}
?>

Line 4 – We only add thickbox for single posts, pages, or attachments.

Line 6 – Get the post tags for the current post.
*Note*, we cannot used WordPress Loop functions at this point because the template_redirect action hook is called before the Loop is fully instantiated. However, query_vars has already been called, so the $wp_query global variable contains the values that we need.

Lines 7-12 – Check for the thickbox tag. If we find it, we add the thickbox library.

Now all we need to do is add the thickbox tag to posts that use the thickbox library and we are done.

Have Fun with Pop-up Windows!

Leave a Reply to Adriano Cancel reply

Your email address will not be published. Required fields are marked *

Comments

« Previous 1 2 3 4 Next »
  1. Diego says

    February 16, 2013 at 5:01 pm

    This Work for mee… thank.. try for four hours along!

    Reply
  2. Chris says

    January 22, 2013 at 3:18 pm

    Hi, your solution worked for me. I have one issue, though, my site uses the wordpress jetpack to enable the mobile theme and when I click the link to popup it doesn’t do anything. Is there a way to make this work on a mobile device?

    Reply
    • ShibaShake says

      January 22, 2013 at 10:15 pm

      Where did you include the thickbox code? If you are including it in the theme functions.php file, you will also need include it in the mobile theme’s functions.php file.

      Reply
  3. Ang says

    January 9, 2013 at 7:53 am

    Hi! I tried the example and it works fine. How do you do the Example Pop-Up 2?

    Great tutorial by the way! 🙂

    Ang

    Reply
    • ShibaShake says

      January 9, 2013 at 11:23 am

      You can look at the source of this page to see the actual HTML I used for example popup2. Just do a search for ‘examplePopup2’.

      Reply
      • Anonymous says

        January 10, 2013 at 3:52 am

        Thank you so much. Worked out fine. 🙂

  4. Peter says

    December 9, 2012 at 7:56 pm

    Hi,
    Your code for this works but it messes up my template (Video from templatic) The Sidebar shows beneath the post page with this code in it. Do you know what I might do to fix this?

    Thanks,
    Peter

    Reply
    • Peter says

      December 9, 2012 at 8:48 pm

      I had a missing . I must have not copied and pasted correctly. Thanks for this great script. Works like a charm.

      Pete

      Reply
  5. jassin says

    December 4, 2012 at 12:12 pm

    I have tried everything and I can not seam to get this to work? Do I have to put anything in my theme file to get thinkbox to show up? Any ideas would be appreciated.

    Reply
    • ShibaShake says

      December 5, 2012 at 10:17 pm

      To get thickbox to work we first need to call the add_thickbox function. I give an example of this in Step 1 on the post above. This adds the relevant styles and javascript for thickbox.

      Reply
  6. Gen says

    July 12, 2012 at 7:44 pm

    Hi again, I’ve try and Its work the way It is. Thanks a lot, I’ve been looking for 3 weeks for a post like this 😐

    Reply
  7. Gen says

    July 12, 2012 at 7:12 pm

    Hi I just wondering If did you use here the latest version of wordpress(3.4.1)?

    Reply
    • Sola says

      July 18, 2012 at 2:15 am

      It works great with WordPress 3.4.1, just tested it out

      Reply
  8. Azle says

    July 8, 2012 at 11:47 pm

    hello Shibashake,

    I am newbie, and I tried to put the code as you tells above, but it doesnt work on my web, when I click the button, the pop up box didnt show up, only the grey transparant cover shows.

    did I miss something?

    thank you

    Reply
  9. Erik says

    March 13, 2012 at 2:42 am

    Sweet trick!
    I’m trying to implement it back-end in a plugin.
    Is it possible to send a php variable along with it to make the content dynamic? My guess is that I need to pass the post id to grab the rest of the data in the thickbox?

    Example:
    I render a list/table of db entries and I want to place the button on each row. On click I want that specific row content to display in my thickbox. Perhaps for printing it on paper or just for showing the content a little bit different.

    Sincerely, Erik

    Reply
    • ShibaShake says

      March 13, 2012 at 11:19 am

      Sounds like using Javascript may be the easiest way to go.

      Reply
      • Jeffrey says

        June 10, 2013 at 2:15 pm

        How would this be accomplished?

  10. Rene Tobe says

    February 29, 2012 at 4:17 pm

    thank you, it works well, i ask the same as Hiral for a better understanding and more possibility’s, greetings Rene

    Reply
« Previous 1 2 3 4 Next »

Recent Posts

  • Screenshot of an example article in code view of a modified Gutenberg editor.How to Harness the Power of WordPress Gutenberg Blocks and Combine It with Legacy Free-Form Text
  • Screenshot of the Success, WordPress has been installed page.Migrating Your WordPress Website to Amazon EC2 (AWS)
  • Screenshot of WinSCP for creating a SFTP configuration.How to Set-Up SFTP on Amazon EC2 (AWS)
  • WordPress Gutenberg code view screenshot of this article.How to Prevent Gutenberg Autop from Messing Up Your Code, Shortcodes, and Scripts
  • Screenshot of the Success, WordPress has been installed page.How to Create a WordPress Website on Amazon EC2 (AWS)

Recent Comments

  • Screenshot of the Success, WordPress has been installed page.How to Create a WordPress Website on Amazon EC2 (AWS) (1)
    • Erik
      - Great article. All worked great except for this step:apt install php-mysqlChanging to this fixed it:apt install ...
  • Add Custom Taxonomy Tags to Your WordPress Permalinks (125)
    • Anthony
      - Where does this code go? Like, what exact .php file please?
  • Screenshot of an example article in code view of a modified Gutenberg editor.How to Harness the Power of WordPress Gutenberg Blocks and Combine It with Legacy Free-Form Text (1)
    • tom
      - hi,my experience was like the same, but for me as theme developer the "lazy blocks"(https://wordpress.org/plugins/lazy-blocks/) ...
  • WordPress Custom Taxonomy Input Panels (106)
    • Phil T
      - This is unnecessarily confusing. Why declare a variable with the same name as your taxonomy? Why did you choose a taxonomy ...
  • Create Pop-up Windows in Your WordPress Blog with Thickbox (57)
    • Jim Camomile
      - I have used this tutorial several times and it is one of the few simple and effective ways to add popups with dynamic content, ...

Copyright © 2025 · Genesis Skins by ShibaShake · Terms of Service · Privacy Policy ·