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 a 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 (SEO) 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.
Twenty ten favicon — add favicon.ico in twenty ten theme
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.
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 web server, 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, I created a child theme of this theme first, follow this tutorial to create a child theme. Copy the header.php from Twenty Ten parent theme folder to the child theme folder.
Open header.php file in the child theme, 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).
Replace the code to this:
<object width="940" height="198">
<param name="movie" value="https://www.wpvidz.com/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="https://www.wpvidz.com/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).
4. Update file, and you should see that you should be able to add swf to wordpress header.
Thank you so much. This really helped me; and worked well.
Most welcome! Thanks for commenting
yes this worked, great, thanks
OMG Thank you so much!!! I love you! This was exactly what I needed to do on my wordpress blog. Unfortunately though. I’m not using the default 2010 theme. I’m using MistyLook 3.8-beta by Sadish and I can’t seem to know where to insert the script 🙁 This is what my header looks like.
<meta http-equiv="Content-Type" content="; charset=” />
<link rel="stylesheet" href="” type=”text/css” media=”screen” />
<link rel="alternate" type="application/rss+xml" title=" ” href=”” />
<link rel="stylesheet" type="text/css" media="print" href="/print.css” />
<link rel="pingback" href="” />
<body id="section-index" >
<form method="get" id="searchform" action="”><input type="text" class="textbox" value="” name=”s” id=”s” /><input type="submit" id="searchsubmit" value="” />
<li ><a href="/” title=””>
<a href="/” title=””>
<a href="”>
<a href="”>
I really hope you can help. Please respond. Thanks so much for the awesome video. It was very easy to follow.
my website bruce280.com
my email bruce280@msn.com
Sigh copy and paste of my header didn’t seem to post. I guessed your blog site doesn’t allow script to be part of the comment post 🙁 I really need help on this if you have some times to spare. Please and thank you. I can email you my header script but I can’t find ur email any where. If you can help. Here’s my email address
bruce280@msn.com
Either way I really love your blog as it is very informative and educational for a wordpress noob like me. I bookmarked it and will definitely comeback again. Thanks 🙂
Hi Bruce!
I can’t help, I only offer some videos here, but I can’t help people one by one, since I got the requests everyday.
I suggest you contacting the theme creator.
I can help everyone out as I know how to insert flash on any wordpress theme on offer.
WONDERFULL!
Marry me 🙂
Thank you for this tutorial.
Hi kimmimebaby,
Saw your video on how should I go about Embed Flash/SWF to WordPress. The video was clear till I roughly know what should do. But when i saw your video saying code is provided in your website, I right away visited and tried.
IT WORKS SO SO WELL! MANY MANY THANKS!
Appreciate it 😀
Hi Hafiez!
Welcome to my blog
Glad it works for you!
Thank you for coming accross, and leaving a nice comment
Regards
Kimi
No problem at all. You’re welcome 😀
Thank you, this is great!
One question – after embedding my .swf file, I noticed that it is not centered. Could you instruct me as to how I can centralize my banner?
Thanks again!
Dana.
Thank yout, it’s help me a lot!!
But I have a problem, I want to use wmode=”transparent” to make flash have transparent background, but it doesn’t work…
Could you instruct me as to how I can fixed it?
Thanks a lot of dear. I was searching for it a long time.
Thanks it is very useful for me rather than using plugins. Thanks a lot again
OMG Thank you so much!!! I love you! This was exactly what I needed to do on my wordpress blog.
Thank you so much!!! it works beautifully!!!
At last it works!