Add a Hype File to Your WordPress Theme
For anyone wanting to add an animated element to a website, you won’t go far wrong if you use Hype by Tumult. This new tool makes it easy for designers to create animated graphics without writing the code.
The days of Flash as the must-use tool for web designers are over. Web banners and animations don’t play on iDevices and as many people are moving in ever-growing numbers to mobile browsing, jQuery, HTML5 and CSS3 have stepped in to offer designers alternative solutions for creating engaging, animated content. However, writing some of the code means learning yet another language and for many front-end web designers this can get in the way of the creative play.
Hype has a very familiar timeline-based interface and a gentle learning curve. I’m not going to post a tutorial here as there are plenty of good resources over at the Tumult website. Instead, I want to tackle another issue – displaying Hype content in a WordPress theme ONLY when it is the home page.
Embedding a Hype File in a Standard WordPress Post or Page
To add a Hype file to a post or page in WordPress it goes like this:
- Create your file.
- Export as HTML5 > Folder.
- Open the .html file that is generated and copy the lines that are clearly marked <!– copy –>
- Upload your folder to your domain. Choose the wp-content/uploads directory.
- Open up your page or post in the WordPress editor and switch over to the HTML tab. (This is important!)
- Paste in your lines of code from point 3 above. (You can add classes to the div if you wish.)
- Edit the path so the src points to your /wp-content/uploads directory.
That’s it. An example of this can be seen above and there is an article over at Tumult that shows how to work around any issues caused by caching plugins.
Embedding a Hype File in a WordPress Theme
The article on the Tumult site (link above) also covers adding Hype documents to a theme. However, it specifically tells you to paste your code outside of any PHP tags. If you want your animation to show ONLY on a specific page, such as the home page, you can still add your file but you will need to use another couple of steps and some conditional code.
- Create your file and export a folder , as before.
- Open the .html file and strip it down a little, so you end up with something like this:<!DOCTYPE html>
<html>
<head>
</head>
<body><!– copy these lines to your document: –>
<div id=”landingpg_hype_container” style=”position:relative;overflow:hidden;width:900px;height:290px;”>
<script type=”text/javascript” charset=”utf-8″ src=”<?php bloginfo(‘template_url’); ?>/landing-pg_Resources/landingpg_hype_generated_script.js?37509″></script>
</div><!– end copy –>
</body>
</html> - Save the file as a PHP file – animation.php for example, and upload the resources folder to your theme folder, so both both file and folder should be in your WordPress theme folder.
- Still in your WP theme folder, open up page.php. (Remember, this file is the template for your default pages. The index.php is for the list of posts on a page.) You can include your animation.php page in your page file, and wrap it in a <div> if you want to add some extra styling. Put something like this, wherever you want to add the file to your template:
<?php if (is_front_page()) {echo ‘<div id=”image-panel”>’;
include_once( TEMPLATEPATH .’/animation.php’);
echo ‘</div>’;}?>
Here’s an example of a file (wrapped in a <div>) that shows only on the landing page: Living Large website.
If you want to target a page other than the home page, see this page on the WordPress codex for conditional page tags.
other page
Hi – looks like your Living Large dev site link in the second example above has gone 404.
Thanks for the helpful tips; just what I was looking for!
Hi Bill, thanks for the heads-up. The link has been fixed. Glad the post was helpful.
Thanks for this tutorial !
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/6
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.
Thanks Benjamin – good luck with your plugin.