OM DENNE EPISODE
I was publishing an article earlier that included a before-and-after image with a slider overlay. While there are numerous plugins available that perform this function, I prefer not to use third-party plugins due to the additional overhead, including limited features and advertisements for upgrades. I like to keep my WordPress instance as lean as possible, so I created a plugin that utilizes WordPress and jQuery to display the before-and-after images.
Before and After Image SliderHere’s a working demo of the slider:
Here’s the shortcode that produced it:
[before_after before="https://cdn.martech.zone/wp-content/uploads/2025/04/black-white.jpg" after="https://cdn.martech.zone/wp-content/uploads/2025/04/full-color.jpg" width="600"]
How to Install the Before and After Slider Plugin
Follow these steps to install and activate the plugin on your WordPress site:
- Create a new folder in the
wp-content/plugins/directory and name itbefore-after-slider. - Create a new file inside that folder and name it
before-after-slider.php. - Copy and paste the following code into the
before-after-slider.phpfile. - Save the file and activate the plugin from the WordPress admin dashboard.
When the page loads:
- If the shortcode is detected, the jQuery script and CSS are injected into the page header.
- The script initializes the slider behavior, setting the handle in the middle (50%) initially.
- Users interact with the handle to reveal more or less of the before or after image dynamically.
<?php
/**
* Plugin Name: Before and After Shortcode
* Plugin URI: https://dknewmedia.com
* Description: A simple shortcode to add a before and after slider over an image.
* Version: 1.0
* Author: Douglas Karr
* Author URI: https://dknewmedia.com
* License: GPL-2.0+
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
if (!defined('ABSPATH')) {
exit; // Exit if accessed directly.
}
function ba_slider_scripts() {
global $post;
if ( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'before_after' ) ) {
wp_enqueue_script( 'jquery' ); // jQuery is already included in WordPress
wp_add_inline_script( 'jquery', '
jQuery(document).ready(function($) {
$(".ba-slider").each(function() {
var $slider = $(this),
$before = $slider.find(".ba-before"),
$after = $slider.find(".ba-after"),
$handle = $slider.find(".ba-handle");
// Initialize slider position
var initialPercent = 50;
$before.css("clip-path", "inset(0 " + (100 - initialPercent) + "% 0 0)");
$after.css("clip-path", "inset(0 0 0 " + initialPercent + "%)");
$handle.css("left", initialPercent + "%");
// Handle drag and click
$slider.on("mousedown touchstart", function(e) {
e.preventDefault();
var moveHandler = function(moveEvent) {
moveEvent.preventDefault();
var clientX = moveEvent.type.includes("touch") ? moveEvent.originalEvent.touches[0].clientX : moveEvent.clientX,
offsetX = clientX - $slider.offset().left,
percent = Math.max(0, Math.min(100, (offsetX / $slider.width()) * 100));
// Update clip-path for both images
$before.css("clip-path", "inset(0 " + (100 - percent) + "% 0 0)");
$after.css("clip-path", "inset(0 0 0 " + percent + "%)");
$handle.css("left", percent + "%");
};
$(document).on("mousemove touchmove", moveHandler);
$(document).on("mouseup touchend", function() {
$(document).off("mousemove touchmove", moveHandler);
});
});
});
});
' );
// Inline CSS to minimize requests
wp_add_inline_style( 'wp-block-library', '
.ba-slider { position: relative; width: 100%; max-width: 100%; overflow: hidden; }
.ba-slider img { position: absolute; top: 0; left: 0; width: 100%; height: auto; object-fit: cover; object-position: center; }
.ba-before, .ba-after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ba-before img, .ba-after img { width: 100%; height: 100%; }
.ba-handle { position: absolute; top: 0; width: 4px; height: 100%; background: #fff; cursor: ew-resize; box-shadow: 0 0 5px rgba(0,0,0,0.3); z-index: 10; }
.ba-handle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 0 5px rgba(0,0,0,0.3); }
' );
}
}
add_action( 'wp_enqueue_scripts', 'ba_slider_scripts' );
// Shortcode function
function ba_slider_shortcode( $atts ) {
$atts = shortcode_atts( array(
'before' => '',
'after' => '',
'width' => '600',
'height' => '',
), $atts, 'before_after' );
// Sanitize inputs
$before = esc_url( $atts['before'] );
$after = esc_url( $atts['after'] );
$width = esc_attr( $atts['width'] );
$height = $atts['height'] ? 'height: ' . esc_attr( $atts['height'] ) . 'px;' : 'aspect-ratio: 16 / 9;';
if ( ! $before || ! $after ) {
return '<p>Error: Both before and after images are required.</p>';
}
// Generate HTML, wrapped in wp-block-image and figure for centering
$output = '<div class="wp-block-image">';
$output .= '<figure class="aligncenter size-full">';
$output .= '<div class="ba-slider" style="width: ' . $width . 'px; max-width: 100%; ' . $height . '">';
$output .= '<div class="ba-before"><img src="https://martech.zone/interviews' . $before . '" alt="Before" /></div>';
$output .= '<div class="ba-after"><img src="https://martech.zone/interviews' . $after . '" alt="After" /></div>';
$output .= '<div class="ba-handle"></div>';
$output .= '</div>';
$output .= '</figure>';
$output .= '</div>';
return $output;
}
add_shortcode( 'before_after', 'ba_slider_shortcode' );
The first portion of the plugin ensures security and proper environment by exiting immediately if the code is accessed outside of WordPress (if (!defined('ABSPATH')) exit;).
JavaScript and CSS Loading: The plugin conditionally enqueues JavaScript and CSS only if the current page or post contains the
Error: Both before and after images are required.
- It hooks into WordPress’s
wp_enqueue_scriptsaction to add both:- JavaScript, which uses jQuery to initialize the before/after slider. It:
- Positions the before and after images side-by-side using CSS
clip-pathto reveal or hide parts of each image. - Adds event listeners for mouse and touch events, allowing the visitor to drag a handle horizontally to adjust the visible portions of the before and after images in real-time.
- Updates the handle’s position and dynamically adjusts the visibility of each image based on pointer movement.
- Positions the before and after images side-by-side using CSS
- Inline CSS, which:
- Style the slider container and images to stack correctly with absolute positioning.
- Designs the draggable handle, including a vertical white line and a circular indicator, for improved user experience (UX).
- JavaScript, which uses jQuery to initialize the before/after slider. It:
Shortcode Functionality: The main shortcode function ba_slider_shortcode():
- Accepts and sanitizes four optional attributes:
- Verifies that both
beforeandafterimages are supplied; otherwise, it displays an error message. - Constructs the slider HTML structure:
- Wraps the slider in a WordPress
wp-block-imagediv and afigureelement for alignment. - Includes the two images and the draggable handle inside a
divwith classba-slider. - Applies the user-specified width and height/aspect ratio styling inline.
- Wraps the slider in a WordPress
©2025 DK New Media, LLC, All rights reserved | Disclosure
Originally Published on Martech Zone: WordPress: How To Build a Shortcode Plugin For A Simple Before and After Image Slider
Engelsk
USA
SØG BLANDT TIDLIGERE EPISODER
Søg efter gamle afsnit af Martech Zone Interviews.
ANDRE EPISODE I DENNE PODCAST
We live in a world oversaturated with content, standing out doesn’t always mean saying more—it means saying it better. Whether you’re a content creator, educator, business communicator, or accessibility advocate, converting text into dynamic, human-like speech can amplify your impact ac…
Businesses face an unprecedented challenge: determining who’s real and who’s fake online. With fraudsters’ rising sophistication and the ease of creating synthetic identities, companies struggle to protect their platforms while maintaining a frictionless experience for legitimat…
Development isn’t limited to product engineers—it’s increasingly collaborative, involving sales engineers, marketers, and data teams who work together to build and maintain dynamic workflows, personalized user journeys, and integrated platforms. As tech stacks grow in complexity and expectations …
Adaptability and quality are critical online. Designers need graphics that maintain clarity on any screen size and load seamlessly across devices and platforms. Scalable Vector Graphics (SVGs) meet this demand perfectly, offering dynamic resizing, lightweight code, and native support in all moder…
Too often, companies begin with a solution and then search for a problem. Juiciero is a prime example. No one needed a high-tech juicer, so the company folded. This product-first approach is backward. The most successful businesses start by understanding customer pain points. Every product decisi…
Ansvarsfraskrivelse: Podcasten og kunstværket, der er indlejret på denne side, er fra Douglas Karr, som tilhører dens ejer og ikke er tilknyttet eller godkendt af Listen Notes, Inc.
REDIG
Tak fordi du hjælper med at holde podcast-databasen opdateret.
