Wordpress plugin



I made a free plugin to easily insert Hype animations into Wordpress, it can be downloaded on Wordpress Repository by searching “hype animations” or on this link https://wordpress.org/plugins/hype-animations/

I developed it for personal use and I thought it might be useful to other users. This is a first version that will be kept updated and adapted / evolved as needed.

Is it possible to import Hype animations controlled by JS to Wordpress websites? If so is there any tutorials or documentation concerning this topic?
Video: Embedding in Wordpress (Posts, Pages & Themes)


Is that just for Post and Pages? what about themes?


You can use it in themes with <?php echo do_shortcode('[hypeanimations_anim id="X"]'); ?>

This is a first distribution version but i’ll make upgrades as needed.

(Mark Hunte) #4

Thanks for the plugin.

I have installed it on my site

It worked ok for a simple animation but the I tried it with one a little more complex.

It did not show up. I suspected this was because the file name had two “.” in it.
I deleted it from the plugin. Renamed the file and re imported.

The same issue.

Not really knowing how these open Ajax files are formatted inside. I suspected that the original file name must still be referenced inside.

So I re exported from Hype with a new file name without the extra “.”

This time it loaded into the post.

But the images do not show up.

The Hype project I used was the Image Gallery I posted here.

It looks like the plugin and OAM do not reference correctly to the resources. I.e

The ${resourcesFolderName} expands correctly but to the sites bas url and resources Folder as normal.

Not to where ever the OAM expansion is…!!?

Which looks like it should expand to something like :

My suggestion would be to expand the resources folder into your id folder /wp-content/uploads/hypeanimations/4/ and not change the hype resources folder name.

Then you need to find a way to point to the correct folder.

I did a test where I hard coded the path as : ./wp-content/uploads/hypeanimations/5/

There was a couple of pixel slip but the images did show up.

(Freelancer) #5

HI @Benjamin and thanks for the plugin, very interesting.


Could you send me the .OAM file that you’ve used ? I’ll take a look and make an update as needed.

(Mark Hunte) #7

Here is all three

Exported with extra “.” in file name.
imageGallerySlide.v2.oam.zip (369.8 KB)

Exported without extra “.” in file name.

imageGallerySlidev2.oam.zip (369.8 KB)

Path Hard coded.

imageGallerySlidev2HC.oam.zip (369.9 KB)


Hey Benjamin, this is great work! It’s a very good start. It’s also something that community could use. Wordpress is the biggest content management system. So, if people can just drop Hype files into their WordPress posts, it could dramatically change the web. It’s like the golden era of Flash, but now for HTML5. It really hasn’t caught on. That’s because it’s a lot harder to upload HTML5 files than just a single .swf file.

Here’s some feedback…

GET PAID – I noticed that you put a link to Hype in your description. If you link to the iTunes store directly, you might be able to use an affiliate link…

You’d have to check the rules though. I’m not sure if links in WordPress plugins are OK. If they are, then you might want to mention “A Book About Hype” too, which is also on iTunes. So even though people might not make donations to support your module, they might click those links and then you could earn a commission.

CLEAN UP – It looks like the plugins didn’t delete the table on unistall. It’s not a big issue.

I just did it manually. If you wanted to get fancy, you might be able to add uninstall code… https://codex.wordpress.org/Function_Reference/register_uninstall_hook

There are two reasons I uninstalled the module.

RESPONSIVE – I’ve been using iFrames for placing my Hype projects because it’s responsive. You can see an example of this here… https://photics.com/games/broom/ …I tried the same the plugin, but the Hype project wouldn’t change width. It’s not responsive. That’s probably an important feature to add.

UPDATING – B.R.O.O.M is a work in progress. So, that means frequent updating. Unfortunately, instead of updating the existing OAM file, the plugin creates a new ID. The Plugin should probably ask if the OAM with the same name should be replaced.

Also, you might want to plug into the WYSIWYG editor. That would make adding OAM files easier.

Don’t let the feedback discourage you. Even to get to this point is a great accomplishment. I’ve been thinking about doing this for WordPress, and creating a Hype module for Drupal, but I never got around to it.


Thanks for reply ! I’ll make somes updates to delete database on uninstall and to get it responsive but it was just the “first release” so I made it easy for begin.

Plug it to the WYSIWYG is a very good idea, i’ll try to add this feature soon.

There is no “edit” feature at this time but i’ll add it to let user easily add a container (like a div) and a custom class (to get more control on it with css), and to replace files with a new OAM.

(sorry for my bad english, I try to do my best ^^)


Thanks for files, i’m gonna have a look on it to check why they didn’t worked with the plugin and update it as needed.


You’re right, the problem was about the . caracter in filename. I’ve posted an update, version 1.1 is now available with a fix for this bug.

And now, database and uploaded files are deleted on plugin uninstall.

(Mark Hunte) #12

Yep, That fixed the “.” issue.

But the reference to the resource folder is still not working…


Oh sorry, i’ve found the problem, i’m working on it, version 1.2 soon avalaible.


Version 1.2 is now released with a fix for this another problem. Now, plugin analyze the JS file and changes the files directory to get the right new directory.

I’ve made some tests with your OAM files and now pictures are displaying. Let me know if this fix is ok for you :smile:


I’ve made some updates with 1.3 release :

  • you can now update file, instead of creation a new ID, it updates now the original files
  • you can now add a container around the animation (div, or iframe) and add custom classes to this container, with CSS you can now set responsive the container as you want (i’ll add a checkbox “responsive” soon to do it auto)

Version 1.4 is now released :

= 1.4 =

  • You can now upload new animation with a drag and drop modal popup.
  • You can now upload new animation from Wordpress editor tool box.

(Mark Hunte) #16

All working well so far. Really like the Wordpress editor tool box feature.

Thanks for this plugin you may also want to get it listed on @michelangelo 's Hypdocks

One thing,

It would be good to have a cancel update.
If you change your mind you have to reload the page to reset back…


OK, here’s what I noticed from testing…

UNINSTALL – It worked. The table was dropped.

Uploading the file from the WYSIWYG editor almost worked…

That happened when dragging and dropping the file. Also, the layout looked a little off…

The “Drop files to upload” overlaps the popup window.

So, if I just click the window and select the file from the desktop, it works.

However, it doesn’t seem to be responsive…

It might be my template though, which is an older template.

I removed the plugin, as I’m busy this weekend. It looks like a good effort though. That’s some quick progress.

(Freelancer) #18

Done http://www.hypedocks.com/resources/

for now listed in the resources area but I would add more contents :slight_smile:

(Martin) #19

Very excited about this plugin, but I’m struggling to go responsive.

Is there a trick to setting up responsive pages? I can add non-responsive documents with ease, but when I make them responsive they disappear. An example is:
I have been using div, is something required in ‘Container CSS class’?

Call Wordpress Functions from Hype

Hi there, I wanted to download and install the Plug-In, but I can’t find it. It was there some days ago, but now there is no Plug-In.

Will it come back?