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?

The sleek typography set to a 20px baseline grid? HA.

Naturally, you noticed the huge header image! Photographs are the most visually striking graphical elements of any design, and when you place them in a spacious environment that is free of clutter, they pack an unparalleled visual punch.

In addition to their general appeal, however, photographs also afford people the chance to be uniquely expressive. With the Neoclassical theme, you’ll be able to include as many images as you like in the random image rotator, all with brain-dead-simple customization.

Don’t hide your photography skills any longer! Show off your finest “crop” with the Neoclassical Theme for WordPress.

For the record, the default header images are 865px wide by 180px tall, and for seamless integration, you’ll want to use the same size images for your rotating headers.

Content.

Why, then, are so many sites – and WordPress themes, in particular – typographically challenged? In my opinion, the process of Web design must start with the content and move outward, and typography is the foundation for solid content design.

As a Webmaster, your primary goal ought to be to clearly convey your message to your audience. Whether you are selling a product, teaching, or simply writing about a hobby, you are guaranteed to fail unless you are able to communicate effectively.

Of course, this is precisely why you should settle for nothing less than a design that emphasizes typography, simplicity, and visual clarity—the three primary components of effective communication design.

Neoclassical Simplicity

Through the creation of the Neoclassical Theme for WordPress, I have tried to achieve a balance of market desires, sound design, and overall simplicity.

It’s no secret that people want 3-column themes, but more often than not, an additional third column just gives people more space to add unnecessary visual density. I can’t tell you how many times I’ve seen Webmasters running low traffic sites on 3-column designs, only to fill up all available space with ads that more than quintuple page load times. Meanwhile, those same ads generate about $20 per year, all in the name of a terrible user experience.

Hence, I’ve been hesitant to release a 3-column theme before now. The time has come, however, and I sincerely hope that the visual simplicity and prevailing minimalism will inspire Neoclassical users to make sound decisions about how they use the theme’s available space.