Getting Started

The WordPress plugin packages the current Distorted Media Slider engine inside an admin workflow for presets, sliders and shortcode placement.

The front-end output uses the same responsive layout, helper UI, captions and post-processing settings documented in the JavaScript version. Use presets to control those values without editing code directly.

Installation

After downloading the package, locate the installable plugin archive and upload it from the WordPress admin area.

1. Open Plugins and click Add New.
2. Choose the installable plugin zip file.
3. Click Install Now.
4. Activate the plugin after the upload finishes.

Update

Deactivate and replace the plugin with the newer version, then clear any cache layer used by the site so the updated scripts and styles are loaded.

Usage

The plugin workflow has three parts: presets for behavior and styling, galleries for media items, and shortcode placement for output.

Presets

Start by selecting or duplicating a preset that is close to the effect you need. Presets expose the current slider options such as responsive sizing, intro animation, captions, helper prompt, drag friction and shader controls.

Update the preset after changing any option so the values are stored and reused across sliders.

Galleries

Create a new slider, give it a name and then add items. Each item can define source media, caption HTML and per-item visual overrides.

Per-item options include helper sprite color, helper text color and noise pass color. Captions support safe inline HTML such as title/description blocks and optional CTA links.

Shortcode

Use the shortcode generator after the preset and slider are ready. Insert the generated shortcode in a page, post or custom post type to render the slider on the front end.

API - Application Programming Interface

The WordPress plugin uses the same front-end JavaScript engine, so you can access slider instances and listen for runtime events.

Each rendered slider is exposed on window with an auto-generated instance name (for example fwddms0, fwddms1).

let fwddmsAPI = setInterval(() => {
	if(window['fwddms0']){
		clearInterval(fwddmsAPI);

		// Register events when API is ready.
		fwddms0.addEventListener(FWDDMS.ITEM_UPDATE, onItemUpdate);
		fwddms0.addEventListener(FWDDMS.ERROR, onError);
	}
}, 100);

function onItemUpdate(event){
	console.log(event);
}

function onError(event){
	console.log(event);
}

Methods and events are listed below.

If multiple sliders are rendered on the same page, bind to the correct instance name for each slider.

Methods

Methods are available through the slider instance (for example fwddms0).

destroy

.destroy()

Destroys the slider instance and removes it from the DOM.

Events

Events are registered with addEventListener after the API is ready.

FWDDMS.ITEM_UPDATE

Dispatched when the active item state updates during interaction.

FWDDMS.ERROR

Dispatched when an error occurs (for example invalid or missing media source).

FWDDMS.MINIMIZE

Dispatched when the slider enters minimized state.

FWDDMS.MAXIMIZE

Dispatched when the slider returns to maximized state.

Custom CSS

The plugin does not include a built-in CSS Editor screen, but it does ship with a front-end stylesheet at wp-content/plugins/distorted-media-slider/css/global.css.

You can style the slider in two ways:

1. Recommended: Go to Appearance -> Customize -> Additional CSS, add your overrides, then click Publish.
2. Direct file edit: Open wp-content/plugins/distorted-media-slider/css/global.css, update the rules and save the file.
3. Refresh the front-end page and clear any site/CDN cache if old styles still appear.

Note: direct edits inside the plugin folder can be overwritten by future plugin updates. For long-term maintainability, prefer Additional CSS, a child theme, or a custom CSS plugin.

Notes

For visual tuning details such as backgroundColor, dragFriction, flowmapRGBShift and helper prompt options, refer to the JavaScript documentation page. Those are the same front-end controls used by plugin presets.

When changing CSS, save in your theme/custom CSS location and clear cache layers so new styles are loaded immediately.

For support and customizations please write to this email.

WordPress Documentation

Installation and usage guide for the WordPress and WooCommerce plugin, including presets, galleries, shortcode and custom CSS workflow.