Marcus Hiles Wistia Shortcodes

marcus hiles wistia shortcodes banner

I’ve finally published my first plugin on! The plugin is called Marcus Hiles Wistia Shortcodes – and it gives people an easy way to add Wistia videos to their WordPress site using shortcodes.

You may be wondering why use shortcodes when you can just grab the embed code from within Wistia. The reason I created this plugin is to solve a few issues I was having with Wistia videos on my clients WordPress sites.

  • The editor would sometimes strip out the javascript files required to make the videos work
  • The editor would sometimes strip off the attributes on html wrappers that were required to make the videos work
  • We would often end up loading the wistia.js multiple times on a page if there was more than one video per page
  • We wanted a way to intelligently load all the scripts required by Wistia to make the videos work
  • Wistia has changed the embed code here and there, and we wanted consistency on how embeds were handled.

The Editor Breaks Wistia Embeds Sometimes

The content editor in WordPress does not like javascript, or non-standard html attributes. Whenever you save content, or switch back and forth between the visual and text editor, WP sanitizes the content. Unfortunately, this can remove things that you wanted there. To combat this, our first idea was to use a shortcode in-place of Wistia embeds. That way, the shortcode would act as a placeholder, where we could then – in code – inject the video in the right place.

Intelligently Loading Javascript

The embed code you copy from Wistia always includes the main wistia.js file. If you are copying multiple embed codes onto the same page, this leads to including this file multiple times within the page. Additionally, I’m not really a fan of having script tags randomly throughout the body of my document. It seems `hacky` and brittle. To resolve this, we use native WordPress functions like `wp_enqueue_scripts` and `wp_is_enqueued` to detect if the primary wistia js has loaded, and to load it only once, and also to group all the specific video .json files together right before the closing body tag.