WordPress + Smooth Slider + Verve Meta Boxes

Aug2010

When developing websites, more often than not, I’m dedicating a significant amount of time to making it easier for people to post content. The WordPress back-end does a great job getting people started, but more complex functionality requires plugins that aren’t always built to work seamlessly together. That’s where my job comes in, and I thought I’d share my experience on getting some extra mileage out of a couple great plugins.

I recently worked on a site that required a front page box displaying featured posts. The posts would be shown as a slideshow, while giving the visitor an option to select which slide to view. For this functionality, I used a wonderful plugin called Smooth Slider by Tejaswini Deshpande and Sanjeev Mishra. One of the many features of Smooth Slider is that it lets you assign an image to a sliding post based on custom fields. In this case, developers must have a URL assigned to a custom field called “slider_thumbnail.” Within the plugin settings, there’s no way to assign a different custom field, which is part of what I needed to do.

When creating a feature, authors often want to associate an image with the post, without necessarily having to put the image within the post itself. This functionality can be achieved with Verve Meta Boxes. This plugin, written by Komra Moriko and Vaughn Draughon, allows developers to add a visual interface for adding custom fields.

In this case, I wanted to get Verve Meta Boxes to assign the URL of an image to a custom field, and have that image picked up by Smooth Slider. I also wanted to reposition the Verve Meta Box container to the admin right sidebar (out-of-the-box). To achieve this end, I had to modify the codebase of both plugins. The unfortunate side-effect of this process is that developers will have to re-edit the code if they decide to upgrade the plugins in the future. Nonetheless, I thought I’d share the steps. I may look into writing a small plugin that adds this functionality without needing to modify the original plugin code, but the steps outlined in this tutorial make for a pretty easy customization anyway.

Associating Smooth Slider with Verve Meta Boxes:

1. Download and install the Verve Meta Boxes (VBM) plugin.  
2. In the VBM Settings, create your new box. Add the field type Image and give it a name (for this tutorial, it’s Select Image).
3. Once you’ve assigned the field type, you’ll be able to see the custom field that the image URL will be assigned to. In this case it’s select_image.
4. Download and install the Smooth Slider plugin.
5. In the Smooth Slider Settings, under Thumbnail Image, beside Pick Image From, select the slider_thumbnail Custom Field radio button, and click Save Changes.
6. Go to Plugins, and under Smooth Slider, click Edit.
7. Editing smooth-slider.php, search for:

get_post_meta($post_id, 'slider_thumbnail', true);

and replace the slider_thumbnail so that it looks like:

get_post_meta($post_id, 'select_image', true);

There should be three instances that need to be changed.
Make sure you click Update File once you are done.

That’s it. You may have to change some settings in Smooth Slider to get it to crop and resize the image, but no other code changes for assigning VBM images to Smooth Slider are necessary.

Changing the position of the Verve Meta Box interface when adding/editing posts (move to right sidebar):

1. Go to Plugins, and under Verve Meta Boxes, click Edit
   
2. Editing verve-meta-boxes.php, search for:

'verve_meta_box_content', $c, 'normal', 'high', $args );

and replace normal so that it looks like:

'verve_meta_box_content', $c, 'side', 'high', $args );

I also replaced high with low since I didn’t want the Meta Box to be displayed above the Publish box:

'verve_meta_box_content', $c, 'side', 'low', $args );

Click Update File and that’s it. You can read more about meta boxes in the WordPress codex here.

These types of changes shouldn’t be hard to do for the plugin developers, who have done great work responding to user requests and recommendations. But until they get time to add these features, this tutorial will hopefully help you out.