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 > Add a Flash Header to WordPress Atahualpha Theme (ver 3.4.4)

Add a Flash Header to WordPress Atahualpha Theme (ver 3.4.4)

October 7th, 2009 reset

update Jan. 29th, 2010 – This Flash header was updated to fix a layering issue with %pages menu drop-down menu items being hidden behind the Flash movie in the header. Basically, the flash parameter ‘wmode’ is now set to transparent which is used when the flash movie is loaded. For now, if you want to change this parameter or add another, you will need to edit the bfa_header_config.php file. In the future, I would like have more flexible Ata Theme Options %flash[...] syntax that would allow options without editing any .php code.

This is a significant update to the 2 previous posts for Adding a Flash Header to WordPress Atahualpha Theme for versions 3.2 & 3.4.1. This update does NOT require editing any .php files and utilizes the Atahualpa (or ‘Ata’ for short) Theme Options thru the WordPress Administrative panel to control the Flash object (.swf movie). Basically, it adds parameters to the %flash option so it is not necessary to modify the .php files. For example, %flash[url, width, height]. See below for more details. Flash is still implemented in either the static publishing method using <object tags> or the dynamic publishing method using swfobject.js. See previous posts or google for more discussion on publishing methods.

The easy way is to use the static publishing code provided, but the dynamic is provided for those interested or those looking for an example.

The Static publishing method.
  • Download the bfa_header_config.php file here (.zip file)
  • Continue with the steps below
The Dynamic publishing method.
  • Download the bfa_header_config.php file here (.zip file)
  • Continue with the steps below

Common steps for both methods

  1. Make a backup copy of the original bfa_header_config.php file. This is easily accomplished by renaming the file to bfa_header_config-ORIG.php. We want to be able to put things back like it was if we screw something up. Things should go smoothly, but always good idea to have a back-up.

  2. Extract bfa_header_config.php from the downloaded zip file above for your prefered publishing method.

  3. Upload bfa_header_config.php to your blog. This file should be uploaded to …/wp-content/themes/atahualpha/functions folder (same location as original file in #1).

  4. Go to your WordPress Administrative panel and go to
    Appearance->Atahualpa Theme Options->Style & edit HEADER AREA. In the Configure Header Area, you can now use %flash[url, width, height] to enable your flash movie.

    The proper syntax for the %flash parameter is: %flash[url, width, height].

    example: %flash[header.swf, 1200px, 200px]

    The url can be just the .swf filename if file is placed in Atahualpha header folder
    (wp-content/themes/atahualpa/images/header). Otherwise the url should be the complete url,
    ie: http://www.yourdomain.com/blog/wp-content/uploads/2009/10/header.swf.
    The width & height are the width and hieight of your flash movie in pixels. The px suffix is optional.

If you are using the dynamic publishing method, which relies on swfobject.js from google, make sure you have uploaded swfobject.js to your web site. If this file is not located in the root of your blog, you will need to alter the path to swfobject.js in the bfa_header_config.php file (line #336).

The %flash[url, width, height] header option is designed to be used as a replacement of the %image option. If you include your logo in your flash movie, then don’t use the %logo option. I sometimes relocate the search box and the feed buttons to the sidebar and don’t use %logo. The %image & %logo options will still display, but it would be in addition to the flash movie. Feel free to experiment. My header options are: %flash[header.swf,1220px,200px] %bar1 %pages %bar2, which results in flash movie at top with page nav-bar between to the horizontal bars.

Also, it very important to test your alternate content by temporarily disabling your flash plugin. To Disable your flash plugin (in IE tools->manage add-ons;firefox tools->add-ons), select the Flash Plugin and Disable it. Then refresh your blog page in your browser and make sure the alternate content is displayed. In the Atahualpha Theme Options->Style & edit Header area, turn ON the Blog title & turn ON the blog tagline. Change any of the other properties of title & tagline to match your blog. Save the changes and refresh your blog page. With flash disabled, you should see your alternate content. This is VERY important, since google and other search engines see the alternate content. And since the Blog title (an <h1> HTML tag), it is important in ranking. The images in the header folder are selected at random to be the alternate content, so make sure you upload one. I usually save a .jpg snapshot of the flash movie and upload that so it has a similar look, but no animiation since it is a .jpg.

If you need a sample flash header to start with, you can download here. I have implemented a few flash headers and I stripped this one down and made a sample for people to use. It is 990px wide by 200px high and has buttons on title and image linked to blog home page. The source files are included (.fla & .as) if you have flash and want to tweak it. Adobe has a 30 day trial for flash if you don’t have it. It is in Flash CS4 using Action Script 3. You need to change the button url link in the button_overlay_as3.as file to match your blog. Alternate content header.jpg included also.

I hope this makes implementing a flash header in the Ata theme easier for those interested, especially those who do not want to edit code. This is the 3rd revision of this hack and since it can be implemented easily without any coding, I think it could be added to the theme distro and allow the most popular WordPress theme to allow flash headers by default.

Good luck with this one! If you have comments or questions, please post them. Thanks for using myDevceIP.com. Feel free to come back if you need to look up an IP address.

UPDATE: The %flash option does require that you have a least one (1) image file (.jpg, .png, etc.) in the Ata Theme’s images/header folder. You will get a ‘foreach’ error from php at top of page if no images are found. You need this image for your alternate content (see above discussion on alternate content). updated 11-30-2009

references: Adding Flash Header to WordPress Atahualpa Theme (ver 3.4.1)
Adding A Flash Header to WordPress Atahualpa Theme

* note that the %flash option uses square brackets [ ] at each end not parenthesis ( ).
and this code has been updated to use the %html[...]% option for a total custom header.
See the Add Custom Header to WordPress Atahualpa Theme post.

  1. Jaco
    October 7th, 2009 at 23:31 | #1

    Wow!

    Now THIS works like a charm! Well done!

  2. Admin
    October 8th, 2009 at 08:48 | #2

    Thanks Jaco! This should be much easier to implement. Hopefully BFA can integrate into theme. I included a sample header.swf with source .fla & .as. Again, Glad it worked for you and hope you learned something too, I know I did.

    Cheers, Admin

  3. Anthony
    November 29th, 2009 at 18:42 | #3

    I can see the flash.. Howver the top of the page is giving me a warning
    Warning: Invalid argument supplied for foreach() in /hsphere/delphig/public_html/wordpress/wp-content/themes/atahualpa/functions/bfa_rotating_header_images.php on line 39

    Warning: array_rand() [function.array-rand]: First argument has to be an array in /hsphere/delphig/public_html/wordpress/wp-content/themes/atahualpa/functions/bfa_header_config.php on line 281

    Any idea what i’m doing wrong? I uploaded the 3.4.4 php file

  4. Admin
    November 30th, 2009 at 09:04 | #4

    Hi Anthony,

    Good Job! You need at least 1 image file (.jpg, .png, .gif) in the Ata Theme images/header folder. This image (or images) are used as alternate content if browser does not have flash (and for the search engines). I usually take an image of the flash movie and use the Blog title and tagline options for the Ata Theme’s header area, so search engines pick up the Blog Title (an <h1> element) and the tagline. Read the post’s discussion above about alternate content for more. The error you received is the theme trying to loop thru the images in the folder and none exist.

    Thanks for visiting and please use myDeviceIP.com to check global/local IP addresses!

  5. December 15th, 2009 at 17:52 | #5

    Hi, good job with that :D
    I’m thinking that flash item takes the 100% of the web width, and the flash is just left aligned and it’s impossible to put the logo item at the side.
    There is any way to change the width, the alignment ans (for example) the margin of the item?

    Thank you!

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

    @pau
    HI, you can control alignment thru Ata theme options. I would integrate the logo into your flash header or use the custom header option and specify completely (but this is more advanced).

    Good Luck with it!

  7. January 4th, 2010 at 08:12 | #7

    How can I center the Flash file in the header? The jpg file I was using centered fine, but the Flash does not.

    Thanks for this great hack!

  8. Admin
    January 4th, 2010 at 09:36 | #8

    Hi Ken,

    I think you have a couple options. You can use the Header image Alignment in the Ata theme options from the WordPress Admin panel. The same alignment for the image is used for the Flash element. Or you can make your Flash element as wide as your page and alignment should not matter.

    In some of the flash headers I have done, I have a ‘fluid’ page layout (width:99%) with max-width:1220px and min-width:1000px specified too! Then I make the Flash movie as wide as my max-width (1220px), keeping in mind that people with smaller width screens/browser windows may only see the min-width. Basically, the flash element gets clipped if wider than page being rendered. See here for an example and change the width of your browser window to see effect.

    I hope that helps. I try to integrate eveything for the header into the flash element so it is easier to develop and maintain. — Admin

  9. January 26th, 2010 at 04:17 | #9

    Hi,
    thanks for the great hack, I am using it on http://pannoniastudio.com.
    I have a question though: I want %pages only be visible if user doesnt have flash. I am not deep into coding, so what should I do, what is the command I could hide the Ata generated pages from users with flash and only displaying it as an alternate content for the ones without flash?

  10. Admin
    January 26th, 2010 at 12:01 | #10

    Hi Chris,
    Isten hozta
    You are Welcome. I checked out your site – Very Nice and Professional. Your question about showing %pages for No-Flash visitors is interesting. Here you go, Look at this post ‘Add Custom Header to WordPress Atahualpa Theme (ver 3.4.4)‘. use this code as example for you Ata Header Options
    %flash[header.swf,1220px,200px] %pages %html[
    <!--
    var MM_contentVersion = 6;
    var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0;
    if ( plugin ) {
    var words = navigator.plugins["Shockwave Flash"].description.split(" ");
    for (var i = 0; i = MM_contentVersion;
    }
    else if (navigator.userAgent && navigator.userAgent.indexOf("MSIE")>=0
    && (navigator.appVersion.indexOf("Win") != -1)) {
    document.write(' \n'); //FS hide this from IE4.5 Mac by splitting the tag
    document.write('on error resume next \n');
    document.write('MM_FlashCanPlay = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash." & MM_contentVersion)))\n');
    document.write(' \n');
    }
    if ( MM_FlashCanPlay ) {
    //alert("Yes - Flash");
    document.getElementById('menu1').style.display = "none";
    } else{
    //alert("NO - Flash");
    }
    //-->

    ]% also, set your Ata Header Image height to 0 (pixels), cuz it will try to use alternate content image if No-Flash and 0 px will hide it. Adjust the %flash param to match your site. As you can see, the If (MM_FlashCanPlay) statement is where %pages is displayed or not. I got it to work on my Ata test site. If you can’t get it, let me know and I will e-mail a link so you can see it. Seems to work in IE8 & FF 3.5.

    Also, if you modify Ata functions.php file, you can eliminate the footer WordPress – BFA text. Kudos to BFA, but my clients don’t want to see that at bottom. Text in very top menu bar is a little small, imho.

    Good Luck with it! Thanks for visting myDeviceIP.com – a great place to check global/local IP addresses – Admin

  11. marvC
    January 28th, 2010 at 11:53 | #11

    I stumbled across your site while searching the header forums for answer to my following question:

    Following suggestions from a previous post I managed to get the Nextgen gallery inserted the header of my Atahualpa theme but have decided to place it in the location of the rotating images. For some reason I can’t seem to get this work. Any attempts to change or remove either of the following from the header.php file screws up the theme:

    <td id="header" colspan="”>

    or

    I’ve searched the forums and got as far as page 9 before throwing in the towel and creating the thread. I wonder if I’m making this harder than it really is so if anyone can give me a push in the right direction I’d really appreciate it. Basically I’d like my nextgen header to sit in-place of the rotating images with the opacity setting as it is.

    I know this topic covers inserting flash but is there any way to do this using NextGen?

    tia

  12. Admin
    January 28th, 2010 at 23:44 | #12

    MarvC,

    I suppose you could have a flash header that used images from NextGen Gallery. I would post query at NextGen web site. If you can get the flash element working as a .swf that quieres NextGen database (most likely returning xml image list), you can use this flash header hack for Ata theme to handle the flash object.

    I know you could do it with SlideShowPro.net flash extension and create .swf say 1220px X 200px that uses xml input for image list. I know that package pretty good and flexible, but you need to have Flash Pro and know some flash, but would be pretty cool. Plus it is about $40 I think.

    Editing raw .php files can be tricky…Wordpress doesn’t need much of that anymore, especially with Ata theme.

    Good Luck, let me know if you get it – Admin

  13. January 29th, 2010 at 10:00 | #13

    I am a huge fan of this new capability for flash header, but I noticed that the flash image rests ‘on top’ of my drop down menus. I would hate to move them to the bottom, is there a quick fix for this? My site is http://www.save-a-mother.org/blog

    Thanks!!

  14. Admin
    January 29th, 2010 at 13:53 | #14

    Hi Mariya,

    Thanks for visiting and your comments/question. I have looked at the issue and have found a fix. I have tested it in IE & FF and need to update the posted file (bfa_header_config.php) so you and others can benefit. I should have an update shortly and will update the download and this comment when ready. thanks for your patience

    I have updated the post & downloads to correct the layering issue with drop-down menu hiding behind the Flash movie. Just download the .zip and refresh your bfa_header_config.php file and you should be fine. Let me know if it works.

    You have a Nice WordPress site and a great cause!
    Thanks for Visiting myDeviceIP.com – Admin

  15. May 5th, 2010 at 07:00 | #15

    Hi there. Thanks for taking the time to put this together. I have followed the instructions and got my flash to display however it is superimposed on top of the image header. have a look: http://www.makeabignoise.org.uk/bignoise

    In atahualpa I have the following: %flash[flashheader.swf, 800px, 200px] %logo %bar1 %bar2 %pages

    Any thoughts?

    Cheers,

    Alan

  16. Admin
    May 5th, 2010 at 12:33 | #16

    Hi Alan,

    A couple things quick…It is simpler if your flash header is same width as blog and fixed width is easier to work with. You have ATA theme at 99% width, so it is a fluid layout. For fixed width sites, I typically do about 1000px wide. Your background image is wider, but that will be clipped by fixed width.

    If you are comfortable editing some .php, edit the bfa_header_config.php file and find the word ‘wmode’ and ‘transparent’, then change the ‘transparent’ to ‘opaque’ to tell flash to use opaque background. I had adjusted the ‘wmode’ param as some users did not see their drop-down menus. Ultimately, it would be nice to have params in the %flash[....] options, but I would need to implement that.

    Hopefully that helps!

    Thanks for visiting myDeviceIP.com – Admin

  17. Alan
    May 6th, 2010 at 05:53 | #17

    Hi,

    Thanks for the fast response. That’s sorted it now. Good stuff!

  18. May 8th, 2010 at 04:33 | #18

    Hi everyone,

    I’d like to know how to put an .swf that I created in place of the rotation images location.
    Thank you !

  19. Admin
    May 9th, 2010 at 11:09 | #19

    Hi Dr. Duckling,
    I would follow this post and use the static publishing method as it is simpler. After your .swf movie is uploaded, use the %flash[...] syntax in the ATA theme options and activate your header. It works pretty good as many ATA theme users have used this modification.

    Give it a try and if you get stuck, give us some details so we can help.

    Thanks for using myDeviceIP.com – Admin

  20. September 8th, 2010 at 07:45 | #20

    Hey Admin,

    I have uploadet the new static bfa_header_config.php-file and the transparent-flash background feature works fine – BUT the problem is that my top .png-logo image is now gone….
    ..any ideas what happened/how to fix it?

    My site is: http://www.lillestokkebjerg.dk/wordpress

  21. Admin
    September 9th, 2010 at 15:34 | #21

    @Dennis Andersen
    Hi Dennis,

    I remember you :-) . I looked at your site and using FireFox firebug inspect element, I think your path to your Logo ‘/images/toplogopngkunlogo4.png’ is a bad url. maybe try ‘/wp-content/themes/atahualpa/images/toplogopngkunlogo4.png’ or full url ‘http://lillestokkebjerg.dk/wordpress/wp-content/themes/atahualpa/images/toplogopngkunlogo4.png'.

    When I first built this %Flash[..] element, I integrated my Logo graphic into the flash .swf. But in theory, what you are trying should work. check your logo path and let me know. looks cool, good use of transparency!

    Thanks for using myDeviceIP.com – Admin

  22. September 9th, 2010 at 22:12 | #22

    Hey, thanks for quick reply…. :0D

    I don’t know how it can be a bad url…since I have uploadet the logo-file to: :www.lillestokkebjerg.dk/wordpress/wp-content/themes/atahualpa/images/

    …and through the “Style & Edit Header Area” in the box named “Show logo image?” have typed in: “toplogopngkunlogo4.png”!

    I have now tried – in this box – to type in the following:
    “toplogopngkunlogo4.png”,
    “/images/toplogopngkunlogo4.png”,
    “/wp-content/themes/atahualpa/images/toplogopngkunlogo4.png”,
    and full url “http://lillestokkebjerg.dk/wordpress/wp-content/themes/atahualpa/images/toplogopngkunlogo4.png”

    None is working….

    I understand that I could easily put the logo in the flash, but I know that this exact operation (putting in both flash and logo) has worked before, with a previous version of the bfa-file, since I have used it on: http://www.handyhansen.dk
    (of course I have also already tried to upload that version to the new site – without any result! ;0().

  23. Admin
    September 10th, 2010 at 11:22 | #23

    Hi Dennis,

    What version of Ata theme are you using? Also, just put Logo filename toplogopngkunlogo4.png in Ata theme options for Logo File and file to be placed in …/wp-content/themes/atahualpa/images like you have it.

    I will send you private e-mail. I got it working on my test blog with your graphics, but url is not being composed correctly by theme logic and we just need to see what difference is and correct it.

    Thanks – Admin

  24. September 12th, 2010 at 04:00 | #24

    (copied reply from e-mail)
    Hey Admin,

    Thanks for ypur patience and sorry for the late reply – but I have been away from my computer all weekend!

    I use Version 2.9.2 of WordPress (and “it asks” if I want to update to 3.0.1? – can I do that without messing up my website?) and Atahualpha Theme version 3.4.9!!

    Thanks…

Comments are closed.