myDeviceIP.com

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)

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.

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

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

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

If you are a WordPress user and use the ‘Atahualpa’ theme and want a Flash header, this post may help. First for non-WordPress users, WordPress is a Blog publishing system that is very popular (wordpress.org). The ‘Atahualpa’ theme is the most downloaded WordPress theme and is an excellent theme. However it is not the theme behind this site (myDeviceIP.com), which uses another very popular theme ‘inove’. To see a reference of the ‘Atahualpa’ theme with a flash header, see SuzieTrainsMaui.com/blog.

To use a Flash header with ‘Atahualpa’ theme, it will require modification of the theme’s .php code files, so a little web experience is helpful. I recomend to have a test blog setup (on your web server) with ‘Atahualpa’ theme so you can test the modifications before updating the Live Blog.

The ‘Atahualpa’ theme is really well done (great job Bytes For All!!). It provides a lot of options and was programmed well enough for me to make this change (hack) farily easily.  This example uses Version 3.2 of Atahualpa Theme.

Read more…

To www or not to www? That is the question.

Developers and web site owners will inevitably face the decision to use either domain.com or www.domain.com.  One may say it does not matter which I use.   This question needs to be looked at from a few different points of views:  from a users (or browser) perspective, from a search engine perspective and from a marketing perspective.  There are some different schools of thought related to the Shakespearian question.  There is no correct answer, but different practices and recommendations can improve your search rankings and increase site traffic, and could affect your marketing.  We will analyze this question from the different perspectives mentioned.

Read more…