I'm working on a Wordpress site for a general contractor friend of mine and we wanted to make something really easy for him to use to show before/after pictures. Now after a bout of hacking on Wordpress - be it plugins, theme changes, or just reading the API documents - I typically have to delude myself into believing that Wordpress was written in some sensible language, like Perl, so I can sleep that night. Tonight the healing process will have to begin a bit later than usual.

I settled on a Before/After plugin but not one of the jQuery slider-type plugins. The jQuery-based ones use a slider to show two pictures that pretty much have to be taken from the same angle/same scene/etc. to get a really good effect. Our needs were for a before/after in a room to display tile work or anything else that might come up. This plugin got me about 90% of the way. Its one of those plugins where it has pretty good admin integration - not the greatest, except when you post its dead simple (drag two images from your media gallery into a Before/After columns) - but fails on executing the full deal. The author suggests you edit your theme's template files to add some PHP to see if the current post has a before/after gallery associated with it and then make the call for the appropriate image. You'd likely have to do this in your single post and index templates. This just felt dirty to me.

The plugin is contained a single file beforeafter.php which makes our job all the easier.

Around line 30, prior to the declaration of $beforeafter we add an action:

#./wp-content/plugins/beforeafter/beforeafter.php  
⋮
add_action('the_content', 'before_after_content_action', 5, 1);  
⋮

So what's that 5 and 1 in there for? Glad you asked. So the five is somewhat sensible, its the priority in which your action will be executed when considered against the other actions registered for the "the_content" action. The 1? Well that is the number of arguments your function accepts. Uh, come again? Yeah. Exactly. You'll note that we cannot just pass arguments to this function, Wordpress will take care of that for us. And how do we know what arguments we're going to get? I wasn't able to find a definitive list and a lot of answers out there suggest just reading the Wordpress source code, so I guessed, and I guessed right.

After the $beforeafter I added our action:

#./wp-content/plugins/beforeafter/beforeafter.php  
⋮
function before_after_content_action($content) {  
        global $beforeafter;
        global $post;

        if (!($beforeafter->is_gallery($post->ID)))
                return $content;

?>
<table class="center" width="100%">
        <tr>
                <td class="center">
                        <?php $beforeafter->gallery('before', $post->ID, 'thumb', true, false, 'shadowbox'); ?>
                        <br />Before
                </td>
                <td>
                        <?php $beforeafter->gallery('after', $post->ID, 'thumb', true, false, 'shadowbox'); ?>
                        <br />After
                </td>
        </tr>
</table>
<?php
        return $content;
}
⋮

Those global declarations cause me to dry heave.

So it turns out that your action method should accept one parameter $content and return that value almost like a filter. The good news is that in an action method you can just, you know, throw up all over inside your editor with <?php ?> interspersed with code and that stuff will be output during execution as you would expect.

(That final argument, the 'shadowbox', lets you integrate the Wordpress 'shadowbox' incredibly easily. I was impressed.)

If I can manage it I'll try to put a better admin UI on this stuff and get the plugin out on Github and register it with Wordpress so the manual editing nonsense isn't necessary. I know there has to be at least another person out there who wants easy before/after functionality in their blog.

And the good news: I learned a lot about using vim during this process.