Copyright © 2010
Yorgo Nestoridis. Visit the original article at
http://yorgonestoridis.com/yorgo-nestoridis-development/semiomantics/thesis-tutorial-header-banner-rotator.
How to add a rotating Header Banner in Thesis
Considering the website as a piece of real estate, it becomes clear, that the top segment of the page is the most precious location. A fancy large header graphic is eating loads of space, namely when it reaches over 100 pixels down from the top of the page. If the header graphic is a static element, doing not more than linking to your home page, then you have just given away your most precious square inches for a one time shot of static beauty.
By default the header links to the WordPress Home Page. Let’s keep it that way for the time being. We can however display an array of header graphics, rotating upon page load. You may remember the exercise on the original YORGOO Press blog a few years ago, as well as the Atahualpa Customization on YORGOO Media.
This Tutorial shows you how to add a rotating header banner in Thesis.
Header Banner Rotator in Thesis
Theses makes the task easy,as you just need to:
- Create an image folder for the rotator
- Edit and Load your header images
- Add some lines of custom functions code
- Customize your code
- Enjoy the banners on your site
1. Create an image folder for your banners
Using your FTP client, access the theme folder, then the sub-folder ‘custom’.
Create there a new folder called header_rotator:
2. Edit and Load your images
Here is the constraint: all images must have the same extension (jpg,gif or png) and they are ideally all of the same size. I prefer to load png format as it allows for transparent images. The maximum image width is displayed on ‘Header Image’ under the Theme menu:
In my case it’s 1014pixels. I will therefore load images which are 1014 pixels wide and which all will have the same height (mine are 100 px) and they will be in png format.personally I like typographic headers as I am using graphic sliders underneath. I will therefore create a few headers with informative headlines.
In as much as the content is concerned, I will just promote my main categories for the purpose of the exercise.
You need to name your images ‘header_1, header_2, … plus the extension, in my case: .png. For example: header_1.png
Upload your images to the newly created folder via FTP:
3.Edit Custom Functions in Thesis
It is time now to add a few lines of custom code to custom-functions.php from your Custom File Editor 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 commented, so here just a reminder:
- on line 4 there are two numbers (1,3): the second number reflects the total of header images loaded
- on line 7 you notice my image extension (.png), my image width and height and the alt text: change them to your needs.
- the last line hooks the rotator to the layout: check out below: Position your banner.
In fact, the rotator will resize the images you load to the dimensions set in line 7; if you load the images with the correct dimensions, these values could be deleted from the code.
Position your Banners
From the last line of code you see that we have positioned the banner after the post title
add_action('thesis_hook_after_title', 'rotating_header_images');
If you want to use the banner as a background 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 banner, use also
add_action('thesis_hook_before_title', 'rotating_header_images');
and then disable the title display from your Design Options in the Dashboard.
If you need help, just use the comment form here below.
| Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription. |
Related posts:
- Banner Rotator for Semiomantics
- Create a Header Widget in Thesis
- Create a Widget below the Multimedia Box in Thesis
- Semiomantics Thesis Interpretation
- Semiomantics XO Flash Header Accordion
