A 3-column template system with rotating header images
Random header image... Refresh for more!

How to Customize Your Random Header Images

custom

After downloading Neoclassical, one of the first things you’ll want to do is customize the random header images that now grace the top of your site’s pages. Doing this effectively requires knowledge of exactly how these things work, and with my help, you’ll be a professional image randomizer in no time.

Oh, but before we go any further, you’ll need to download and install the updated version of rotating_images.php. In order to provide you with a more robust rotator, I had to modify the original code slightly.

Background Information

The Neoclassical Theme comes with a folder named /headers that contains the 5 default images used in the rotator. These header image files all follow a simple naming convention:

  • header_1.jpg
  • header_2.jpg
  • header_3.jpg
  • header_4.jpg
  • header_5.jpg

On default installations, these header images are controlled by a theme file named rotating_images.php. This is a simple PHP script that randomly selects one image from the /headers folder and displays it using the appropriate HTML.

The script, which consists of two main parts, is easy to understand. First, we generate a random number based on the total number of images in our /headers folder (this number is manually controlled, and the default is 5):

<?php
   $random_image = rand(1,5);
?>

Next, we output the image associated with the random number we just generated:

<img src="<?php bloginfo('template_url'); ?>/headers/header_<?php echo $random_image; ?>.jpg" ... />

In the above code, note the occurrence of the variable $random_image. Because this value changes randomly, the filename referenced in the image declaration also changes.

Quick Customization Example

Now that you know a little bit about how the random header generator works, let’s tweak it a little bit. For this example, let’s say that we we’ve created 8 killer header images, and we’d like to replace the default images with these new ones for display on our site.

Step one is to ensure that your images follow the required naming convention—header_1.jpg, header_2.jpg, header_3.jpg, and so on. It’s also important that your image subscripts start with 1 and increase in increments of 1, because any other configuration would require additional modification of the script.

Step two is to upload those images to your /headers folder, which is located inside your base /neoclassical theme folder.

Step three is to keep in mind that the default configuration can only accommodate 5 header images. In our example, however, we’re looking to include 8 images, and in order to pull this off, we’ll need to make a very slight modification to rotating_images.php:

<?php
   $random_image = rand(1,8);
?>

In the above code, all I did was replace the default value of 5 with the number 8 (highlighted, kinda). Once you save and upload this modified version of rotating_image.php, you’ll have an image rotator that displays one of eight random images on each page of your site.

A Few Details…

The default header images are all 865px wide by 180px tall. Personally, I think this makes for a relatively unobtrusive yet visually striking crop, but your mileage may vary. Either way, I think you’ll appreciate the balance of your design the most if you keep your images that width.

If you use an image that is less than 865px wide, it will align to the left underneath the site title, leaving a visual gap of whitespace to the right of the image. In the event you simply must use such an image, I recommend leaving it aligned to the left. Despite that, I know many of you will want to tinker with a center-aligned image, and in order to do that, all you need to do is add the following declaration to your custom stylesheet, custom.css:

.custom #rotating_image img {
   margin: 0 auto;
}

Actually, while you’re at it, why not check out a right-aligned image, too:

.custom #rotating_image img {
   margin: 0 0 0 auto;
}

Now who can resist the urge to customize after that? 😉

471 comments

1 BikinHoki { 02.04.11 at 8:13 pm }

Hello Chris,

Thank you for your work and themes. it easy to install and modify I use http://www.blog.bikinhoki.com for my blog. I love to continue modify neo classical theme.

2 nancy { 03.01.11 at 5:07 pm }

I have a client with the NeoClassical 1.1 theme. It is working in 3.04 but will it work in WordPress 3.1?

3 Alexander { 03.12.11 at 3:20 am }

Thank you for a great post, awesome theme by the way:)

keep up the good work

4 MG { 04.02.11 at 10:48 am }

I have a question that may be answered above, but I couldn’t seem to find it. Is there a way to made the header clickable so it links back to the homepage? I’m using all the same images, so there isn’t a rotation.

Thanks!

5 David Miller { 04.04.11 at 1:12 am }

Since wordpress upgraded to 3.1 I have been getting this error message on every page but my front page:
Notice: link_pages is deprecated since version 2.1! Use wp_link_pages() instead. in /home/content/d/a/n/danceladie/html/wp-includes/functions.php on line 3303

How can I fix this?

6 mircats { 04.19.11 at 1:54 am }

how to i get rid of the title on the top? my customized header image contains the name of my blog…i’m lost! thanks for your help 🙂

7 Chris Pearson { 04.19.11 at 11:05 am }

Mircats, here’s how you can remove everything above the image at the top:

  1. First, open your header.php file, and locate lines 29 and 30, which include <div id="rss_subscribe"> and <div id="logo">.
  2. Delete (or comment out) those two lines, and that will remove everything above your header image.
8 MG { 04.20.11 at 10:15 pm }

I have a question that may be answered above, but I couldn’t seem to find it. Is there a way to made the header clickable so it links back to the homepage? I’m using all the same images, so there isn’t a rotation.

9 Redsun { 05.01.11 at 8:05 pm }

Hi MG, I think you can make the header image clickable by using <a href rel="nofollow"> before the image and then close it with </a>

10 Stephan Anstey { 05.12.11 at 12:59 pm }

Wouldn’t a count work better than hard coding the number in?

$directory = $_SERVER[‘DOCUMENT_ROOT’].”/wp-content/themes/neoclassical/headers/”;
$filecount = count(glob(“$directory*.jpg”));

$random_image = rand(1,$filecount); // the second number should equal the total number of images that you want to rotate

11 Aquilah { 07.24.11 at 2:31 pm }

If I want to remove the borders from between the posts and sidebars, where do I change/delete the coding? I can’t seem to figure it out and it’s the only change I haven’t been able to make.

12 Sebastian { 08.19.11 at 2:56 pm }

Awesome theme, keep up the good work!

13 Trish { 08.22.11 at 5:21 pm }

Hi,
I have a footer that is more than one line. I would like to center align or right align the footer. I’ve seen lots of codes to do this but want to be sure that it works with your three column theme. Can you help?

14 Lindsay { 10.11.11 at 1:56 pm }

Hey there, I just wanted to let you know our nonprofit wildlife and domestic rabbit rescue has been using your theme for a couple years now and we continually receive raving complements on how gorgeous our site is, despite the ads we put on it to generate a little extra income! Excellent theme development, we could not be happier! Thank you again!

15 boudewijn Lutgerink { 12.13.11 at 8:51 am }

Hi Chris,

While looking for a good theme for my new site I came across yours. This stuff looks great.
What I wonder about is if there is a possibility to add a URL to each individual image on the rotating header. That would give the possibility to show images of stuff one would sell and make the images clickable.

16 Bill Weissbard { 02.03.12 at 2:56 am }

WOW !!!!
I love this theme!
I was looking for a 3 column theme for my new blog. I wanted to put some affiliate links in the third col. I was impressed first that this theme worked well right out of the box (not all themes do you know) and I like the explanation of rotating banners in this post because it was very clear and to the point. Thanks for that – Chris.

I decided to extend the code to rotate my affiliate links as well. Here’s how I did it. There are three steps – do them in this order.

1] create a new file named “rotating_affiliates.php” this goes at the same level as the sidebar.php file in your hosting account.

2] add this code to the bottom of the “sidebar.php” file, just above the “categories” section.

3] Last step is to build the “rotating_affiliates.php” code. Create an array of your affiliate links, the form is;

<?php

// This section includes all the affiliate links and banners

$affiliate[1]=" “;

The usemap attribute scales a 300×250 banner so it fits right in the available column space. Construct as many links as you want ;
$affiliate[2]=
$affiliate[3]= etc. I created 9 links for this site
?>
Next you need code to randomize the links. I chose to display 3 links at a time, and rotate them on refresh. This code helps ensure that you don’t repeat any banner more than once in each refresh and ensures that the 3 banners displayed are not the same ones you displayed on the last refresh.

<?php
// Populate first 3 positions of a new array with the last instances of the displayed indexes

for ($k=1; $k<=3; $k++)
{
$test_array[k]=$display_affiliate[$k];
}

$nonrepeatarray = array();
for($m = 1; $m <=3; $m++) {
$rand = rand(1,9);

//ensure value isn't already in the array
//if it is, recalculate the rand until we
//find one that's not in the array
while(in_array($rand,$nonrepeatarray)) {
$rand = rand(1,9);
}

//add it to the array
$nonrepeatarray[$m+3] = $rand;
}

for ($p=1; $p<=3; $p++)
{
$display_affiliate[$p]=$nonrepeatarray[$p+3];
}

// This section displays the banners selected by the random number generator
for ($i=1; $i<=$display; $i++)
{
echo "”.$affiliate[$display_affiliate[$i]].””;
}

?>

Hope you like this,
Bill

17 Erlkonig { 03.09.12 at 8:55 pm }

I would like to replace the title at the top left with a logo designed by me. How can I do? Thanks to anyone who will help me.

(I have the wrong address before)

18 Dave { 07.18.12 at 9:35 am }

Hi – does anyone know where the Excerpt box is?

Thanks

19 gustie { 07.22.12 at 10:44 am }

hi, thank you for creating this theme, I really like it. I want to install it into my wordpress blog.

20 How to Customize Your Random Header Images — Neoclassical Theme for WordPress — Faeriebell's Blog { 09.13.12 at 2:39 pm }

[…] I need to do this in all my spare time: How to Customize Your Random Header Images — Neoclassical Theme for WordPress. […]

21 php jaipur { 12.14.12 at 9:25 am }

can you please tell me how can i retrieve all header images name in twenty eleven theme.