Display Before and After Images In WordPress With The TwentyTwenty Plugin

Have you ever wanted to combine two images to show a before and after? You can’t do that with WordPress out of the box but it’s possible if you use the TwentyTwenty plugin by Corey Martin. The plugin takes advantage of the clip property within CSS by stacking two identical sized images on top of each other. The clip property allows the image to show through the container. The slider is responsive and uses custom movement events within the jQuery Event Move library to support 1:1 slider movement on mobile devices.

The plugin is very simple to use. Upload two identical sized images to the media library. When inserting images into a post, make sure the attachment display settings for image size are the same. Add the [TwentyTwenty] shortcode above the before image. Add [/TwentyTwenty] after the second image. Here’s an example of the shortcode added to a post.

TwentyTwenty Shortcode In Action
TwentyTwenty Shortcode In Action

The shortcode generates a slider that can be moved back and forth. You’ll see which images are before and after when you hover over the slider. To see either image, users must click and drag the circle left or right.

TwentyTwenty Before Image
TwentyTwenty Before Image
TwentyTwenty After Image
TwentyTwenty After Image

The plugin was written using Sass and Zurb.com has a listing of each Sass variable used and what its default value is. The variables enable you to control everything from the handle color to the handle radius.

Here are a couple of ideas where TwentyTwenty would be ideal to use.

  • Compare counterfeit merchandise to real merchandise
  • Website redesigns
  • Home improvement renovations

During my test with WordPress 3.9, I didn’t experience any problems. According to Martin, TwentyTwenty is compatible with the latest versions of Chrome, Safari, FireFox, iOS, IE 9, and above. If you want to see the plugin in action, you can either watch this screencast by Martin or visit the plugin’s page on Zurb.com.

Outside of showing before and after images, what other creative ways could this plugin be used?

Would you like to write for WP Tavern? We are always accepting guest posts from the community and are looking for new contributors. Get in touch with us and let's discuss your ideas.


  1. Why don’t all plugins come with a great “how to” video like Twenty Twenty?


    1. Hmmm, so that is a great video? I think I could create something like that myself.

      I’ve never seen the point in instructional videos as I never use them myself. I find it’s faster to read text instead.

      But if a simple video like that is all that people want, then perhaps I should go and create videos for all of my plugins then.


  2. Looking forward to the inevitable plugin/theme naming confusion in 6 years time ;)


  3. In case anyone else was as confused as me ….

    There is the TwentyTen theme for WordPress, which has nothing to do with this.
    There is the TwentyTen Sass/jQuery plugin which this is based on.
    There is the TwentyTen WordPress plugin, which is what was reviewed above.

    Naming nightmare :/

    It’s a nice WordPress plugin though. Now I need to find an excuse/reason to install it :)


  4. truly an amazing plugin…I can’t wait to install it now. great vid too….awesome attention to every detail!


  5. Very nice plugin. Interessting that it is the only one I could find workind with WordPress 3.91. I wonder whether it is possible to change the overlay words from case to case to something custom, so that it is not always BEFORE and AFTER?


  6. Twentytwenty works fine with Android and iPhones, but for some reason it doesn’t display properly on my iMac P.C or iPad.
    I’m not a developer, and was wondering if anyone knows of any known conflicts using certain themes or plugins.
    I’d really like to get this plugin working properly on my website.


  7. I think the plugin idea is great and when it works it does a great job. However, it does not work as smooth as it should. When opening a post with the plugin the page does not refresh properly and the viewer has to refresh the page again for the plugin to show itself and work. Some work is still needed and hopefully we see an updated version soon.


Comments are closed.