WordPress integration

Post by **WSAdmin** » Sun Oct 30, 2022 9:25 pm

This topic provide step by step tutorial how to integrate slider in Wordpress.

We are currently working on Web Slider Wordpress plugin that will enable use of Web Slider App inside Wordpress.
Integration described here enable Web Slider App users to integrate sliders in Wordpress until official release is completed.

Requirements:

Wordpress integration requires Slider to be published to ASW S3, Linode Storage Object or Digital Ocean Space.
Plugin WSCode.

Step by step instructions:

Install WSCode plugin.
Click on Code Snippets > + Add Snippet.
Click on "blank snippet" or "create your own" link at the top of the page to open "Create custom snippet" form.
On the right side for "Code type" choose HTML Snippet.

In the main text area enter code.

Code: Select all

<div id="ws-player-1" style="height:400px;"></div>
<script src="PLAYER-URL"></script>
<script>
  window.addEventListener("load", async function () {
    const data = await fetch("SLIDER-URL").then((data) => data.json());
    const player = new window.WebSliderPlayer(
      data,
      document.getElementById("ws-player-1")
    );
    player.play();
  });
</script>

in the code above there are two strings PLAYER-URL and SLIDER-URL that need to be replaced with real urls. These urls can be found in Web Slider App in the Publish panel.
To get Player URL and Slider URL open Publish Panel and click on "Show Integration Details".

PublishPanel-ShowIntegrationDetails.png (52.89 KiB) Viewed 4453 times
Take Player URL and Slider URL and replace in the shippet code above.

PublishPanel-IntegrationDetails.png (82.48 KiB) Viewed 4453 times
In the Wordpress Code Snippet form for "Insert Method" select "Shortcode".
Save snippet.
In the"Shortcode" field you can get shortcake that can be used in a page/post.