How to Add a Before-After Slider with Shortcode in WordPress?

Have you ever tried comparing two images on a website, only to find yourself opening multiple tabs or endlessly scrolling? It’s frustrating, especially when you want a quick, seamless way to view the transformation, whether it’s a photo edit, a design change, or a product demo.

The solution? Before-and-after sliders. These interactive tools let visitors drag a slider to compare two images directly on the same page. However, many WordPress users struggle to add this feature. Some plugins are overly complex, others require coding knowledge, and some simply don’t offer the flexibility you need.

But don’t worry, you don’t need to be a tech expert to integrate a stunning before-and-after slider on your site. In this guide, we’ll show you exactly how to add this engaging feature to your WordPress pages using a simple shortcode. Whether you’re a photographer showcasing your edits, a designer sharing a project transformation, or a business owner highlighting product results, this tool will help you create a more interactive and dynamic experience for your audience.

Let’s dive in and get you set up in just a few steps!

What Is a Before-After Slider in WordPress?

Before we dive into the tutorial, let’s take a moment to understand what exactly a before-and-after slider is.

A before-and-after slider is an interactive element that allows you to display two images (before and after) on a single canvas. The user can drag a slider or swipe left/right to view the difference between the two images.

For example:

• A photographer might use it to show the effect of their editing skills on an image. Before/after comparisons are perfect for photo retouching or showing how lighting adjustments have changed a shot.
• Interior designers can use the tool to showcase home renovations or remodels.
• Beauty and wellness businesses can display the transformation of clients after treatments.

Studies show that interactive content like before-and-after sliders boosts engagement by up to 60% compared to static images alone, as it invites visitors to explore and interact with the content.

Choosing the Right Plugin for Before-After Sliders

When it comes to adding a before-and-after slider to your WordPress site, choosing the right plugin is crucial for a smooth and hassle-free experience. With so many options available, it’s easy to feel overwhelmed, but don’t worry, we’re here to break it down.

Key Features to Look For

Before diving into specific plugins, let’s first explore what you should look for in a good before-and-after slider plugin:

1. Ease of Use: You don’t want a plugin that requires complex coding. Ideally, the plugin should offer an intuitive interface where you can simply upload your images, customize settings, and generate a shortcode that you can paste anywhere on your site.
   
2. Customization Options: The best plugins offer flexibility. You’ll want to be able to adjust things like slider orientation (horizontal vs. vertical), initial slider position (where the comparison starts), and the ability to add labels (e.g., “Before” and “After”).
   
3. Mobile Responsiveness: Make sure the plugin works well on mobile devices. With a large portion of users browsing websites from smartphones, it’s important that your slider adapts seamlessly to all screen sizes.
   
4. Speed and Performance: Plugins that load slowly can hurt your site’s performance and SEO rankings. Opt for a plugin that doesn’t sacrifice speed for functionality.
   
5. Support and Updates: A plugin that’s regularly updated and well-supported will ensure your slider continues to work well with future WordPress updates.

Popular Plugins Supporting Before After Slider with Shortcode

Here are a few top-rated plugins that make adding a before-and-after slider easy and offer shortcode support:

1. WP Before After Image Slider

This plugin is one of the simplest solutions for WordPress users. It lets you easily create before-and-after sliders with just a few clicks. After uploading your images, you can customize the look and feel, then generate a shortcode to paste into your posts or pages. It’s perfect for users who want a quick and simple solution without a steep learning curve.

Key Features:

• Drag-and-Drop Image Upload: This feature makes it easy to add your before-and-after images without needing to mess with file paths or image sizing. Simply drag the images into the plugin’s interface and they’re ready to go.
  
• Responsive Design: The plugin automatically adjusts to fit mobile and tablet screens, ensuring your slider looks great no matter what device your visitors use.
  
• Shortcode Generator: Once you’ve uploaded your images, the plugin generates a simple shortcode that you can paste directly into any post, page, or widget. It’s the easiest way to add the slider without coding.
  
• Customizable Slider Handle: You can choose between different styles for the slider handle, such as circle or line styles, to match the design of your site.
  
• Label Customization: Modify the text for the “Before” and “After” labels, allowing you to tailor the slider to your specific use case.

Best For:

• Photographers looking to show off photo edits.
  
• Designers presenting their work or transformations.
  
• Business owners showcasing product upgrades or features.

Why Choose It?

This plugin is perfect if you want an easy-to-use solution with minimal setup. It’s ideal for those who need something functional without a lot of complexity. Plus, it supports multiple sliders per page, so you can create different sliders for various sections of your site.

2. BEAF – Ultimate Before After Image Slider & Gallery

If you’re looking for something a little more feature-packed, BEAF might be the perfect choice. Not only does it support shortcodes, but it also allows you to create galleries of before-and-after images. You can customize slider handles, add labels, and control how the images appear on different devices. This plugin is great for designers or photographers who want full control over their sliders’ appearance.

Key Features:

• Multiple Slider Styles: BEAF allows you to customize the slider’s appearance, with options like different handle styles, adjustable slider thickness, and the ability to use either a vertical or horizontal sliding effect.
  
• Image Galleries: Unlike other plugins, BEAF enables you to create galleries with multiple before-and-after comparisons. This is perfect for showcasing a portfolio or a collection of products or services.
  
• Fully Customizable Labels and Captions: You can edit the “Before” and “After” labels, or add your own custom text to suit your brand. Plus, you can apply custom CSS for additional design flexibility.
  
• Mobile-First Design: The plugin is optimized for mobile devices, so the sliders automatically adjust for different screen sizes.
  
• Interactive Touch & Drag Features: BEAF includes smooth touch and drag functionality, making it intuitive for mobile users to interact with the slider.
  
• SEO-Friendly: It has built-in options for adding alt text to images, which helps with SEO.

3. Twenty20 Image Before-After

Twenty20 is a popular choice among WordPress users because of its simplicity and ease of integration. It’s particularly known for its user-friendly shortcode system and flexible configuration options. This plugin allows you to use parameters like img1, img2, direction, and align to fine-tune your sliders.

Key Features:

• Simple Shortcode Integration: The plugin uses a very straightforward shortcode system that allows you to easily integrate the before-and-after slider into your content. Simply add the shortcode and include the image URLs.
  
• Multiple Image Support: You can add more than just two images to compare. While it’s primarily designed for a basic two-image slider, advanced users can use additional parameters to switch between multiple images.
  
• Horizontal and Vertical Sliders: You can toggle between horizontal and vertical directions for the slider, depending on how you want to display your content.
  
• Alignment Control: Easily adjust the alignment of the slider (e.g., centered, left, or right) to match your design needs.
  
• No Extra Bloat: One of the key advantages of Twenty20 is its lightweight nature. It doesn’t slow down your website or come with unnecessary features.
  
• Mobile Responsive: Just like the other options, Twenty20 is mobile-responsive, so it works smoothly across all devices, ensuring a seamless experience for users.

By choosing the right plugin, you’ll be able to create a visually engaging, interactive experience that will captivate your audience and showcase your work in the best light possible.

Step-by-Step: Add a Before-After Slider via Shortcode

Now comes the part you’ve been waiting for: actually adding the slider to your website.

Don’t worry. You don’t need coding skills. If you can copy and paste, you can do this.

Let’s walk through the entire process step by step.

Step 1: Install and Activate the Plugin

First, log in to your WordPress Dashboard.

1. Go to Plugins → Add New
   
2. Search for your before-after slider plugin (Like ‘WP Before After Image Slider’)
   
3. Click Install Now
   
4. Then click Activate

Once activated, you’ll notice a new menu item added to your dashboard (usually labeled something like Before After Slider).

That’s your control center.

Once activated, you’ll see a new menu item for your plugin in the WordPress dashboard. In the case of WP Before After Image Slider, it will show up as “Before After Slider” or something similar.

Step 2: Create Your Slider

• Go to your plugin dashboard and click on the option to Create New Slider.
• Upload your Before and After images. Make sure the images are of the same size for the best visual effect.
• Adjust the slider settings, like:
  • Orientation (horizontal or vertical)
  • Slider handle style (e.g., circular or line)
  • Labels (you can change “Before” and “After” to suit your needs, like “Original” and “Enhanced” for photographers).

For example, a photographer might label the “Before” as “Original Image” and the “After” as “Retouched Image” to showcase their editing skills.

Step 3: Generate the Shortcode

Plugins like WP Before After Image Slider, you might see something like:

Once your slider is set up, it’s time to generate the shortcode. This is where the magic happens.

The plugin will automatically generate a shortcode that you can copy and paste into your pages or posts.

Example shortcode:

[before_after before_image=”URL-to-before.jpg” after_image=”URL-to-after.jpg”]

Here’s what this means:

• coca_bais → The shortcode tag that calls the slider
  
• id=”23925″ → The unique ID of your specific slider

Each slider you create will have its own ID. That means you can create multiple sliders and use them anywhere on your site.

Just copy the shortcode. That’s it.

Step 4: Insert the Shortcode in WordPress

There are different places you can add this shortcode in WordPress, depending on your design preference.

1. In a Post or Page (Classic Editor / Block Editor)

• Simply create a new post or page.
• Add a Shortcode Block (for Block Editor) or paste the shortcode directly in the editor.
• When you’re done, hit Publish, and you’ll see the before-and-after slider in action on your live site.

2. In Widget Areas or Sidebar

• Go to Appearance → Widgets.
• Add a Text Widget or Custom HTML widget.
• Paste the shortcode and hit Save.

The slider will now appear in your sidebar, footer, or any widgetized area of your website.

Customizing Your Slider

Adding a before-after slider is just the first step. The real magic happens when you customize it to match your brand, your audience, and the story you’re trying to tell.

A well-customized slider doesn’t just compare two images; it guides your visitor’s attention and strengthens your credibility.

Let’s look at how you can fine-tune it.

1. Orientation: Horizontal vs. Vertical

Most sliders default to horizontal orientation, where users drag left and right to compare images. This works great for:

• Portrait photography edits
  
• Product comparisons
  
• Logo or branding redesigns
  
• Facial retouching

However, if your audience primarily visits from mobile devices (which is likely, since more than half of web traffic comes from smartphones), you may want to experiment with a vertical slider.

Why?

On mobile, users naturally scroll up and down. A vertical comparison can sometimes feel more intuitive and easier to swipe, especially for full-height images like:

• Website redesign comparisons
  
• Interior room transformations
  
• Long-format artwork edits
  

Pro Tip: Test both orientations and see which one feels more natural for your specific content.

2. Handle Style and Design

The slider handle (the draggable element in the middle) might seem small, but it plays a big role in user experience.

You can usually customize:

• Handle shape (circle, line, arrows)
  
• Color
  
• Thickness
  
• Shadow or highlight effects

Choose a style that:

• Matches your brand colors
  
• Is clearly visible on both images
  
• Feels modern and clean

For example:

• A luxury photographer may prefer a thin, subtle handle.
  
• A bold creative agency might use a thicker, high-contrast handle.

The goal is clarity. If users can’t easily see where to drag, they won’t interact with it.

3. Default Slider Position (Starting Point)

Many plugins allow you to control the initial slider position (for example, 30%, 50%, or 70%).

This setting subtly influences how your audience experiences the transformation.

• 50% (centered) → Neutral comparison, most common.
  
• 30% (mostly “after”) → Emphasizes your result first.
  
• 70% (mostly “before”) → Builds anticipation for the improvement.

For photographers, starting slightly toward the “before” image can create a stronger “wow” moment when users drag the slider.

4. Custom Labels: Make It Contextual

Don’t just leave the default “Before” and “After” labels.

Customize them to match your niche and expertise.

For example:

Photographers

• “Original” / “Retouched”
  
• “RAW” / “Final Edit”
  
• “Unedited” / “Color Graded”

Designers

• “Concept” / “Final Design”
  
• “Old Brand” / “New Identity”

Interior Designers

• “Before Renovation” / “After Renovation”

This small change makes your slider feel intentional rather than generic. It also reinforces your expertise.

5. Add Captions for Context and SEO

This is something many users skip, but it’s powerful.

Add a short caption or description above or below your slider explaining what changed.

Example:

“This portrait was enhanced with color correction, skin retouching, and background cleanup to create a polished final look.”

Why this matters:

• It increases engagement
  
• It improves SEO
  
• It adds professionalism
  
• It helps users understand the transformation

Remember: Search engines can’t interpret image comparisons, but they can read your surrounding text.

6. Match It with Your Website Design

Finally, make sure your slider doesn’t feel out of place.

Check:

• Does the slider width align with your content container?
  
• Are the fonts consistent with your theme?
  
• Do the colors complement your brand?

If needed, you can use minor CSS adjustments to refine spacing, margins, or typography.

Common Troubleshooting Issues

Even though adding a before-and-after slider using shortcode is usually simple, sometimes things don’t appear exactly as expected. Don’t panic, most issues are small and easy to fix.

Let’s go through the most common problems and how you can solve them quickly.

1. Slider not displaying: Make sure the plugin is activated and the shortcode is entered correctly without any typos, missing brackets, or incorrect slider IDs.
   
2. Images not loading: Confirm that both before and after images are properly uploaded in the slider settings and that the correct image URLs or IDs are used.
   
3. Slider not moving or draggable: This may be caused by a JavaScript conflict. Try temporarily disabling other plugins to identify conflicts or clear your browser and site cache.
   
4. Layout looks broken or misaligned: Ensure both images have the same dimensions. Mismatched image sizes often cause alignment problems.
   
5. Styling doesn’t match your theme: Some WordPress themes override plugin styles. You can fix this by adding custom CSS or placing the slider inside a full-width container.
   
6. Slider not responsive on mobile: Check your theme’s mobile settings and test the slider on multiple screen sizes. Also, avoid using overly large image files that may affect performance.
   
7. Page loading slowly: Compress your images before uploading. Large image files can impact site speed and overall user experience.
   
8. Shortcode showing as plain text: Make sure you are using a Shortcode block (in Gutenberg) or placing the shortcode in a proper editor area that processes shortcodes.

These quick checks usually solve most issues within minutes.

Best Practices for Before/After Sliders

To get the most out of your before-and-after slider, here are some pro tips:

• Image Quality: Always use high-resolution, properly aligned images for both the “before” and “after” versions. Blurry, pixelated, or mismatched images weaken the impact of your transformation. Make sure both images have the same dimensions and angle so the comparison feels seamless and professional.
• Mobile Responsiveness: Ensure your slider performs smoothly across all devices. Since a large portion of users browse on mobile, test how easily the slider handle moves, whether labels remain readable, and if images scale correctly. A seamless mobile experience keeps visitors engaged longer.
• Clear Visual Contrast: Choose transformations with noticeable differences. Subtle changes may not create a strong impression. Whether it’s dramatic color correction, background removal, or a full renovation, the contrast should be obvious within seconds.
• Add Context or Explanation: Don’t rely only on visuals. Include a short caption or description explaining what was improved. This helps visitors understand the value of your work and also improves SEO by adding keyword-rich context around the slider.
• Optimize for Speed: Large image files can slow down your website. Compress your images without losing quality to maintain fast loading times. A slow-loading slider can increase bounce rate and reduce conversions.
• Strategic Placement: Place your slider where it supports your message, such as inside a case study, portfolio section, or product page. Avoid placing it randomly without context. Position it where users naturally look for proof.
• Limit Overuse: Using too many sliders on one page can overwhelm visitors and affect performance. Use them intentionally to highlight your best transformations, not every minor edit.
• Test Before Publishing: Preview your slider before going live. Check alignment, responsiveness, loading speed, and overall appearance. Small adjustments can make a big difference in presentation quality.

Pro Tip:

Track how users interact with your sliders. Some plugins allow you to see how often the slider is used or clicked. If users are swiping left and right, it’s a sign your content is engaging!

Wrap-Up

As you can see, adding a before-and-after slider to your WordPress site with shortcode is simple, effective, and offers a visually compelling way to engage your audience. Whether you’re a photographer, designer, or business owner, this interactive tool can elevate your website and make it more engaging for visitors.

Ready to give it a try? Install the plugin, generate your shortcode, and add it to your WordPress site today. I’m sure your audience will love interacting with the images and seeing the transformations you’ve worked so hard to create!

Frequently Asked Questions (FAQs)

This page was last edited on 28 February 2026, at 10:41 pm