Getting Started

Create Your First Slider

1. Go to Zoro Slider in the WordPress admin.
2. Click New Slider.
3. Enter a slider name and optional alias.
4. Save the new slider.
5. Open the builder for that slider.

Manage a Slider From the Dashboard

From the dashboard, each slider can be managed directly.

Common actions include:

• build or reopen the slider in the builder
• open slider settings
• clone the slider
• preview the slider
• open the embed manager
• export the slider
• delete the slider

Recommended flow:

1. create the slider
2. open Slider Settings
3. open the builder
4. add slides and layers
5. preview
6. embed or export

For the dashboard management actions in a dedicated quick-start format, see Manage Sliders.

Basic Workflow

The normal workflow is:

1. create the slider
2. define its source, size, and layout in Slider Settings
3. add slides
4. define each slide background in Slide Settings
5. add layers to each slide
6. style and animate the layers in Layer Settings
7. save
8. preview
9. publish with a shortcode or PHP snippet

More detail:

• global slider controls: Slider Options
• slide background controls: Slide Options
• layer controls: Layer Options
• publishing: Publishing and Shortcodes
• create a slider in several ways: Create New Slider
• create slides: Create New Slide
• clone slides: Clone New Slide
• add layers: Add Layer to a Slide
• clone layers: Clone Layer

Manual Sliders vs Source-Driven Sliders

You can build a slider in three common ways:

• Manual / Builder Slides: build each slide by hand inside the builder
• Posts: build a slide layout once, then let the slider repeat that layout for queried posts
• JSON import: build a slide layout once, then let the slider repeat that layout for JSON feed items
• YouTube Playlist: build a slide layout once, then let the slider repeat that layout for videos returned by a YouTube playlist

Additional source integrations may be introduced in later releases. Only the four source types above are part of the current documented release.

Use Manual / Builder Slides when:

• each slide needs unique design or copy
• you are building a hero banner, promo slider, or custom presentation

Use Posts when:

• you want a blog/news slider
• you want a portfolio or team carousel from a custom post type
• you want a testimonial rotator from post entries

Use JSON import when:

• your content comes from a custom endpoint or static JSON file
• you want to reuse one layout for external product, campaign, or feed data
• you need a slider that is not tied directly to WordPress posts

Use YouTube Playlist when:

• you want a slider that pulls directly from a YouTube playlist
• you want one slide design to repeat automatically for many videos
• you want to show a playable video inside an HTML layer by using {{video_embed}}

Create Your First Post-Driven Slider

If you want the slider to pull from WordPress posts automatically:

1. create a new slider
2. open Slider Settings
3. set Source Type to Posts
4. choose the Post Type
5. narrow the source with Categories
6. define sorting and count options
7. open the builder and design the slide using placeholders
8. save and preview

Typical placeholders include:

• {{post_title}}
• {{post_excerpt}}
• {{post_date}}
• {{post_author}}
• {{post_link}}
• {{featured_image}}

For the full source settings, see Slider Options. For placeholder usage, see Layer Options.

Create Your First JSON-Driven Slider

If you want the slider to pull from a JSON feed:

1. create a new slider
2. open Slider Settings
3. set Source Type to JSON import
4. enter the JSON URL
5. set the Data Path
6. configure the field mappings
7. open the builder and design the slide using placeholders
8. save and preview

Typical JSON placeholders include:

• {{title}}
• {{description}}
• {{image_url}}
• {{link_url}}

Cross-source placeholders can still be used too, for example:

• {{post_title}}
• {{post_excerpt}}
• {{featured_image}}

For the full JSON source settings, see Slider Options.

Create Your First YouTube-Driven Slider

If you want the slider to pull from a YouTube playlist:

1. create a new slider
2. open Slider Settings
3. set Source Type to YouTube Playlist
4. enter the Playlist ID / URL
5. enter the API Key
6. set Max Videos
7. open the builder and design the slide using placeholders
8. save and preview

Typical YouTube placeholders include:

• {{title}}
• {{description}}
• {{video_url}}
• {{featured_image}}
• {{channel_title}}
• {{published_at}}

For playable videos inside the slide, use:

• {{video_embed}}

Place {{video_embed}} inside an HTML layer so the player can fill the layer frame properly.

First Builder Selection Tasks

After you add a few layers, test the builder selection workflow early:

1. click one layer to make it active
2. hold Shift and click one or two more layers
3. press Ctrl + G to group them
4. drag one grouped member and confirm the group moves together
5. press Ctrl + G again to ungroup

This is a good first test when you are building layouts from separate layers such as shapes, captions, text, icons, and buttons.

Also test the canvas context menu early:

1. right-click a layer
2. confirm that actions like hide, lock, clone, settings, delete, and style tools are available

This helps you learn the fastest layer-management workflow before the slide becomes more complex.

[screenshot_here]

Choose the Right Layer Type

The builder now separates three text-related layer types:

• Text: plain text only
• Caption: styled caption presets such as Alpha, Bravo, Charlie, and Delta
• HTML: custom markup when you intentionally need HTML inside one layer

Use this rule of thumb:

• choose Text for normal copy and headings
• choose Caption when you want the caption-style treatments
• choose HTML only when you really need markup structure

Create Your First Slide

After the slider exists, create the first slide from the builder:

1. open the slider builder
2. click Create a new slide when starting from an empty slider, or use Add Slide
3. the builder opens Manage Slides
4. the new slide becomes the active working slide

Once the slide exists, continue immediately with:

1. open Slide Settings
2. choose a background style such as color, image, featured image, JSON image, or video
3. add one or more layers

For slide-specific details, see Slide Options.

Add Your First Layer

To add a layer:

1. select the active slide
2. open the Add Layer menu
3. choose a layer type such as Text, Caption, Image, Shape, Button, or Icon
4. place the layer on the canvas
5. open Layer Settings and configure the content and style

A practical first composition is:

1. add a Shape layer for a panel or card base
2. add a Caption or Text layer for the heading
3. add a second Text layer for supporting copy
4. add a Button layer for the call to action

For the full layer reference, see Layer Options.

Understand the Editing Hierarchy

Before working deeply in the builder, it helps to keep the editing hierarchy clear:

1. Slider: controls the global behavior of the whole slider.
2. Slide: controls one scene or frame inside the slider.
3. Layer: controls the individual content elements placed inside a slide.

This means:

• if you want to change autoplay, layout, thumbnails, dots, or transitions, you are working at slider level
• if you want to change a background image or background video, you are working at slide level
• if you want to move text, resize an image, style a button, or animate an icon, you are working at layer level

[screenshot_here]

Recommended First Settings

For a first project, start with:

• layout: fixed
• a clear width and height
• transition: a simple horizontal move or fade
• autoPlay: enabled if the slider should rotate automatically
• pauseOnHover: enabled for desktop-friendly interaction

Test Advanced Actions

After your first slider is working, test the Advanced tab on a single button or text layer before using it in a larger project.

Recommended test order:

1. test a built-in click action
2. test a custom event
3. test an inline callback
4. test an external callback

This makes it easier to tell whether a problem is caused by the event trigger, the action type, or the callback code.

Example: Custom Event With Event Name

To test a custom event:

1. select a layer in the builder
2. open Layer Settings > Advanced > Actions
3. set Event to Custom Event
4. set Event Name to promoOpen
5. set Action to something visible such as Go to Next Slide
6. save the slider
7. preview the slider
8. trigger the event from the browser console

Example console test:

jQuery('#your-layer-id').trigger('promoOpen');

Vanilla JavaScript version:

document.getElementById('your-layer-id')?.dispatchEvent(new Event('promoOpen'));

If the event is attached correctly, the layer action will run immediately when the custom event is triggered.

You can also trigger the event from your own script:

jQuery(function ($) {
  $('#open-promo-button').on('click', function () {
    $('#your-layer-id').trigger('promoOpen');
  });
});

Vanilla JavaScript version:

document.getElementById('open-promo-button')?.addEventListener('click', function () {
  document.getElementById('your-layer-id')?.dispatchEvent(new Event('promoOpen'));
});

Compatibility note:

• the jQuery version is the most reliable test method for ZoroSlider custom layer events because the slider action system uses jQuery-based event binding internally
• the vanilla dispatchEvent() version is useful when you prefer native browser events in your own scripts

[screenshot_here]

Example: Inline Callback Function

Use Inline when you want the callback code to live inside the layer action itself.

Test setup:

1. set Event to Click
2. set Action to Callback Function
3. set Callback Type to Inline
4. paste a small JavaScript snippet into Callback Function
5. save and preview

Example Callback Function value:

console.log('Inline callback fired');
alert('Inline callback fired');

You can also use a function declaration and call it:

function myInlineTest() {
  console.log('Inline test function ran');
}

myInlineTest();

Best practice:

• keep inline callbacks short
• use them mainly for testing or very small interactions
• move stable production logic to External callbacks

[screenshot_here]

Example: External Callback Function

Use External when the callback should come from your theme, a custom plugin, or another script loaded on the page.

Important rule:

• the callback name must be a global function name available on window

Test setup:

1. set Event to Click
2. set Action to Callback Function
3. set Callback Type to External
4. set Callback Name to myZoroLayerCallback
5. set Callback Args to hello, 2, true, #target-block
6. save and preview
7. make sure the function exists on the page

Example external function:

<script>
function myZoroLayerCallback(message, count, enabled, selector) {
  console.log('External callback fired');
  console.log(message, count, enabled, selector);
}
</script>

Example Callback Args field value:

hello, 2, true, #target-block

The plugin will pass those values into the function in that order.

Best practice:

• prefer External for reusable logic
• keep the function name simple, such as myZoroLayerCallback
• avoid namespaced strings such as MyApp.callbacks.openPanel

[screenshot_here]