Global IP Address:

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 Custom Header to WordPress Atahualpa Theme (ver 3.4.4)

Add Custom Header to WordPress Atahualpa Theme (ver 3.4.4)

October 9th, 2009 reset

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 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)

  1. No comments yet.
Comments are closed.