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: WordPress Themes
Other posts you may like:
The focus keyword in WordPress SEO »
500 Website Reviews, what we've learned! »
Change of pricing / licensing for Video SEO plugin »
Yoast.com runs on the Genesis Framework
The 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!
Share it!
Tweet
Subscribe and never miss a post!
Subscribe to the free newsletter now for weekly updates. (No spam, we promise)
Trackbacks
-
Tutorial: Thickbox / Lightbox nur bei Be… | Wordpress Lesezeichen says:16 October, 2009 at 10:25
[...] Thickbox / Lightbox nur bei Bedarf laden yoast.com/conditional-thickbox-loading/ Tweet This!Share this on TechnoratiSubmit this to NetvibesAdd this to Mister WongMark this on [...]
-
New Wordpress Theme – Slow Performance says:16 October, 2009 at 13:02
[...] came across a post on Yoast called Quick WP tip #2: Conditional Thickbox loading that explained how to load Thickbox Javascript files only when needed. Thickbox does the same thing [...]
-
Loading WordPress’ Thickbox Only When Needed – Smiths R Us says:20 October, 2009 at 17:24
[...] and jQuery loading on all pages when most of them don’t even use it. That’s why Joost de Valk detailed a nice tip to only load thickbox when needed by checking the page content for references to it. All it takes is a few lines of code in your [...]
-
WordPress Picks for the week [10/25] | Techtites says:
29 Responses
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) {
I also wonder this..
how to achieve this for homepage ?
It would be nice to check this blog, if you are a beginner. How to include thickbox in wordpress just 3 lines of code. www.myhtmlworld.com/wordpress/create-thickbox-wordpress.html
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.
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 :)
Cool, now if you’d do me the pleasure of commenting with your real name, I’d appreciate it :)
I don’t think this is very useful :(
Well others seem to do find it useful, so, ehm, what’s the use of this comment? :)
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.
Fancybox looks great, I’ve found thickbox kind of slow to load anything, like sometimes 10+secs, would this method work with fancybox too?
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
Thanks Joost, this is going to come in very handy on my site. I always look forward to reading your latest updates!
Karl
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 ?
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.
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.
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 :)
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!
Thanks for sharing this, it’s a nice solution to a common problem.
Enjoy your stuff, keep it up (in spite of the whiners).
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?
A good tip, Joost de Valk. This make WP loads faster when there’s no images in post content. Thank you.
Thank you all the time again :D. Very nice work.Greetings to the team
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 smithsrus.com/loading-wordpress-thickbox-only-when-needed/
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!
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 – 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);)