Quick WP Tip: Conditional Thickbox loading

Another quick tip to help you optimize your site: sometimes you want to load one or more images in a post in a nice Thickbox or Lightbox. But in most cases, you don’t need to load these scripts, wouldn’t it be cool if you could load these scripts only when you want them to load?

I decided, that the only time I want Thickbox to load, is when I manually add class="thickbox" to the code of a post or page. So I wrote up a little script that checks for that, and loads Thickbox if needed. Now you need to know that to make Thickbox work, you need to load both a script and a css file, so the complete code is the following:

function yst_conditional_thickbox() {
  global $post;
  if (is_singular() &&
    strpos($post->post_content,'class="thickbox"') !== false) {
      wp_enqueue_script('thickbox');
      wp_enqueue_style('thickbox');
  }
}
add_action('wp_print_styles','yst_conditional_thickbox');

This code should go into your themes functions.php file. Let’s explain it a bit: the function checks whether the content of the post contains the text class="thickbox". If it finds this text, it enqueues both the Thickbox script and CSS file. The add_action “hooks” this function to a WordPress hook. I use the wp_print_styles hook here, because that executes in the head, and makes sure both the stylesheet and the script file get loaded properly.

Now of course there’s nicer ways of doing this, like making it into a full regex to see if class=”thickbox” is actually set on a link, to prevent it from loading on a post like this one, which doesn’t have a thickboxed image in it, but does contain the text. But let’s be honest, how often is that really the case? This simple conditional load means you can use Thickbox when you need it, but you’re not making your users download Thickbox all the time when you’re only using it in 5% of your posts.

Let me know in the comments if this works for you, and which other things you think you should load conditionally, to make your blog a bit faster and more userfriendly!

Tags:


Yoast.com runs on the Genesis Framework

Genesis theme frameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides you with the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Read our Genesis review or get Genesis now!

29 Responses

  1. DavidBy David on 15 October, 2009

    It did work thanks, but hate to be a pain but I’d like this to work on _any_ page/post on the site, actually mainly on home.php but not sure how to change

    global $post;
    if (is_singular() &&
    strpos($post->post_content,'class="thickbox"') !== false) {

    • eddaiBy eddai on 5 November, 2009

      I also wonder this..
      how to achieve this for homepage ?

  2. SunilBy Sunil on 15 October, 2009

    It would be nice to check this blog, if you are a beginner. How to include thickbox in wordpress just 3 lines of code. http://www.myhtmlworld.com/wordpress/create-thickbox-wordpress.html

  3. DavidBy David on 15 October, 2009

    Yes I’d seen that post, what I meant was that I only want it to load on the front page, home.php, not anywhere else, but Yoast’s example is just referring to posts.

  4. Free Internet Marketing GiftBy Free Internet Marketing Gift on 16 October, 2009

    Hey Mate, I’ve read a couple of posts on your blog and I love your style. I am going to subscribe to your RSS feed :)

    • Joost de ValkBy Joost de Valk on 16 October, 2009

      Cool, now if you’d do me the pleasure of commenting with your real name, I’d appreciate it :)

  5. Dan GoldenBy Dan Golden on 16 October, 2009

    I don’t think this is very useful :(

    • Joost de ValkBy Joost de Valk on 17 October, 2009

      Well others seem to do find it useful, so, ehm, what’s the use of this comment? :)

  6. Jay StebbinsBy Jay Stebbins on 18 October, 2009

    So far your plug ins and tips seem to have helped my site tremendously. I followed your SEO tips and have been using Headspace and all the rest to seemingly great effect. I am still wrapping my head around some things. Sure I could be doing other things better, time will tell.

    Funny to find this post on selective lightboxing. I was just about to mess with Fanceybox hoping to keep my images on the homepage and in excerpts as links to the rest of the post. Once at the post it would be nice if the top image as well as those in the article jumped into a lightbox/thickbox. Hopefully I can figure out what I need to do with the theme I am working on.

    • DavidBy David on 19 October, 2009

      Fancybox looks great, I’ve found thickbox kind of slow to load anything, like sometimes 10+secs, would this method work with fancybox too?

  7. Eric BlackwellBy Eric Blackwell on 19 October, 2009

    Hey Joost;

    Great little tip. I am working on a blog in the real estate space where having some photos with a thick box and some without can really help make a theme look just a little bit more custom. Probably could have coded it myself had I gotten around to it, but thanks much for making it easy to grab the code.

    best as always

    Eric

  8. Karl FoxleyBy Karl Foxley on 19 October, 2009

    Thanks Joost, this is going to come in very handy on my site. I always look forward to reading your latest updates!

    Karl

  9. BloginstallBy Bloginstall on 19 October, 2009

    Wow, why did I not think about this before ? Great little tip that I have just implemented in a new project. As far as I know, the js is cached anyway, so does this really have any effect after the first load on a page that does include the lightbox ?

    • Joost de ValkBy Joost de Valk on 19 October, 2009

      Depends, if they come from, for instance, your RSS feed, and only hit one page, that page will load faster. If they visit more pages on your site and one includes thickbox, then it, indeed, doesn’t matter as much anymore.

  10. LoneWolfBy LoneWolf on 19 October, 2009

    Hi Yoast. This looks pretty good, but I think you might want to expand the search a little. This doesn’t take into account people that use ‘ rather than “. I’ve started using the ‘ rather than ” since it works better when the html is inside a php string.

    It also doesn’t take into account multiple classes in a class statement. I’ve been doing some work on a plugin for my sites and looking at examples I see a lot of that stuff happening.

    Because of this, I think it is possible that your change might break other plugins that use thickbox. I’m still learning how WP puts things together so I could be wrong about that.

    It would be good to expand this for other javascript heavy classes as well. You could make it a function that accepts the class name as a parameter.

    • Joost de ValkBy Joost de Valk on 19 October, 2009

      Sorry to say it but: nonsense. If other plugins need Thickbox, they’d enqueue it themselves. I’m not dequeueing, only queueing. Of course this would work for other classes as well, if needed.

      I said in my post that this was simple, as it was meant to be simple for educational purposes :)

      • LoneWolfBy LoneWolf on 19 October, 2009

        That actually gives me some more insight into the enqueue functionality now. I hadn’t really looked into that function too much yet, but now I see that it is more of a request to “add if not already added”.

        Thanks for setting me straight!

  11. JuddBy Judd on 19 October, 2009

    Thanks for sharing this, it’s a nice solution to a common problem.

    Enjoy your stuff, keep it up (in spite of the whiners).

  12. Travis QuinnellyBy Travis Quinnelly on 20 October, 2009

    Great concept…love it. Tried this out with different conditional loading criteria and it works great. I do have a question about the queueing going on…what order does WP use to load these scripts? I noticed that queueing a js file to load only made it load ahead of other scripts set to load. Unfortunately, one of the scripts was dependent on another script that already gets loaded by the template and needed to load before it, not after it. The enqueue method doesnt seem to have an order or am I missing something blatant?

  13. RilwisBy Rilwis on 21 October, 2009

    A good tip, Joost de Valk. This make WP loads faster when there’s no images in post content. Thank you.

  14. s.holstensBy s.holstens on 21 October, 2009

    Thank you all the time again :D. Very nice work.Greetings to the team

  15. Doug SmithBy Doug Smith on 21 October, 2009

    Thanks so much for writing up the tip, Joost. Your timing was perfect since I was just starting a project that needed it

    FYI, One of the problems with using the built-in Thickbox through wp_enqueue_script() is that you end up with broken URLs for the thickbox graphics. They are coded in thickbox.js as relative URLs and end up getting tacked on to the end of whatever URL you are viewing.

    If anyone is interested, I posted a solution for that at http://smithsrus.com/loading-wordpress-thickbox-only-when-needed/

  16. scott bothelBy scott bothel on 22 October, 2009

    Rock on. I’ve wanted to figure out an elegant solution to this for a while. It didn’t seem necessary to run a silly plugin for thickbox when its already in core! And selective loading kills two birds for me!

  17. Aaron D. CampbellBy Aaron D. Campbell on 2 November, 2009

    I have a few things to add:
    1) There is a function called add_thickbox() that was added in WP 2.5 which enqueues the JS and CSS files.
    2) People should read this thread – http://lists.automattic.com/pipermail/wp-hackers/2009-October/028143.html since there are times when a post that needs thickbox would be missed using $post (for all custom queries, things like $myquery = new WP_Query($args);)

Trackbacks