Developer Guide

This guide is intended for theme developers and advanced users who wish to extend VisioLayer or integrate it deeply into their projects.

Hooks & Filters

VisioLayer provides several hooks to modify behavior without altering core files.

Actions

visiolayer_before_slider Fires immediately before the slider wrapper is output.

add_action('visiolayer_before_slider', function($slider_id) {
    if ($slider_id == 5) {
        echo '<div class="custom-wrapper">';
    }
});

visiolayer_after_slider Fires immediately after the slider wrapper is output.

add_action('visiolayer_after_slider', function($slider_id) {
    echo '</div><!-- end custom-wrapper -->';
});

Filters

visiolayer_slider_settings Modify the configuration array before it is passed to the JavaScript frontend.

add_filter('visiolayer_slider_settings', function($settings, $slider_id) {
    // Force specific delay on all slides
    $settings['delay'] = 5000; 
    return $settings;
}, 10, 2);

visiolayer_custom_css_output Filter the dynamically generated CSS before it is printed to the page head.

add_filter('visiolayer_custom_css_output', function($css) {
    return $css . " .my-custom-class { color: red; }";
});

Template Override System

You can override specific frontend templates by copying them from the plugin directory to your theme.

  1. Source: wp-content/plugins/visiolayer/templates/
  2. Destination: wp-content/themes/your-theme/visiolayer/

Example: To customize the arrow navigation structure, copy templates/navigation/arrows.php to your-theme/visiolayer/navigation/arrows.php.

Note: Do not modify files directly in the plugin folder, as your changes will be lost on update.

REST API

VisioLayer registers endpoints under the visiolayer/v1 namespace.

Check License Status

Endpoint: GET /wp-json/visiolayer/v1/status Access: Admin only

Response:

{
  "active": true,
  "plan": "agency",
  "expires": "2026-12-31"
}

Custom Endpoints

If building a headless site, you can retrieve slider data via API: Endpoint: GET /wp-json/visiolayer/v1/slider/{alias}

{
  "id": 42,
  "alias": "homepage-hero",
  "slides": [
    {
      "id": 101,
      "background": "https://example.com/bg.jpg",
      "layers": [...]
    }
  ]
}

Performance for Developers

When building themes bundling VisioLayer, follow these rules:

  1. Conditional Loading: Use VisioLayer::is_slider_on_page() to check if assets are needed before manually enquing related custom scripts.

  2. Disable Unused Modules: If you know your theme never uses Video backgrounds, you can dequeue the video handling script to save ~20kb.

    add_action('wp_enqueue_scripts', function() {
    wp_dequeue_script('visiolayer-video');
}, 100);

  3. Cache Compatibility: Always verify your slider works with the user's caching solution. VisioLayer uses a localized object visioLayerData that must not be cached statically if using dynamic user data (e.g., "Hello, [User Name]").

Best Practices

  • Prefixing: Always prefix your custom CSS classes within the slider (e.g., vl-my-button) to avoid conflicts with theme styles.
  • Sanitization: When using the visiolayer_slider_settings filter to inject user data, always use sanitize_text_field() or wp_kses_post().
  • IDs vs Aliases: We recommend using Aliases (slugs) instead of numeric IDs when embedding sliders in your theme PHP files. IDs can change during export/import, while aliases tend to be consistent.
    • Good: do_shortcode('[visiolayer alias="home-main"]');
    • Bad: do_shortcode('[visiolayer id="5"]');
Back to Overview