Global IP Address:

54.224.168.206

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

Archive

Archive for October, 2009

Add Custom Header to WordPress Atahualpa Theme (ver 3.4.4)

October 9th, 2009 reset Comments off

This post is itended for users of the WordPress Atahualpua theme that desire a custom header option. After adding %flash to the Ata theme in our previous posts, it occurred that it might be useful to have a %html[...]% option to the header options. Headers get customized a lot and some of us need some more flexibility in the header options.

By using the %html[html code]%, you specify the HTML code yourself, so you really have complete control. If you don’t know HTML, maybe for now use another option and go to www.w3schools.com for some HTML help. I would recommend creating your HTML code for the header in your prefered designer (I use dreamweaver cs4) so you can test it and ensure it is begin rendered correctly. Then you can paste your code within the %html[....]% parameter in the Atahualpa Theme Options->Style & Edit Header Area – Configure Header Area options. Save your changes and refresh your blog page to verify your new custom HTML header is working correctly.

Here is how to implement:
1. Download .zip file here (this zip contains bfa_header_config.php file).
2. Make a backup copy of the original bfa_header_config.php file in the wp-content/themes/atahualpa/functions folder.
3. Extract the .php from the .zip file in #1. Upload .php file to same location as original bfa_header_config.php.
4. Go to your WordPress Administrator panel->Appearance->Atahualpa Theme Options->Style & Edit Header Area.
5. Update the Configure Header Area using the %html[html]% or the %flash[url,width,height].
6. Put your HTML code in a <div> element and use in-line styling to control width, height, background, etc.

Good Luck with it!

Here is a sample %html[....]% text in a .zip file.
Here is an example set of files I used for testing (.zip file)

To use this example, you will need to upload the images to a folder on your site and edit the URLs in the HTML code to match path to images. The sample creates a 900px by 200px header with a series of balloons with random colors and vertical positions across the header. Also, a flash overlay is included at the left side of the header. This flash overlay is relatively positioned with in-line styling. Hopefully the example is a good concrete example to follow. You could load the javascript from a file to cut down on the HTML length.

I really think this is a worthy addition to the theme header options, as you can completely specifiy an custom HTML header to make your blog using the Atahualpa theme whatever you can imagine it to be!

* note: the %flash[...] option is also supported by the files supplied in this post. If you wish to have a flash header, see 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 24 comments

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.