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!
PDF Tags: WordPress Themes
Category: WordPress
You can skip to the end and leave a response.
Other posts you might like:
29 Responses to “Quick WP Tip: Conditional Thickbox loading”
Comments closed, if you feel you have something to say:
drop me a line.
by David on 15 October, 2009 at 05:32
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) {
by eddai on 5 November, 2009 at 14:55
I also wonder this..
how to achieve this for homepage ?
by Sunil on 15 October, 2009 at 06:16
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
by David on 15 October, 2009 at 09:22
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.
by Free Internet Marketing Gift on 16 October, 2009 at 08:59
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 :)
by Joost de Valk on 16 October, 2009 at 09:09
Cool, now if you'd do me the pleasure of commenting with your real name, I'd appreciate it :)
Pingback: Tutorial: Thickbox / Lightbox nur bei Be… | Wordpress Lesezeichen
Pingback: New Wordpress Theme – Slow Performance
by Dan Golden on 16 October, 2009 at 18:08
I don't think this is very useful :(
by Joost de Valk on 17 October, 2009 at 07:07
Well others seem to do find it useful, so, ehm, what's the use of this comment? :)
by Jay Stebbins on 18 October, 2009 at 22:22
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.
by David on 19 October, 2009 at 10:19
Fancybox looks great, I've found thickbox kind of slow to load anything, like sometimes 10+secs, would this method work with fancybox too?
by Eric Blackwell on 19 October, 2009 at 09:54
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
by Karl Foxley on 19 October, 2009 at 10:02
Thanks Joost, this is going to come in very handy on my site. I always look forward to reading your latest updates!
Karl
by Bloginstall on 19 October, 2009 at 13:53
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 ?
by Joost de Valk on 19 October, 2009 at 15:05
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.
by LoneWolf on 19 October, 2009 at 14:49
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.
by Joost de Valk on 19 October, 2009 at 15:03
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 :)
by LoneWolf on 19 October, 2009 at 22:47
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!
by Judd on 19 October, 2009 at 15:58
Thanks for sharing this, it's a nice solution to a common problem.
Enjoy your stuff, keep it up (in spite of the whiners).
by Travis Quinnelly on 20 October, 2009 at 14:44
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?
Pingback: Loading WordPress’ Thickbox Only When Needed – Smiths R Us
by Rilwis on 21 October, 2009 at 08:32
A good tip, Joost de Valk. This make WP loads faster when there's no images in post content. Thank you.
by s.holstens on 21 October, 2009 at 08:46
Thank you all the time again :D. Very nice work.Greetings to the team
by Doug Smith on 21 October, 2009 at 17:30
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/
by scott bothel on 22 October, 2009 at 19:14
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!
Pingback: WordPress Picks for the week [10/25] | Techtites
by Aaron D. Campbell on 2 November, 2009 at 21:16
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);)