A comprehensive database for everything WordPress related.

WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

How to Add Before and After Photos to Your WordPress Site

How to Add Before and After Photos to Your WordPress Site

Before and after photos are one of the most effective marketing tactics. The road to final results is often long and gruesome. Showing people what’s at the end of that road makes for a very convincing sales pitch.

If you want to show before and after photos on your WordPress site, you don’t need Photoshop or any design skills. In this short tutorial, we will show you how to create sleek before and after photos.

How Does the Before and After Photo Effect Work?

There are plenty of ways to create a before and after image, but if you want to make it quick and well-designed at the same time, install the Twenty20 Image Before-After plugin. When you have this plugin, you can create new before and after photos whenever you want and place them on any page on your website.

Instead of a static image, your website visitors get an interactive slider. Of course, this plugin can be used for comparisons or displaying two sides of the same product.

Now we’ll guide you through the process of setting up the plugin and adding before and after photos to your WordPress website.

Showing the Before and After Photo in WordPress

Since Twenty20 Image Before-After plugin is open-source, you can find it in the WordPress plugin directory. Simply go to the admin panel and click on Plugins>Add New. You will find the plugin you need by typing its name in the search bar.

Select the plugin and click on the “install” button. Once WordPress downloads and installs the plugin, you will see a message with an activation link. Click on it to activate the plugin. Now you’re ready to use it. In case you need a video guide on plugin installation, here’s a detailed guide to installing WordPress plugins.

Twenty 20 Plugin Install

When you decide to create a before and after slider image, go to the page backend. You will see the Twenty20 shortcode.

Twenty 20 Shortcode

Click on it to open the WordPress media library or upload the photos you need. Select two photos and click on the Insert button.

Twenty 20 Media

When you do that, you will see a pop-up with fields where you can add text and adjust the width, offset value, alignment, trigger action, slider direction, etc. When you customize your before and after photo, click on the Insert Shortcode button.

Twenty 20 Shortcode

Preview the page and check how your before and after image looks like. As you slide the handle to the side, the other image will appear.

Twenty 20 Preview


This before and after photos WordPress plugin is responsive and functional on all devices. As you can see, it boasts an easy and clean user interface. It supports WP Bakery Visual Composer, Elementor Page Builder, and UX Builder by UXThemes.

Now you’re all set. With this plugin, you can create an unlimited number of before and after images! If you want to enrich your website with more awesome photo effects, continue to this list of best WordPress slider plugins.

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!


WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply