How to Integrate an animated cloud icon into your Wordpress Installation

Integrate an animated cloud icon into a current Wordpress Installation.

Hey guys, it’s me Johnathon, again. As promised, I’m here this time to show you how to take the Animated Cloud Icon from before, and integrate it into a current Wordpress installation. So, without diddle-daddling around, let’s jump right in!

Step 1
Before we go on and start integrating the download icon, you’ll want to make sure that you stop by here and complete the first part of the tutorial in which we actually add in our JQuery effect. Also, make sure you upgrade your version of Wordpress to 2.8 to make sure that you have the best settings to help you along in this tutorial.

Step 2
Once you’ve got the first tutorial up and running, it’s time for us to start the move.html file that will hold our effect and information. You’ll need to go ahead and create a move.html file in the root directory, which may also be called the public_html directory. We’ll need this to hold our icon animation files.

Step 3
Now, you’re going to want to upload the JQuery file and the two image files (1.png and 2.png) to the root directory. This is the first directory you see when you login to your ftp, and is sometimes also called public_html. So, you should upload a total of 3 files here. There is no need to upload the index.html file since it will be covered in the move.html file.

Step 4
Now, it’s time to dive into the display of the actual icon. Open up your move.html file that you created earlier in your root directory. Then, insert the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function() {
$('ul.flow li').hover(function(){
$(this).find('img').animate({top:'20px'},{queue:false,duration:600});
}, function(){
$(this).find('img').animate({top:'0px'},{queue:false,duration:600});
});
});
</script>
<style media="screen">
ul.flow li {
list-style:none;
background: url("http://exoph.com/1.png");
width:262px;
}
ul.flow li a {
display: block; 
position: relative;
height: 353px;
width: 262px;
}
ul.flow li a { text-decoration: none; }
ul.flow li img {
position: absolute;
border: none;
}
</style>
<ul class="flow">
<li><img src="http://exoph.com/2.png" /></li>
</ul>

Once you’ve pasted that code, change exoph.com by your domain name, it’s time to save the move.html file.

Step 5
The next step is a simple one. All you need to do is navigate to: http://wordpress.org/extend/plugins/exec-php/ and download and install this plugin. Most likely, if you’re working with a tutorial this advanced, you know how to install plugins. But, if you don’t you’ll want to check out: http://codex.wordpress.org/Advanced_Topics#WordPress_Plugins_and_Customization as it explains how to install Wordpress plugins. Next, go to the Users menu —> Your Profile. On the Your Profile page, you can scroll down and see a setting for exec-php, you MUST tick this checkbox in order for the animated button to work, otherwise the code we generate will just come out as plain text.

Step 6
Once you’ve done this, you’re good to go. From now on when you want to display you’re moving download icon, just use the following code and swap out the download url. Then you just need to paste this in your post while editing it in HTML mode and not in Visual mode. These modes are toggled in the create a post page and appear on the upper right hand side of the post box where you type the post.

1

<a href=http://INSERTYOUROWNURLHERE><?php include("move.html"); ?></a>

That’s all folks! I hope that you’ve enjoyed this tutorial, and you have fun with your new Wordpress implementation. If for any reason you have difficulties with the execution of the php code, check the troubleshooting guide below:

Troubleshooting (2 Steps to Guarantee Success)
The following may only be necessary for some users: If you have trouble once you go through all of the tutorial, and can’t get the php code to display, then it’s because you admin user account on Wordpress does not have sufficient access to “unfiltered html”. To fix this, visit: http://bluesome.net/post/2005/08/18/50/#allow_execution install the plugin listed there, and follow the steps. And remember, most versions of Wordpress will work fine without this step, unless you used a faulty Wordpress Auto-installer from your Web Host. Some Auto-installers don’t distribute permissions correctly which could be what caused an error.

Can’t see the image behind the moving arrow? Then, your theme adds a background to linked images. This is a simple fix, in which you go into your stylesheet.css theme file, find a line of code that says something similar to “postimages a{“ or “postimg a{“ and delete the line that starts with background between the brackets.

Still having problems? Contact me on my blog: http://www.exoph.com and I’d be glad to help if you’ve made an honest effort yourself. This is an advanced tutorial, and it’s easy to see how someone could mess up along the process.

I hope you enjoyed my second tutorial here, and that you’ll use it to grow in your programming skills so you can add some awesome functionality to your designs.

John