Add a Hype File to Your WordPress Theme 2/11/20 11:14 p.m.
STUART HAIZ
Portfolio
Motion graphics
Graphic design
Logo design
Web design
Contact
About
Blog
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
https://haizdesign.com/wordpress/add-hype-file-to-wordpress-theme/ Página 1 de 5
Add a Hype File to Your WordPress Theme 2/11/20 11:14 p.m.
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:
1. Create your file.
2. Export as HTML5 > Folder.
3. Open the .html file that is generated and copy the lines that are clearly marked <!– copy –>
4. Upload your folder to your domain. Choose the wp-content/uploads directory.
5. Open up your page or post in the WordPress editor and switch over to the HTML tab. (This is
important!)
6. Paste in your lines of code from point 3 above. (You can add classes to the div if you wish.)
7. 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.
1. Create your file and export a folder , as before.
2. 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>
3. 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.
4. 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:
https://haizdesign.com/wordpress/add-hype-file-to-wordpress-theme/ Página 2 de 5
Add a Hype File to Your WordPress Theme 2/11/20 11:14 p.m.
<?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.
Share this:
! " #
Related Posts:
Add Links, Adding Keywords
Captions And and Descriptions
Subscribe Buttons in Contribute
other page
To YouTube
Videos
4 Comments
1. Bill Alpert
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!
Reply
Stuart
Hi Bill, thanks for the heads-up. The link has been fixed. Glad the post was helpful.
https://haizdesign.com/wordpress/add-hype-file-to-wordpress-theme/ Página 3 de 5
Add a Hype File to Your WordPress Theme 2/11/20 11:14 p.m.
Reply
2. Benjamin
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.
Reply
Haiz Design
Thanks Benjamin – good luck with your plugin.
Reply
It's good to talk!
Your email address will not be published. Required fields are marked *
Comment
Name *
Email *
Website
Notify me of follow-up comments by email.
Notify me of new posts by email.
Post Comment
https://haizdesign.com/wordpress/add-hype-file-to-wordpress-theme/ Página 4 de 5
Add a Hype File to Your WordPress Theme 2/11/20 11:14 p.m.
© Stuart Haiz 2009 - 2020 All Rights Reserved
https://haizdesign.com/wordpress/add-hype-file-to-wordpress-theme/ Página 5 de 5
