By One of my tasks as a builder of websites is to make the user experience for the client as painless as possible, on both the front and back ends of the website. Painless, or better yet, enjoyable, user experience is one of those things we’ll never fully reach, but one we should always be striving for nonetheless.
Introducing Soliloquy
Soliloquy is a WordPress plugin for creating responsive sliders. It has lots of promise, and I’m convinced enough that I bought a developer’s license and I’m installing it in every new website that needs a slider and even going back and installing it retroactively in some of my older websites.
Even though it does many things very well, in my opinion it currently falls a little short in how a user creates or edits sliders. I’m okay with it personally, but like I said earlier, I need to be thinking about my clients and their on-going user experience as people who may not be intimately familiar with WordPress, or websites in general.
The one thing in particular I’d like to see changed is that removing an image from a slider also permanently removes that image from the Media Library. Earlier this morning I added a feature request on Soliloquy’s forum to change that, if possible, but until then I wanted to come up with a viable alternative solution.
Using Custom Post Types to add slides to the slider
As I thought through this problem, the solution that I arrived at was to create a custom post type called “Slides” and use Soliloquy’s Featured Content Addon to display those custom post type slides in the slider. So far so good, and fairly easy to implement.
The benefit to this approach, as I see it, is that it removes the end user from Soliloquy’s potentially intimidating interface. Want to add a new slide to the slider? Go to “Slides,” click on “Add a new slide,” fill in the blanks, upload a featured image, hit “Publish” and you’re done.
Want to remove a slide? Go to that slide and either switch the status to “Draft” or move it to the trash. And even if you move it to the trash your slide image will still be available to you in the Media Library.
What does that slide link to?
Slides in a slider are typically meant to lead someone to specific content elsewhere on the website, serving as hooks or lead-ins to that additional content. Soliloquy’s default slider allows you to link your slides to any URL you wish, but the Featured Content slider doesn’t do this – the only options you have here are to link the image and/or the title to the slide post itself.
While this linking method makes sense for some types of featured content, it doesn’t work if you’re using custom post types to generate the slides. After all, why would you want to link to the slide itself?
Add a metabox and filter the slide’s default image link
You may have noticed that I added one metabox to the Slide custom post type. That metabox gives an option to include a custom URL for the slide to link to. That’s all well and good, but how to tie that URL back to Soliloquy so that the link is included with the slide?
I looked under the hood of the Featured Content Addon and found a filter that I thought might work for this purpose. I wrote and added the code below to my core functionality plugin and the custom links were added to the slides. Excellent!
(If you’re not using a core functionality plugin you could also add it to your functions.php file and the end result should be the same.)
Gist – Filter Soliloquy Featured Content Slider post data
Code for the custom post type and metabox
To make this tutorial more or less complete I’m including the code I used to create the “Slides” custom post type and the custom metabox. For metaboxes I use the Custom Metabox library from Andrew Norcross, Jared Atchinson, and Bill Erickson which you can find here on GitHub.
Gist – Create the ‘Slides’ custom post type