Adding SWFObject to WordPress
Last Updated on Wednesday, 11 November 2009 08:29 Written by Simon Nicol Thursday, 29 October 2009 02:59
Would you like to replace your WordPress’ websites static logo with a dynamic animating Flash banner like the one used on this site?
Embedding SWFObject is easy, you just need to add this code to your header.php file between your <head> and </head> tags.
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/swfobject.js" ></script>
<script type="text/javascript">
var flashvars = {};
flashvars.dText = "IT's Working!!";
var params = {};
params.play = "true";
params.menu = "false";
params.scale = "noscale";
params.wmode = "transparent";
params.bgcolor = "#ff0000";
var attributes = {};
attributes.id = "flash-replace";
swfobject.embedSWF("<?php bloginfo('template_directory'); ?>/flash/header/logo-anim.swf", "content-replace", "480", "58", "10.0.0", false, flashvars, params, attributes);
</script>
This code utilises the SWFObject 2 library which is the new defacto standard for embedding Flash content within a webpage even a WordPress page. There is a great video tutorial by Lee Brimelow called Embedding Flash with SWFObject 2.0 he takes you through all the in’s and out’s of SWFObject, you can watch his tutorial here, but for now just copying the code above will do.
You will of coarse need the swfobject.js JavaScript library which you can download from here on the first line from the code above you can see I call in the file /js/swfobject.js which I have in my themes directory inside a /js/ directory, it could also be /scripts/ for example.
On the last line where you see the text “content-replace” the JavaScript will replace whatever HTML or PHP you have contained within a div with an ID called content-replace. For example.
<!--The contents of the DIV below will be replaced with Flash if available
<div id = "content-replace">
<a href="<?php bloginfo('wpurl'); ?>/" id="logo"><span><?php bloginfo('description'); ?></span></a>
</div>
I will save my Flash .swf file out in the lowest version requirement of Flash that is needed to play the .swf (there’s no point compiling a file as Flash 10, if it only really needs Flash 5 to play). Again on the last line of the code you can see “10.0.0″ this you should change to whatever version of Flash is required to play the .swf. I might be a bit to know the earliest version of Flash that is capable of playing your .swf – you can but try.
With your .swf animation uploaded to the correct folder – in this example “mythemedirectory/flash/header/logo-anim.swf”
And away you go… You can have several SWFObject embedded within a page as long as you don’t start really sapping processor and power and or bandwidth, the careful use of Flash within a page really can add an awful lot of value to a page.
If you want to see how a WordPress site looks when the entire page is displayed with Flash you need look no further than Tylor Larson’s example site here http://motionandcolor.com.
Simon
Related posts:
- swfObject basepath not working in IE.
- Adding PayPal to a WordPress site
- WordPress pin text or banner to top of posts?
- Google AJAX Translation not working with WordPress & Artisteer
- How To – Add Google custom search to your WordPress blog.
- Remove code between div tags – The Document Object Model and how to use it.
- WordPress increase number of Recent Posts.
Tags: wordpress
