Before and After Slider for WordPress
Show a renovation, retouch, or transformation inside a WordPress page. Create your comparison in Before After Photo Maker - BAGen, save it, and place its embed code in your page editor.
Create your slider. Sign in to save and get your embed code.
Before you begin
Your WordPress account and hosting setup must allow the script or iframe you paste. A Custom HTML block alone does not guarantee that either format is permitted.
Create and save your comparison
Open the slider editor and upload your before and after images, or enter publicly accessible image URLs. Use matching viewpoints and adjust the alignment, labels, and width in the preview.
Select Save & get code. Sign in when prompted, then save the slider and copy the Script snippet. Before After Photo Maker - BAGen serves the saved slider; this is an embed service, not a WordPress plugin. Plan limits and branding settings apply to your Before After Photo Maker - BAGen account.
Add the slider with a Custom HTML block
Open your WordPress page
Edit the page or post where the image comparison should appear. Add a Custom HTML block at that position.
Paste your saved embed code
Use the complete Script snippet from Before After Photo Maker - BAGen. Keep the div and script together in the HTML/code editor. If your WordPress version presents separate HTML and JavaScript panels, keep the supplied snippet in the HTML panel rather than copying script tags into a JavaScript-only field.
Save and check the published page
Update or publish the page, then open its public URL in a new tab. Drag the comparison handle and check the result on a phone. The editor preview may not run third-party scripts.
If code disappears after saving, your account, WordPress.com plan, network configuration, or security tools may be filtering it. Ask the site administrator to check which embeds are supported. Switching to iframe only helps when your site permits iframes; WordPress can filter both formats.
Using Elementor? Choose the HTML widget
Open the page in Elementor and place an HTML widget where you want the before and after slider. Paste the complete Before After Photo Maker - BAGen Script snippet into that widget, save your changes, and test the public page outside the editor.
Use the HTML widget rather than a text widget or image carousel. If the HTML widget is unavailable, ask the site administrator to check your role. Before After Photo Maker - BAGen does not install a native Elementor comparison widget.
Do I need a WordPress before and after plugin?
Before After Photo Maker - BAGen can provide the comparison through an embed, so you do not need to install a Before After Photo Maker - BAGen plugin when your WordPress site accepts the generated code. Create and update the saved comparison in Before After Photo Maker - BAGen; WordPress displays it on your page.
If you need a Gutenberg block, a shortcode managed entirely in WordPress, or images and settings stored only within WordPress, a native before and after plugin may better match that workflow. The embed approach depends on Before After Photo Maker - BAGen remaining available.
If your image comparison does not appear
Check what WordPress saved
Reopen the Custom HTML block. Confirm that the embed identifier and script URL are still present. Missing tags indicate filtering rather than an alignment problem.
Check the saved slider and images
Confirm the slider still exists in your Before After Photo Maker - BAGen account. If you used image URLs, open them in a signed-out browser to make sure visitors can access them.
Check the public page
If the saved code is intact, ask your site maintainer to check caching, script optimization, consent controls, or content security rules. Check the actual public page after each supported configuration change.
Common questions
Can I add a WordPress before and after slider without a plugin?
Yes, if your WordPress setup permits Before After Photo Maker - BAGen's generated script or iframe. Use a Custom HTML block or Elementor HTML widget. This uses Before After Photo Maker - BAGen's hosted embed service rather than a native WordPress plugin.
Does this work on WordPress.com?
It depends on the code permissions available on your WordPress.com plan and account. Check WordPress.com's current Custom HTML documentation before relying on script or iframe embeds.
Can I edit the images after embedding?
Update the same saved slider in Before After Photo Maker - BAGen and save your changes. Its embed identifier stays the same, so you do not need to replace the snippet in WordPress. Refresh the public page to check the update.