Thesis Tutorial Header Banner Rotator

Con­sid­er­ing the web­site as a piece of real estate, it becomes clear, that the top seg­ment of the page is the most pre­cious loca­tion. A fancy large header graphic is eat­ing loads of space, namely when it reaches over 100 pix­els down from the top of the page. If the header graphic is a sta­tic ele­ment, doing not more than link­ing to your home page, then you have just given away your most pre­cious square inches for a one time shot of sta­tic beauty.

By default the header links to the Word­Press Home Page. Let’s keep it that way for the time being. We can how­ever dis­play an array of header graph­ics, rotat­ing upon page load. You may remem­ber the exer­cise on the orig­i­nal YORGOO Press blog a few years ago, as well as the Atahualpa Cus­tomiza­tion on YORGOO Media.

This Tuto­r­ial shows you how to add a rotat­ing header ban­ner in Thesis.

The­ses makes the task easy,as you just need to:

1. Cre­ate an image folder for the rotator
2. Edit and Load your header images
3. Add some lines of cus­tom func­tions code
4. Cus­tomize your code
5. Enjoy the ban­ners on your site

Using your FTP client, access the theme folder, then the sub-folder ‘custom’.

Cre­ate there a new folder called header_rotator:

Here is the con­straint: all images must have the same exten­sion (jpg,gif or png) and they are ide­ally all of the same size. I pre­fer to load png for­mat as it allows for trans­par­ent images. The max­i­mum image width is dis­played on ‘Header Image’ under the Theme menu:

In my case it’s 1014pixels. I will there­fore load images which are 1014 pix­els wide and which all will have the same height (mine are 100 px) and they will be in png format.personally I like typo­graphic head­ers as I am using graphic slid­ers under­neath. I will there­fore cre­ate a few head­ers with infor­ma­tive headlines.

In as much as the con­tent is con­cerned, I will just pro­mote my main cat­e­gories for the pur­pose of the exercise.

You need to name your images ‘header_1, header_2, … plus the exten­sion, in my case: .png. For exam­ple: header_1.png

Upload your images to the newly cre­ated folder via FTP:

It is time now to add a few lines of cus­tom code to custom-functions.php from your Cus­tom File Edi­tor in the Theme’s menu (Dashboard):

//--------- Header Image Rotator----------
function rotating_header_images() {
//The second number here below corresponds to the total number of header images you show; change accordingly.
	$random_image = rand(1,3);
?>
	<!-- Adapt here below the width and height to your image size, change file extension and the alt text-->
	<a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo(template_url)?>/custom/header_rotator/header_<?php echo $random_image;?>.png" width="1014" height="100" align="center" alt="Yorgo Nestoridis Blog" /></a>
<?php
}
add_action('thesis_hook_after_title', 'rotating_header_images');

The above code is well com­mented, so here just a reminder:

• on line 4 there are two num­bers (1,3): the sec­ond num­ber reflects the total of header images loaded
• on line 7 you notice my image exten­sion (.png), my image width and height and the alt text: change them to your needs.
• the last line hooks the rota­tor to the lay­out: check out below: Posi­tion your banner.

In fact, the rota­tor will resize the images you load to the dimen­sions set in line 7; if you load the images with the cor­rect dimen­sions, these val­ues could be deleted from the code.

From the last line of code you see that we have posi­tioned the ban­ner after the post title
add_action('thesis_hook_after_title', 'rotating_header_images');
If you want to use the ban­ner as a back­ground for your blog title, replace this last line of the code with:
add_action('thesis_hook_before_title', 'rotating_header_images');

If you want to replace the title with the ban­ner, use also
add_action('thesis_hook_before_title', 'rotating_header_images');
and then dis­able the title dis­play from your Design Options in the Dashboard.

If you need help, just use the com­ment form here below.

• the­sis header rotator
• the­sis rotator
• the­sis word­press background
• tuto­r­ial header
• header ban­ner
• the­sis rotat­ing header image
• 2011 word­press the­sis chang­ing header image 2011
• header rota­tor tutorial
• word­press header ban­ner rotator
• the­sis rotat­ing header image 2011

Related posts:

1. Ban­ner Rota­tor for Semiomantics
2. Cre­ate a Header Wid­get in Thesis
3. Semi­oman­tics The­sis Interpretation
4. Cre­ate a Wid­get below the Mul­ti­me­dia Box in Thesis
5. Semi­oman­tics XO Flash Header Accordion

This entry was posted on October 27, 2010 at 12:36 am and is filed under Semiomantics, Thesis for Semiomantics, Thesis Theme, WordPress. You can follow any responses to this entry through the RSS 2.0 feed.