How to add swf to wordpress by embedding the code to your post, header or pages.

I am recently working with a client’s site, he wants to add swf to wordpress blog, in his case, in header.

So i thought i will share it with you how i did it. First, swf files are results of flash files which needs action script to work or animate.

I love Flash applications, i have learnt flash before i am into wordpress, but i slowly forget it. :(

I don’t recommend you to add swf to wordpress — Why?

Flash swf files are really looking cool, because it is dynamic, means, it’s moving and animated. However it is bad for search engine optimization of your blog.

It is strongly not recommended to add swf to wordpress. I have not experimented this matter, if swf file bad for your wordpress seo, but i believe so, because when you look for the page source, this swf code will appear long and sometimes causing w3c error codes.

Note, validating is important for wordpress SEO, it is also stated in wordpress official website.

However if you don’t care about validating your site, then you can follow this tutorial. I have checked the end result of the code, it causes a “few” errors, but i am lazy to fix it :/

Add SWF to WordPress video tutorial and steps:

Video:

Steps:
1. Prepare the file that you want to add swf to wordpress. It has to be in .swf file format, otherwise it won’t work.

Because in this demo i use Twenty Ten theme, i match the dimension with the header image of twenty ten, which is 940×198 px. If you use other theme or want to paste in post, then you will specify the width later on.

SWF file.

2. Upload the file, to media library, by click “Add New” under “media” option in your dashboard.

After you upload it, copy and paste the location path in notepad or something. This is important, so we won’t forget the path.

If your swf file is too big, you have to upload it via FTP to your webserver, example inside the folder called “flash” then you have to change the path to “flash/yourfile.swf”.

3. Look at file where you want to add it. If you want to add at the post or pages, then you can skip this step.

Because i use twenty ten, so we should open header.php file, see more on editing header.php by modifying twenty ten, add logo on twenty ten theme.

Open it, and look for this code:

<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

If you open it in notepad++ you can find it in around line 77. (see image).

Notepad ++ — Line 77.

Replace the code to this:

<object width="940" height="198">
<param name="movie" value="http://www.blog.web6.org/wp-content/uploads/2010/11/preview.swf"></param>
<param name="quality" value="high"></param>
<param name="wmode" value="window"></param>
<param name="menu" value="false"></param>
<param name="bgcolor" value="#FFFFFF"></param>
<param name="flashvars" value=""></param>
<embed type="application/x-shockwave-flash" width="940" height="198" src="http://www.blog.web6.org/wp-content/uploads/2010/11/preview.swf" quality="high" bgcolor="#FFFFFF" wmode="window" menu="false" flashvars="" ></embed>
</object>

NOTE: Change the “value” and the “src” to your own path. (see image).

Change the src and value path

4. Update file, and you should see that you should be able to add swf to wordpress header.