Modify & Use WP-cumulus 3d sphere for Custom Links

You must have seen the revolving 3D sphere of tags which gives the site an aesthetic look and get the visitor involved to browse more of your content. Its available as a nice plugin for WordPress blogs already but I wanted to have the 3D sphere show some custom links and not tags or categories.

I was designing my college website and there I wished to show the different engineering degrees in the 3D sphere. So here is how I did it.

Download the WP-Cumulus Example file from Roy Tanck’s blog (38KB)

Create a folder in your themes folder named cumulus and copy the following files there :

1. tagcloud.swf
2. tagcloud.xml (need to be edited first)
3. swfobject.js

I wanted to have it as a part of the WordPress theme, so I open up the PHP file and paste the following code in it :

<div id="cumulus">
 <div id="flashcontent">
 You need Flash & Javascript to display a lovely 3D sphere here.
 </div>
 <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/cumulus/swfobject.js"></script>
 <script type="text/javascript">
 var so = new SWFObject("<?php bloginfo('template_directory'); ?>/cumulus/tagcloud.swf", "tagcloud", "466", "303", "7", "#ffffff");
 // uncomment next line to enable transparency
 so.addParam("wmode", "transparent");
 so.addVariable("tcolor", "0x000000");
 so.addVariable("tcolor2", "0xffffff");
 so.addVariable("hicolor", "0xc30304");
 so.addVariable("tspeed", "100");
 so.addVariable("distr", "true");
 so.addVariable("xmlpath", "<?php bloginfo('template_directory'); ?>/cumulus/tagcloud.xml");
 so.write("flashcontent");
 </script>
</div>

Here in this code, you can change the width & height of the 3D sphere (on 7th line) , colors (10-12th line), its rotating speed (on 13th line) etc.

To change the links, you need to edit tagcloud.xml file. Just change the links and the anchor text as per your need. After that upload it to the cumulus folder in your theme’s folder.

Feel free to play around with the code and come up with your imagination. Leave a comment if you ran into issues and I will try to help. You can even say “Hi!” I love comments

This entry was posted under How To / Tutorials ¤ Tips n Tricks