Simple slider for WordPress Post Types with Transients
I've been using the Transients API on a more regular basis recently, what with Optimise! in the wind so much right now. Here's a short & sweet approach to creating and caching an image slider for a WordPress post, page or custom post type.
For this example, the result would be an image slider with thumbnail pagination (per the layout here).
bxSlider is a really great script that comes with a lot of helper options built-in. The markup is a simple unordered list containing images, with a class on the <ul> tag.
The bundled CSS can be trimmed substantially—obviously this depends on your particular configuration—and, once done, it can be dropped into style.css to avoid an additional script link.
Lastly, call the slider via the <ul> class:
The way I typically use this, the images are all stored as attachments to the current page. For the client, it's then just a case of uploading an image via the post Media Uploader in order to create or add to a slider.1
The above will create two additional images per uploaded image, one for the slider and one for its corresponding pagination thumbnail.
All together now
To pull the post images into the slider use get_children. This will output an array which can then be looped through to grab each image:
The important part is the second argument of wp_get_attachment_image: bx-slide. This references the resized images defined earlier with add_image_size and ensures a correctly proportioned image is used.
A couple of useful things to note:
'orderby' => 'menu_order'as an argument of
get_childrenallows the slider image order to be manipulated via the drag-and-drop Media Uploader panel
- you can add additional attributes to the
<img>element with an optional array as the fourth argument of
At this point, it's just a case of wrapping everything with the bxSlider markup to unlock and achieve your image slider badge.
- setting a unique name for the transient by appending a unique value (the post ID) to a prefix
- checking to see if a transient for this post type object already exists
- if a transient exists go to the last line
- if there is no transient, run the query
- set the output of the query in a transient
- output the transient
The third argument of
set_transient(), "60*60", specifies how long a transient should persist. In this case it will expire after one hour (60 x 60 seconds). Once a transient has expired a new one will be created when the page is next visited.
Back on your page, you just need to call
…and your slider will display.
Clearing the cache
As soon as your slider displays in a browser for the first time, it will be cached. However, you may need to make a change—for example, add a new image—and want to see the result without waiting for the transient to expire. In this case, just hook
delete_transient() into the
save_post action, as so:
With the above in place, whenever content is saved the associated transient will be expired.
- So, caveat: if there's a requirement for images on a page other than those to be included in the slider, there'll need to be additional filtering for "slider only" images going on.
- The most amazing I've seen so far was a client-uploaded image with a 1:20 ratio.
- Don't forget to title your transients!