Help Creating a Slideshow Custom Post Type with Custom Meta Boxes?

From the looks of things, your safest bet and easiest route would be to fork the More Fields plugin specifically for your use. The two biggest features I can see your fork needing are a field “factory” and a drag-and-drop interface.

Multiple Fields

My suggestion would be to look at the WordPress Widget class and use it as a model for your field factory – basically, borrow the ability to create multiple instances of a field once you have the framework built for it.

This is the core of how multiple widgets work in a sidebar:

  • You define the code for each widget once by extending the WP_Widget class.
  • Then, you can create as many copies of the widget as you want
    • The specifics of each widget are stored as serialized data in the options table
  • You can customize each widget, remove them with a simple delete command, and set their positioning explicitly through the Appearance drag-and-drop interface

Drag-and-drop

Once again, I suggest looking to the WordPress widget system for inspiration. We’ve already got a fairly intuitive drag-and-drop interface set up there, so it would be fairly easy to re-purpose much of the same code elsewhere. Or, if you want to get really fancy, you can implement your own drag-and-drop system inside a separate custom meta field.

So each slide would be defined by a custom meta box that’s linked to the post. The order of the slides would be set by a separate custom meta box that’s also linked to the post. I’d recommend submitting slide updates via AJAX so you can dynamically update the slide order meta box based on the information (this prevents having to manually hit “update” and wait for the page to reload before moving things around).

jQuery UI has a great “draggable” interface that you could easily manipulate for your purposes within this custom meta box. The hard part isn’t building the interface, it’s getting consistent, accurate communication between the meta box and the collection of slide meta boxes elsewhere on the page.

In Summary

What I gathered from your post is that you have a somewhat workable solution:

  • You’ve added 15 custom fields to your custom post type via the More Fields widget but want to dynamically add/remove fields rather than work with a set number
  • You want a way to adjust the order of these custom fields so that the slides load in order

The way I’d approach this is to abstract the custom meta creation process to a class I can use over and again to create new custom meta fields. Then I’d extend the class to initialize two types of meta boxes: one for slides, one for slide structure. I’d also build into the slide structure meta box the ability to dynamically create new slide meta boxes (the slide meta boxes would house their own “delete” action).

The entire slideshow would be stored not by the slide meta boxes, but by the slide structure meta box into a custom meta field for the post – the custom meta would be a jagged array, with each of the slides represented as arrays within it – in order. Customizing the order of the slideshow in the structure meta box would reorganize the array and re-save the post meta. This way I only have 1 meta value to read back out when I want access to the slideshow.

Between SlideDeck, More Fields, and the custom code you’ve put together so far, you’ve already got most of your solution in hand … you just need to get it all working together at the same time. I’d focus on getting the root implementation down first before adding the JavaScript embellishments – dynamically creating, modifying, saving, and deleting slides is more important than a rich text editor, IMO. Get that cracked out first. Then get the ordering system down. Then you can focus on getting multiple instances of TinyMCE working on the page.

Leave a Comment