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

Tweet

by ShibaShake 55 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&amp;width=400&amp;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="http://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!

Related Articles

How to Hook into the Media Upload Popup Interface

What is the media upload popup interface? That is simply the popup window that appears when we click on the Add Media button (for adding images and video) while in the Edit Post screen. The same interface is also currently being used for - Setting featured images in posts, and Setting header images in a theme. It can also be very useful in a plugin. For example, my Shiba Gallery plugin uses the Media Upload Interface to assign a default picture for posts and pages that do not have [...]

Use WordPress Child Themes to Create Static Styles

How to add static CSS styles into your blog by using a child theme.

Create Your Own NoobSlide Gallery

How to expand the Shiba Gallery Plugin and create your own NoobSlide galleries.

Comments

  1. Mohammed says

    March 31, 2017 at 1:13 am

    Hi,
    That is nice to use Thickbox.. but you already loaded the posts and its display:none.. what if you have 100 post.. then it will load all 100..

    Any way to load only the post when you click to show it ?

    Reply
  2. Adriano says

    June 24, 2015 at 1:20 pm

    do you know if there is a plugin to open in lightbox when you click the post permalink in the homepage or in the archive page ?

    …useful anyway

    tankyou

    Reply
  3. danis says

    June 5, 2014 at 1:35 pm

    haloo.. how can I make the box size in percent? not in px.. because it’s not really good if it’s opened by mobile phone..

    Reply
  4. Nancy says

    April 20, 2014 at 8:45 pm

    I would like to know how I can have the pop up window open up another site’s url. Please let me know if there’s a solution

    Reply
  5. rupz says

    November 12, 2013 at 3:08 am

    Hi, is there a way to dynamically calculate the height of the pop up depending upon the content of the pop up.

    Reply
  6. Menno says

    October 10, 2013 at 4:45 pm

    Thank you so much!

    Reply
  7. love says

    September 28, 2013 at 7:20 am

    Hey excuse me ,my custom page could not catch the contens() on custome template page but on the homePage run smothly as your tutorial. Could you tell me.What wrong with my tempage page.

    Reply
  8. fja3omega says

    September 23, 2013 at 11:57 pm

    Works nice. Thanks. Now onto the css. Charge!

    Reply
  9. Benny Neugebauer says

    September 17, 2013 at 2:31 pm

    Thank you very much! This was helpful. 🙂

    Reply
  10. Bnpositive says

    July 26, 2013 at 4:22 pm

    I’m working on a project where this is working. In the pop-up div I’ve embedded a Gravity Form. How can I make the form submission button close the pop-up?

    Reply
    • Jeffrey says

      August 6, 2013 at 9:11 am

      You can try implementing an OnClick or OnSubmit (don’t recall which) to close after?

      Reply
  11. Safaa says

    July 1, 2013 at 3:35 am

    thanks a lot for the helpful information.
    but I was wondering what if I want to add the button in multiple page hierarchy?

    Reply
  12. Jane Adams says

    June 14, 2013 at 10:05 pm

    Hi, Unfortunately, ThickBox is beyond my skills et.

    I dont understand steps 1-3. I thought I did, but all I end up with is a button but no pop up. Instructions for a total newbie would be great.

    Reply
  13. Jeffrey says

    June 10, 2013 at 12:48 pm

    Can I just say…you are SAVING my life right now! Though I need help with a minor tweak. The link provided above is to the dev site where I am testing this. It resides within a feed of 28 posts. When I click it…it is only grabbing the information (Image and Title) of the first post and not that of the button under the specific post I clicked.

    How do I change this?

    Thanks you in advance!!

    AGAIN…life saver

    Reply
    • ShibaShake says

      June 13, 2013 at 11:47 am

      Very nice looking design. Also looks like you got things to work. Good job!

      Reply
      • Anonymous says

        June 14, 2013 at 4:20 am

        Thanks!
        Not entirely what I was looking for…but to where I’m ok with it. But I have a related question,
        Using the thick box code in the link as I have to iFrame content….do you know of a way (possibly css) to hide the header of the page being iFramed?
        I tried going the route of single templates based on the cat slug, but when the same post was accessed via other means (not Thickbox) it looked all wonky.

        Reply
        • ShibaShake says

          June 14, 2013 at 11:32 am

          Hmmm, perhaps you could try limiting the scope of the CSS to just TB iframes, e.g.

          #TB_window .post-title or #TB_iframeContent .post-title

          Reply
      • reza says

        February 25, 2014 at 12:44 pm

        hello, i have the same problem with Jeffrey, but can’t seem to find the answer here. is there a solution to this? much appreciated

        Reply
        • reza says

          February 25, 2014 at 12:46 pm

          oops, i was referring to the “it is only grabbing the information (Image and Title) of the first post and not that of the button under the specific post I clicked.” part. thanks

          Reply
  14. Jess says

    May 6, 2013 at 11:05 pm

    How can I do this for a page via a menu link?

    Reply
  15. Deano says

    April 25, 2013 at 10:49 am

    Great example thanks, i’m all for using worpdress built in functions..
    cheers

    Reply
  16. Mircea says

    March 10, 2013 at 12:11 pm

    This works really well! Thank you for your share 🙂

    Reply
  17. Faisal Sarfraz says

    February 23, 2013 at 10:00 am

    Hi
    I am trying this, entering the step 1 code in functions.php and then all other stuff but i am unable to see this working, 🙁
    It is showing button but not displaying the content

    Reply
  18. andrakis says

    February 20, 2013 at 9:20 pm

    Thanks for this great tutorial, shiba! Use the Thickbox at my travel diary of Ireland now. It works great. You rock! 🙂

    Reply
  19. Diego says

    February 16, 2013 at 5:01 pm

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

    Reply
  20. 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
  21. 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. 🙂

        Reply
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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?

        Reply
  28. 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
  29. hiral says

    February 8, 2012 at 4:46 am

    how to use this code in image element instead of button/input element??

    Reply
  30. Bliz says

    October 20, 2011 at 4:25 am

    Thanks! This helps a lot!

    Reply
  31. Roger says

    August 13, 2011 at 8:55 am

    Gracias Maestro, me ayudo un monton el codigo y la explicación!

    Reply
  32. Stephen says

    August 12, 2011 at 1:06 am

    Thanks for the reply. I looked into JQuery Ready after your suggestion and glossed over a bit. Sounds like the onload event would be easier. Do you have a example I could follow that would work with your previous example? I have the page loading while clicking the button but just need it when the page loads… Thanks!

    Reply
  33. Stephen says

    August 9, 2011 at 6:56 pm

    Thanks for the tip on popups. I got our example to work without problems, but I wonder how I could invoke this popup when the page loads rather than clicking on a button?

    Reply
    • ShibaShake says

      August 11, 2011 at 3:01 pm

      You can call the tb_show javascript function directly. Just link it to the javascript onload event, or use jQuery ready.
      http://phpxref.ftwr.co.uk/wordpress/nav.html?wp-includes/js/thickbox/thickbox.js.html

      Reply
  34. Debby says

    July 24, 2011 at 1:04 pm

    Hi Shibashake

    I am trying to implement this on my site and it is not working. It’s on my localhost at present so i cant send link. I also noticed that the button and link on this page don’t work. is it just me?

    Reply
    • ShibaShake says

      July 28, 2011 at 12:50 pm

      Thanks for pointing out that the button and link does not work. It is fixed now. The problem was due to a plugin conflict.

      Reply
  35. Andrea Bersi says

    March 17, 2011 at 11:10 am

    Thank you for another great tutorial!!!!
    Your site is a resource of great tip for wordpress.
    Ciao!

    Reply
  36. Dion GeBorde says

    December 18, 2010 at 12:09 pm

    Hey ShibaShake,

    I found your site a little while back and I’ve got to say, you must be one of the most talented folks I’ve come across when it comes to being both a designer and a tutor. Thanks for this site.

    I have a question about using thickbox and using init to call it. I’ve seen a lot in the WP codex about using wp_enqueue_script to avoid duplicate calls of jquery or whatever might be needed to run a function or plugin. Is there a reason that you do it this way? I’m still very much a newbie, so trying to get all this info sorted out in my head.

    Thanks.

    Reply
    • ShibaShake says

      December 18, 2010 at 1:50 pm

      Hello Dion,
      Thanks for your very kind works.

      You are definitely right about wp_enqueue_script, it is a good function to use to avoid duplicate loads of the same js or css files. In fact the add_thickbox function uses both wp_enqueue_script and wp_enqueue_style to add the relevant thickbox script and style.

      add_thickbox is a shorthand way to add the relevant scripts and styles. It also runs any extra WP hooks that are deemed necessary. If there are plugins that hook into those actions, then using add_thickbox will automatically include those plugin calls as well.

      Reply
  37. ShibaShake says

    April 30, 2010 at 12:29 pm

    I would just set up a timer using the javascript setTimeout command and then use that to call the thickbox Javascript function tb_show directly. Something like this –

    <script type="text/javascript">
    <!--
    function autobox() {
    tb_show("automatic thickbox", "#TB_inline?height=300&width=400&inlineId=examplePopup1", false);
    }
    setTimeout( "autobox()", 5000 );
    //-->
    </script>
    
    Reply
  38. John says

    April 30, 2010 at 9:13 am

    That’s a great tutorial! I have a question: IS there a way to make it so that the popup comes up without the user doing anything, on a timer? Essentially, my client needs a landing page that will display a popup if the user stays on the page for 20 seconds or so. So I would need this to come up automatically and on a delay. Any advice you could give me?

    Reply

Leave a Reply to hiral Cancel reply

Your email address will not be published.

Recent Posts

  • Screen-shot of mobile responsive Poll Daddy object, where text floats properly to the right of radio buttons.How to Make Poll Daddy Objects Mobile Responsive
  • Screen-shot of blog post with no page border (flowing design).Genesis Skins 1.5
  • Screen-shot of the media manager Create-Gallery screen, while doing a post search.Shiba Media Library 3.7
  • Screenshot of the Edit Gallery screen after we hit the Create Gallery button.How to Expand the WordPress Media Manager Interface
  • Blonde girl looking through and holding a circular picture frame.Shiba Gallery 4.3
  • Close-up of beautiful blonde holding a square picture frame.Google Authorship - Good or Bad for Search Traffic?
  • Shiba Widgets 2.0
  • Media Temple screenshot of editing my sub-domain DNS entry.Using CDN Cnames with w3tc and MultiSite
  • Shiba Skins WordPress ThemeShiba Skins WordPress Theme
  • How to add the Media Manager Menu to the Theme Preview InterfaceHow to Add the Media Manager Menu to the Theme Preview Interface

Recent Comments

  • WordPress Search Widget – How to Style It (56)
    • Nelson
      - Tanks master - Fine
    • TelFiRE
      - How do you style the "X" that shows up when you start typing?
  • Update custom inputs with the proper data using Javascript.Expand the WordPress Quick Edit Menu (58)
    • Mike G
      - This is exactly what is happening to me. It is updating the value in the database and in the column, but I have to refresh ...
    • PhoenixJP
      - Thanks for this tutorial. Does someone knows if this still work with wordpress 5.03 and 5.1.
    • Francine Carrel
      - This is a very long time away from your original comment, but did you ever work it out? I am stuck on the exact same thing ...
  • Custom meta-box with a set of radio-buttons.Add a Metabox to Your Custom Post Type Screen (27)
    • mike
      - Hi Shiba am a newbie to wordpress, I just installed a plugin with a custom post type, but has no option for discussion and ...
  • Write a Plugin for WordPress Multi-Site (45)
    • Andrew
      - Hi,action 'wpmu_new_blog' has been deprecated. Use ‘wp_insert_site’ instead.
  • Populate our Edit Gallery menu using a gallery shortcode.How to Add the WordPress 3.5 Media Manager Interface – Part 2 (29)
    • Janine
      - Still relevant in 2019.
  • WordPress Excerpt – How to Style It (36)
    • James
      - Great post. I really need some help. I have set border lines around my excerpts on my blog page/post page. The problem is ...
  • Add Custom Taxonomy Tags to Your WordPress Permalinks (123)
    • Darshan Saroya
      - Update permalinks. Go to settings > permalink and just save it.

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