Global IP Address:

54.161.53.213

Your Local IP Address:

Determining Local IP address....

*If you are behind a firewall (NAT) your global and local IP addresses will differ. Learn More

Home > Articles > Adding Flash Header to WordPress Atahualpa Theme (ver 3.4.1)

Adding Flash Header to WordPress Atahualpa Theme (ver 3.4.1)

August 17th, 2009 reset

This article has been updated for Atahualpa Theme, see Adding Flash Header to WordPress Atahualpa Theme (ver 3.4.4)

wordpress2This is an update to the original post to add a flash header to WordPress Atahualpa theme. This post uses Atahualpa Theme Version 3.4.1, the original post used version 3.2. Bytes-for-All has released a version 3.4.2 at wordpress.bytesforall.com that provides a handful a specific fixes. This update should work for either version, but was only tested on ver. 3.4.1.

If you use WordPress and the popular ‘Atahualpa’ Theme and want to use a Flash (.swf) header element, this post may be helpful. To make this modification you will need to modify one of the theme’s header files (bfa_header_config.php). One thing you may find helpful, is to setup a test blog that uses the same theme as your Live blog. This way you can test changes, plugins, etc. instead of editing the Live blog. To see an example of WordPress 2.8 with ‘Atahualpa’ Theme and flash header, see www.SuzieTrainsMaui.com/blog.

Let me say, Flash is great! It provides rich content and is compatible with like 95% of browers used today. There are a few different methods to implement a Flash element (a .swf movie) into web content. One method uses <object> tags which is called Static publishing. The other prominent method uses a javascript library named swfobject.js (available from Google) which is called Dynamic publishing. Static publishing is a little simpler than Dynamic, but you can choose the implementation that best suits your level and needs. Code for both methods are provided.

Here are the main steps with a code discussion below:

  1. Make a backup copy of bfa_header_config.php.
  2. Edit bfa_header_config.php following highlighted code shown HERE. This code shows the Flash Static publishing method. Code changes are highlighted Yellow. See code discussion below for details about edits and the code for Dynamic publishing.
  3. Now we need to tell the ‘Ata’ theme to use your flash header. Login to your WordPress Admin panel and goto Appearance->Atahualpa Theme Options. From the new vertical menu, select Style & edit HEADER AREA. In the Configure Header Area, you can now use %flash as a parameter. Most likely you will replace %image with %flash.

    In most cases you will not want to use %image or %logo if using %flash. However, you will want to ensure good alternate content for those valuable search engine robots and the few visitors that don’t have flash installed. So, on that same HEADER AREA options page, make sure Show Blog Title and Show Blog Tagline are yes and setup appropriately to work with your alternate content image. Also, it is important to have Header Image height option set correctly.

  4. Upload your flash movie (.swf) to your blog. I would recommend placing the file in the ‘Ata’ theme header/images folder, but you can put where you want, just make sure the path is set properly.
  5. View your blog and hopefully you see your new Flash header. You should also test the alternate content by disabling the Flash Add-on for your browser and check your page again. It is a good idea to check multiple browsers to make sure your page is rendered correctly with and without flash.

Code Discussion

The original bfa_header_config.php can be found here for comparison. Note, this example used Atahualpa theme version 3.4.1. Also, if you copy/paste from the .pdf files, carefull not to paste line numbers. HERE is the raw .php in a ZIP file for Flash Static Publishing method.

Line 277: The IF statement was modified to check for %flash in the header items. Technically added OR and test condition for %flash.

Lines 280-302:The $header_image variable needs to be broken up into 3 parts so we can use part of it for alternate flash content. The $header_image variable is replaced by $header_div1, $header_content, $header_div2 and as you can see the last statement sets $header_image to the concatenation of the 3 parts.

Lines 305-319:This is where the flash code is formulated, so ALL this code is added to the .php file. This is where the Static and Dynamic publish methods differ. As you can see, the method shown uses <object> tags which is the Static publishing method. Make sure the path to your uploaded .swf movie is valid (or it won’t work). If you want to use the Dynamic publishing method, substitue this code provide in ZIP file for lines 305-319. Also, make sure you upload swfobject.js and all paths are valid.

Lines 347:Add “%flash” to the list. Notice the comma on the line prior.

Lines 361:Add $header_flash to the list. Notice the comma on the line prior.

You can adjust the code manually if you wish or copy/paste a whole block or the whole file if you wish as the raw .php files are provided above. If you have made any other changes to this file, you may not want to copy/paste the whole file. If you are a php coder, you may wish to make adjustments versus copy/paste so you can understand it, but others may wish to copy/paste a block.

Good Luck with it! Hopefully Bytes-for-All will implement this into the Theme!

This article has been updated for Atahualpa Theme, see Adding Flash Header to WordPress Atahualpa Theme (ver 3.4.4)

  1. August 26th, 2009 at 09:55 | #1

    How do I center the embedded flash once I have made these mods?
    (note: it is working in 3.4.2)

  2. Admin
    August 26th, 2009 at 13:49 | #2

    @Jonathan
    Hi Johnathan, The flash element should be centered with code shown. When I tested this I had a narrower header than the blog width and it centered OK.

    When I first looked at your site, I saw the header left aligned. I looked at your code in IE8 developer tools and there was some bad characters in the ‘altHtml’ param after the ClassId param in the object element (line #309 in code discussion above). The page would not display in firefox so I could not check it there.

    When I checked it again, it looks like you got it centered! If something still not working, check that statement I mentioned above.

    Good Job and glad you posted comment and got it to work!

    PS – Don’t forget to turn on Blog Title Overlay and Blog Description overlay in ‘Ata’ Theme and have a default image for visitors (and robots) that don’t have flash. This way google will see your Blog title as a <h1> header element in the HTML and that helps with indexing/ranking. It is easy to disable Flash add-on and test page, in the example site http://www.suzietrainsmaui.com/blog, I have a animated .gif file as alternative background along with Blog title & description.

    Also, It looked like your Navigation bar was integrated into your flash header movie (.swf). That can cause issues with search engines as they might not find the links in the .swf file. I prefer to make the nav-bar in HTML using rollover effects using <a href=”… “> links so search engine can find pages. This is especially important for navigation bars/buttons. If you look at the web site for SuzieTrainsMaui, that site has HTML links for Nav-bar at bottom. Originally all of that was done inside Flash and most of her pages were invisible to search robots. Technically, the search engines saw the site as 1 HTML page (the home page), so that was not good….all better now and you can’t even tell. So, at a minimum provide alternate content that has links to all your pages or break out the bottom of the flash movie and make it 100% HTML links for nav-bar.       goodl luck wiith it

  3. September 13th, 2009 at 15:46 | #3

    I’m working on a client’s site, and have implemented everything as described here using the static method, and it doesn’t seem to be working.

    The site is @ http://www.hiscornerstone.net

    Any idea why?

  4. Admin
    September 13th, 2009 at 18:14 | #4

    @Ryan
    Ryan,

    Thanks for the comment. I looked at site in Firefox and looks fine. In IE, it is showing flash content, but flash is shifted to the right. I notice you have the clickable header option ON in Theme options. Maybe turn clickable header off and see if page renders correctly in IE. Give that a try and I will check site tomorrow and see. I am glad the guide was helpful.

  5. September 14th, 2009 at 07:29 | #5

    Thanks for your help. It’s odd, in Firefox for me, I can see the flash appearing sort of underneath the page content, but then it seems like the rotating image for the theme pops up instead.

    I also made it not clickable in the theme options, but it doesn’t seem to have made any difference in IE.

  6. Admin
    September 14th, 2009 at 08:41 | #6

    Ryan,

    Your blog & flash header .swf is 990px wide. You need to change the 1220px to 990x in two (2) places in the bfa_config_header.php. I tested your header at http://www.postlinkshare.com/wpata (my ata test blog). Tested in IE7, IE8 & firefox. Also tested with flash disabled. You will want to supply a .jpg that will be alternate content if flash not available. I will e-mail the bfa_config_header.php used at link I just mentioned. Good Luck!

  7. September 16th, 2009 at 11:30 | #7

    Perfectly fixed. Thanks again for your help.

  8. Jaco
    October 6th, 2009 at 07:26 | #8

    Hi there!

    What a great hack! I’ve bee searching everywhere and you turned out to be my saviour! I’ve implemented this in Ata 3.4.4 and it’s working just great!

    Thanks for your help!

  9. Admin
    October 6th, 2009 at 14:39 | #9

    Hi Jaco,

    Awesome! glad you found the post and made it work. I am thinking of tweaking it a bit again by changing the %flash parameter in ata theme options to %flash(swf-filename,width-pixels,height-pixels) to make it a little more robust. With that change, it would not be necessary to edit the .php file at all. Any thougts?

    Thanks again! Also, feel free to use this site for looking up your IP addresses (global & local). if you are so inclined, you can make a donation to myDeviceIP.com

  10. Jaco
    October 7th, 2009 at 01:07 | #10

    If everything, such as the path of the Flash file, dimensions, etc., could be done from the ATO that would be great. Not everybody has the confidence to dig into the php side of their themes. Why Flynn (from BFA) has not done this already really surprises me… ;)

    One more question: when using Flash in posts, is there a way to have alternate content (jpg/gif/png) for the Flash file – just like in the header?

    Regarding that donation – I’ll make sure the company I’m doing this site for makes a donation!

  11. Admin
    October 7th, 2009 at 07:20 | #11

    @Jaco
    I agree. I will update the %flash header parameter and I think at that point it could be implemented in the Theme distro.

    Regarding the flash content in posts, it depends how you are implementing flash. If you are using a wordpress plugin, the plugin would need to be designed that way. It is also good web design to provide alternate content for flash as search robots like it. Otherwise, If you use the EmbedIt plugin, you specify the HTML yourself, so you can use any of the Alternate Content methods. Google has some good stuff on alternate content is you search google for swfobject . EmbedIt is a nice plugin that allows you to put HTML code in your post and not have it ‘scrubbed’ by the Visual Editor when switching b/w Visual & HTML views.

    Thanks for visiting myDeviceIP.com, Admin.

  12. Tiffany
    October 22nd, 2009 at 06:49 | #12

    Hello :

    Thanks for putting these instructions out, they are wonderful. I am sure that I’m missing something silly but I can not get the Flash to show on the following website : http://bowtique.com.au/?page_id=109 . When I view the SWF locally on my system is works wonderfully. Loading it up to the web, and it acts like the previous header I designed (no button rollover effect). Any thoughts? Thanks so much in advance.

  13. Admin
    October 22nd, 2009 at 11:02 | #13

    Hi Tiffany,

    This post has been updated for latest Ata version (3.4.4) here. Please read it, it is much simpler NOW. Just replace the bfa_header_config.php with supplied and use WordPress Dashboard, Ata Theme Options->Configure Header Area and insert a %flash[url,width,height] param to enable your flash header.

    I did look at your site, but as you stated flash not displaying. The ‘older’ method does require using %flash in Configure Header Options. But I would use latest release as no .php edits required.

    Good Luck!

  14. Tiffany
    October 22nd, 2009 at 12:13 | #14

    @Admin

    I did bring in the %Flash, in the header options. I actually am only running 3.4.1 for this website, so should I use the link above you mentioned and edit using the 3.4.4 instructions? Or keep things as they are, where I have already made the bf_header… edits? Just wondering and thanks for the reply.

  15. Tiffany
    October 22nd, 2009 at 12:25 | #15

    Just to be a bigger pest, I did use the new file you offer in the updated post for 3.4.4 and I noticed something: The system is still using my *gif header and not the *swf one. Anything you think I might be missing? My header options looks like this on the backend : %flash(wp-content/themes/atahualpa/images/header/BT_Header.swf, 1000px, 254px) %bar2 %logo. Just weird that it is still not pulling that SWF file when I am telling it exactly where to find it.

  16. Admin
    October 22nd, 2009 at 13:27 | #16

    Hi Tiffany,

    Your url (to the .swf file) should be the complete URL. Try http://www.bowtique.com.au/wp-content/themes/atahualpa/images/header/BT_Header.swf. Needs to be fully qualified URL to swf file. With the latest 3.4.4 post, if the .swf is in the images/header folder, you can reduce URL to just BT_Header.swf. (Note: paths may be case sensitive depending on your server, so it needs to be exact).

    You will get it! Also, use square brackets %flash[url,width,height] if you are using the 3.4.4 file.

  17. Tiffany
    October 22nd, 2009 at 14:53 | #17

    Thanks. I worked it all out, never remembering that I had made edits to the header.php file when I first loaded this site. The file was loading the GIF version of the banner on top of the Flash. You were a big help, and I appreciate it. Those edits to the header.php was the final piece to making it all work. The client loves it!

    :)

  18. Daniel SR
    October 25th, 2009 at 09:01 | #18

    Hello, i’ve tried this, but it didn’t work, i’ve edited everything which is blocked by yellow, but my website became blank.

    Please help me.

    Thanks

  19. Admin
    October 25th, 2009 at 13:56 | #19

    Hi Daniel,

    Well, reset the bfa_header_config.php backup you made in step #1. What version of Atahualpha are you using? I would recommend upgrading to latest version (3.4.4). Then use the code supplied here, you do not need to edit the .php file, just replace it and use %flash[url,width,height] in your Ata Theme Options from the WordPress Admin panel.

    Give that a try….Good Luck with it.

  20. November 3rd, 2009 at 13:51 | #20

    Hi,

    Thank you for these excellent instructions! I am playing with this today and testing here: http://serenarockey.com/wpsample/. Running into a couple issues and I wonder if you might have some advice…

    I am using %flash and %image at the same time. Seems to be displaying both correctly, but the sidebars and content area are being hidden under the %image in the browser. I increased the bottom margin for the %image in Ata’s theme settings, and this pushed the content down in Firefox but IE still hides my content under the image. Any ideas about that?

    My second issue is hopefully small – I have set my flash hack to use a width=”100%” so that I don’t have to use a fixed width for my site, but my swf file is centering. I tried adding align=”left” to your code but it didn’t work. How can I achieve a left alignment?

    Thank you!

    Serena

  21. Admin
    November 4th, 2009 at 11:23 | #21

    Hi Serena,
    You may have some issues using %flash and %image at same time. Something else weird is going on since your sidebar is under the page menu bar (use IE 8 developer tools and select that sidebar element and highlight around element is under the page menu bar), which is not right. (firebug add-on for firefox is a valuable tool also)

    I would recommend using the bfa_header_config.php file from my post on 3.4.4 verions (here or here). The hack has been improved so you do not have to modify any php code, you specify options thru the WordPress Ata Theme Options, header options. And it has a %html[html code]% option, which I would use for your Custom Image below the menu bar that you want. Also, the image used in the %image option replaces the %flash content if the browser does not have Flash installed, which is very important to provide alternate content. (you should test your site and disable flash in IE / FF so it renders correctly for the search engine robots)

    note: that both %flash[.....] and %html[......]% use square brackets and not parentheses!

    Also, regarding the 100% width flash a couple things. Fluid web pages (specified by a % like you want), need to have a min-width & max-width specified. I would create your flash content for the max width and the browser should just cut it of based on width of page being displayed. See an example site here I have with a left-align flash header (beachboyevents.com).

    I wouldn’t worry about flash alignment until you get the other things working. If I recall correctly, you use the header image alignment option in Ata theme options to control alignment of both %flash and %image header options.

    Good Luck with it…..Site looks good so far.

  22. November 5th, 2009 at 09:44 | #22

    Hey Guys,
    Im using version 3.4.4

    1. Uploaded a flash file (topflash.swf) into the images/header-folder on my server.
    2. Replaced the “bfa_header_config.php” with the “raw” one from the Code Discussion (above).
    3. Replaced the %Image (in Configure Header Area)so the total code looks like this:
    %pages %logo %bar1 %flash[http://www.handyhansen.dk/wordpress/wp-content/themes/atahualpa/images/header/topflash.swf,1024,380] %bar2

    But when looking at my site it writes the following:

    Warning: Invalid argument supplied for foreach() in /hsphere/local/home/anderhan1008/handyhansen.dk/wordpress/wp-content/themes/atahualpa/functions/bfa_rotating_header_images.php on line 39 Warning: array_rand(): First argument has to be an array in /hsphere/local/home/anderhan1008/handyhansen.dk/wordpress/wp-content/themes/atahualpa/functions/bfa_header_config.php on line 281

    Whats wrong, I feel I have done everything right. Please help, I’m a noob, I don’t understand anything and need the experts in here to help!

  23. Admin
    November 5th, 2009 at 11:44 | #23

    Hi Dennis,

    Thanks for providing good details. I was able to simulate your error and you need to have at least one (1) image file (.jpg, .png, .gif) in the images/header folder. Actually, I was able to use this URL and see what was in your folder, so you may want to turn indexes off on your web server for your site (I always do!). You also want an image in that folder, so alternate content can be displayed for browsers that don’t have flash installed or enabled. I typically take a snapshot of my flash movie and use that along with Ata theme options for Blog title and tagline. This ensures that Search Robots see your content and pick up your title. (works great, disable your flash in IE / FF to test alternate content).

    WOW! I justed watched your flash movie. That is very nice, super job. I can’t read it, but very nice animation. Both IE 8 and FF support putting .swf URL in address bar.

    Good job, just put a image file in images/header folder and you should be fine!

  24. November 5th, 2009 at 22:25 | #24

    Thank you very much for the nice compliment. I was so happy with your quick reply – but it still isn’t working (I now have put a random picture in the folder you mentioned. Are we sure that the link %flash[http://www.handyhansen.dk/wordpress/wp-content/themes/atahualpa/images/header/topflash.swf,1024,380] is really working? it shouldn’t be: %flash["http://www.handyhansen.dk/wordpress/wp-content/themes/atahualpa/images/header/topflash.swf",1024,380] or something?

    Thanks for your patience…
    Dennis

  25. November 6th, 2009 at 03:47 | #25

    Nothing is working for me right now.. I hope that you have a good idea. Now there is a white area in the top of the screen – right clicking it says Flash- but my file isn’t showing – the link to the file must be wrong or…!?

  26. Admin
    November 6th, 2009 at 08:31 | #26

    Hi Dennis,

    I looked at your page this morning (on this half of the world) and the .swf name does NOT match the filename in your images/header folder. The page is trying to load /wpata/wp-content/themes/atahualpa/images/header/header.swf but your flash file is named topflash.swf.

    You do NOT need to specify full URL if .swf if located in images/header folder, so %flash[topflash.swf,1220px,380px] is all you need. Flash is loading, but it cannot find file specified.

    Also, make sure you are using the latest bfa_header_config.php from this post, read this post too!. The post we are commenting on right now, is the older version and this is very important! Use the Static publishing version.

    Give that a try and let me know. Did you make the Flash movie yourself?

    You can see an example here!

  27. November 7th, 2009 at 03:59 | #27

    You’re a star – seriously! I just oploaded the new bfa-header file and everything worked perfectly.

    Yes I did the flash myself and the site is for a carpenter. Its taking shape (as you can see on the site) but with the Flash issue out of the way there is now a bunch of new questions/problems, which I will not bother you with… I have already taken up too much of your time…. But thanks again a million times!

    Dennis

  28. Admin
    November 7th, 2009 at 10:12 | #28

    Hi Dennis,

    Thanks, I think you had the old version mixed in there. Ver 3.4.4 hack is much better, plus it supports a %html[html code]% tag to allow an addition custom header. Glad you got it working. I would like to be able to create graphics like that, what did you do the artwork in? the 3D houses?

    You should turn indexes off your your web site so people can’t see what is inside your web site folders.
    Also, feel free to donate to myDeviceIP.com & thanks for visiting!

  29. November 8th, 2009 at 13:46 | #29

    The 3D houses is vector files made in illustrator and copy pasted into Flash. You can also buy stock images, or find them for free, by Google-ing for instance “free vector houses” etc.

    I’ll try to find out where to turn indexes off – Is there also a safety threat here – for instance, can other people come into my server and remove files or just see them!?

  30. Admin
    November 9th, 2009 at 11:21 | #30

    Hi Dennis,

    Thanks for the info on Flash. I do Autocad and SketchUp and such, so I will give it a try.

    As far as the indexes Off on your web server, if you are on Linux web server with apache and cPanel, there is an option in cPanel to enable/disable indexes. (You can also specify in the .htaccess file if you know what you are doing.) If you are on windows IIS server, I think they call it directory browsing option.

    It is highly recommended to Turn Indexes OFF so people can’t see your files and folder strucuture. Public users (visitors to your site) cannot delete anything or even post anything (no write or delete privileges), but they can download copies and seek other vulnerabilities in your web site/server.

    I will send you an e-mail as we are drifting a bit of topic here. Thanks, Admin.

  31. December 30th, 2009 at 08:10 | #31

    I’m getting to grips with Flash programming, but PHP is a whole different animal. Thanks a bunch for this hack. :)

  32. Admin
    December 30th, 2009 at 10:13 | #32

    Hi Nils,

    Please use the Ata Ver 3.4.4 hack as no PHP coding involved. It is much cleaner. See this post and just replace the bfa_header_config.php file and it is controlled the Ata theme options.

    I hope it works well for you! Admin

  33. February 16th, 2010 at 06:52 | #33

    I’m now using it on Ata ver 3.4.5 and works very good.
    Thank you

  34. Admin
    February 16th, 2010 at 11:57 | #34

    Thanks Rob, Hopefully you got the latest version of this mod for Ata ver 3.4.4 as the 3.4.1 mod requires some php edits. Plus the latest versions allow custom HTML header and has layering fix for drop-down menus.

    Thanks again, Cheers – Admin myDeviceIP.com

  35. March 20th, 2010 at 14:03 | #35

    When will this be implemented into an official new release? I am using 4.4.6 for a few sites and I do not yet see a custom html header option.

  36. Admin
    April 4th, 2010 at 14:58 | #36

    @Emanuel
    Hi Emanuel, sorry for delay. I didn’t think Ata theme was up to version 4.4.6, maybe you mean 3.4.6. If you need a completely custom HTML header, see this post.
    Let me know if you still need help. I will check bytesforall, but unless header_config.php was significanlty changed, it should work.
    Thanks for using myDevceIP.com – Admin

Comments are closed.