A great way to make the front page of your Web site more dynamic is to use random header images. Instead of seeing the same image on every visit, users will see random images, thus making each experience on your site a little less predictable (and a little more fun!).
Get the Goods!
Basically, the theory (and thus the code) behind this is quite simple, and I’ve prepared a random header image tutorial that you can peruse at your leisure if you’re into that sort of thing.
But, because I’m all about hooking you guys up with things that are simple, easy, and good, I’ve taken the liberty of preparing a brand new header.php file that you can download and install in order to get cracking with random header images.
Installation Notes: If you’ve made changes to your original header.php file, you may want to compare these two files first to ensure a smooth transition. Other than that, just overwrite the existing header.php file with this new one, and your headers will all be “randomized!”
Update: These files are now only provided for legacy support on versions 1.03 of the theme or older. If you’re running WordPress 2.1 and Cutline 1.1, then you’ll want this file for random header generation.
Some Web hosts do not support WordPress 2.1 on certain plans (MediaTemple’s old shared server plan, for instance), and because of this, I’ve chosen to keep these files around for folks who don’t have any other options. Of course, I suppose you could always switch to MidPhase, the hostess with the most-ess, but then you’d have too much of a good thing, right?
Assumptions:
This special header.php file assumes that your images are named according to the following default convention:
header_1.jpgheader_2.jpgheader_3.jpgheader_4.jpgheader_5.jpg
Special Case Solution
The default code in this new header file should work for most people, but what if you want to use the random effect and you want special images to appear on certain pages?
I’ve got you covered.
For you special cases out there, I’ve prepared yet another header.php file that contains the necessary PHP and XHTML to accommodate your needs.
So, instead of using the file referenced above, use this one instead!
Update: Once again, I’m leaving this file here for legacy support only. If you’re running WordPress 2.1 and Cutline 1.1, then you’ll want this file for special random header generation.
It should be pretty straightforward, but if you have any questions at all, you know where to find me!
I want to customize header images — one stable image for the front page (not a ramdon image), and a set image for each of four categories.
Is there a how-to on this?
Thank you.
Hi all, Randomizer seems to be working but photos are squished, has anyone had this issue happen and if so, any fixes? Thanks in advance, any & all help would be great!
Sorry, changed img size to 970…so easy. Thanks, great theme, love it!
I also put together a WordPress Widget to accomplish this. It also requires the images to be sized correctly, but they can be named anything and will be randomly selected for each page.
Download here
Wordpress Rotating Header Images no Plugins » Personal Blog of Jason Neuman » Blog Archive // Aug 23, 2007 at 1:20 am
[…] is the man responsible for the well designed Cutline WordPress Theme that actually comes with an implementing tutorial for adding the rotating image headers including the […]
Hi, nice image randomizer, I want to use it for another wordpress themes, that have a header image. Could it be work? or it is just for the theme cutline? I have no enough knowledge in coding.
Cutline Theme | Daily WordPress Themes // Sep 25, 2007 at 12:34 pm
[…] can easily switch between two column or three. You can add random header images and so much […]
Upgrade marathon // Sep 29, 2007 at 12:46 am
[…] so we can go to the Botanical Gardens to catch some shots of the tulips for my template’s Random Header […]
New Look, Part Deux | The Story of My “Second Life” // Sep 29, 2007 at 9:07 pm
[…] led me to Cutline by Chris Pearson. This is no ordinary WordPress theme … it’s got random header images, a support forum, and more. I love the minimalist look and installation / customization was a […]
Can the random headers be used for the wordpress.com free blog?
Random header’s up // Oct 2, 2007 at 12:01 pm
[…] Yayyy, finally got some photos up for the random header. […]
One thing I noticed was that the width was set to 770, instead of 970.
I just changed it manaully – otherwise it works great.
Thanks.
chris, hi… this is all so over my head that it’s not even funny. but – i love your theme and i want to customize it and make it better – someone helped me at one point to put pics on there – 5 random watermelon pics – but i want to change them and well, i don’t even know how to upload the pics, etc…
truthfully – i don’t want to be a cutline pro. i just wanna cook and blog!!!
anyway – we could get together via emails or phone for a tutorial and i could pay you for your time? since it’s your baby and you know all the ins and outs – well, it’d be amazing if you were willing… please feel free to comment on a post – any post – on my blog and then i could contact you back from there. please? pretty please???
much appreciated…
Something is wrong – I download your file and then replaced the existing header.php with the new one. However, nothing happens except the the existing picture is presented too small. What am I doing wrong?
Cutline theme is awesome. All is working perfectly in my blog.
Claudia, why don’t you visit the forums to get some help. Or read carefully the posts, you will find answers to all your questions.
Thanks so much for this Chris. I was wondering tho, after I uploaded the random header file, my blog description is gone?
I noticed that its missing the “bloginfo(‘description’);” on the random page, is this why?
How do I add my description back? Thanks!
For that guy and whoever else who have uploaded the new header.php and are baffled because your pic is the wrong size – go into the code and change the image width at the very end of the page from 770 to 970 – the Cutline 3-column split uses a wider header. xo.
omg, it very useful, i been searching for this random thing, THANK !!!
If i using the random function on other area also can, it not need to be at that header.php?
Oh, and did not know about it. Thanks for the information …
How do I love thee? Let me count the ways…
And I lost track. Cutline is the template I’ve been looking for for a long time. I love how neat, clean and readable it is. I love the fact that you have a tutorial AND a forum.
I am such a computer dummy when it comes to all the technicalities of websites. I just love that there is a place I can get answers so that I can optimize my site.
Thank you. Thank you. THANK YOU!
BTW: Did I say I appreciate all the on-line help?
Please help me with my header images. All I get is the white box with the little red x and no photo.
The random header file is working correctly (when I right click on the header, it says header_1.jpg, and when I click refresh and then right click on the header, it shows header_5.jpg, so I know it’s working). Just can’t get the photos to appear. Can’t tell you how many times I’ve re-ftp’d the images and chmod’d them.
I had the random header photos working perfectly back in November, but my host physically moved their servers from one city to another city, and since then the photos won’t appear. Coincidence?
I’ve reduced the size of the header image to 240 x 30 just so it doesn’t look bad to visitors.
Thank you for your help! I love cutline.
O’DonnellWeb - This is not a homeschooling blog » Blog Archive » links for 2008-02-14 // Feb 14, 2008 at 6:18 pm
[…] Totally Random Header Images for Cutline | Cutline Theme for WordPress (tags: blogging wordpress design) […]
I am experiencing the identical situation as Leif above. Please help me out. Thank you so much for the excellent theme. I am learning a great deal.
FYI the new(er) random header file doesn’t have the custom.css reference in it.
btw thanks for a great theme
Hi, great theme !
Am trying something new with the random header images. It should be able to fit 7 images that are 140×140 pixels big. Now I’d like the header to pick 7 of these images at random and stack them next to one another covering the whole width of 980.
I’ve come to this so far:
<img src=”/images/.jpg” width=”140″ height=”140″ alt=” random header image” >
<img src=”/images/.jpg” width=”140″ height=”140″ alt=” random header image” >
<img src=”/images/.jpg” width=”140″ height=”140″ alt=” random header image” >
<img src=”/images/.jpg” width=”140″ height=”140″ alt=” random header image” >
<img src=”/images/.jpg” width=”140″ height=”140″ alt=” random header image” >
<img src=”/images/.jpg” width=”140″ height=”140″ alt=” random header image” >
But the code doesn’t put the images next to one another but underneath each other.. What do I need to change to get this going ?
Hmm, the code doesn’t appear like I put it..
Hi, I wonder if someone can answer my question ? Firstly love the theme Cris, I have commented out the origional 5 themes with the help of a small tutorial video. I then produced a new header which was saved as a jpg. The problem I have is I have no idea how to turn the header file into a php script so I am able to paste the script into the header editor, or if there is another way to perform this task even better As you can probably tell all this is very new to me.
If anyone is able to help that would be great.
Thanks,
Paul.
I just installed the random image header for Cutline, but like a few others above, I have a 3 column cutline theme going. I changed the width to show as 970, but it’s still showing as a two column photo and knocking out my third column. Any advice?
I’ve managed to increase the width of the photo, but it’s still knocking out my third column.
Nor is it randomized.
Is there a place I get get the original header.php file if I want to switch it back.
I know I should have saved the code…but this is all a little over my head.
Sorry for all the posts as well….
How do I just use one header image?
Anouncing MrWeller.com | MrWeller.com // Mar 30, 2008 at 11:51 pm
[…] to cut some of my photo’s down to size. I then used a random header script I got from here http://cutline.tubetorial.com/totally-random-header-images-for-cutline/. This made such that everytime the page is reloaded you get a fancy new picture. The other thing i […]
EXCELLENT!
I really like your theme – Cutline. I just customized my header images. You’ve provided tremendous support for this theme. Thanks! Referring your article here:
http://mycoolonlinestores.com/blog/interested-in-how-to-change-your-header-images.html
do you have a different script for the 3column split? cause i tried with the ones u provided above, and didnt work.
WP 2.5.1/ Cutline 3-Columns split 1.2. I am running with the random header which works perfect. However, I am trying to create a static picture for a page (memoria in aeterna) but it seems to be ignoring the code and using other pictures instead. Below is my header.php -Thanks:
<img src=”/images/header_harold.jpg” width=”975″ height=”150″ alt=” memoria in aeterna page header image” />
<img src=”/images/header_.jpg” width=”975″ height=”150″ alt=” random header image” />
Has anyone found a solution for the pictures that don’t appear and you get a red “X”, but you can refresh the image itself and then it’ll show – problem? The only page this is happening to me on is my Archives page. (The others work great) I’m no PHP expert, but I cannot even find where any code is different than the code for my About page, which works.
I am running the latest version of Cutline theme.. want to use random header images.. saw your post on the new header.php but it refers to older versions of the theme..
I did download them to see the content of the Zip file for the newer version.. when I extract files, it is an empty file..
Is there a link to a new header.php file for the new version of the theme?
Tracy – I had the same problem and switched back to 1.03 to get it working on a WP 2.51
Thank you man.
Best regards 🙂
Nice work here Chris! I’ve been looking for a clean and simple template for a separate project that I’m working on, and was thinking I was going to have to write a random image script. Strike that off my list! Thanks! 🙂
I got another post regarding this. It can be used to add image header to any wordpress theme. You won’t regret reading it.
http://opensourcethefuture.blog.co.in/2008/10/10/tweaking-your-blog/
“If you’re running WordPress 2.1 and Cutline 1.1”
I hv NO idea whr/how to find out wht version am using! Where do I go?
Chris – I’m a newbie & I don’t know html – but I love CUTLINE . I choose it because it’s clean, a big header, one wide column & one narrow. BUT – how can I get two lines of type above the header – as my blog title? WP said it can’t be done – but you have it here –
First line – Cutline Theme for WordPress
Second line – One Giant Leap for Mankind
Can you help please? Thanks very much.
@Kate
to get that you have to set both fields in the Settings section of your blog.
The first line is “Blog title”
Second line is “Tag Line”
I’ve done that – six ways to Sunday ~
Blog Title – Kate’s Window
Tagline – Reflections of a Bronx Baby Boomer Living in the Heartland
In a few words, explain what this blog is about.
it still doesn’t come out under “Kate’s Window” I’ve tried shortenting it – even one word. I get “Kate’s Window”, next line is dotted line, 3rd line is Front Page and 3 other pages.
Here’s the kicker – In reviewing ALL the other “2 line” blog & tagline masthead theme in WP – my tag line shows up on every one – from Andreas o4 to Sandbox and every one in between.
Any clue ? Thanks,Kate (If this is Chris – really good work – I like all of your themes.)
FYI – Here’s my most recent conversation w/WordPress – for some reason THEY/WP removed the tagline.
My response to email below – Actually, Hanni, I was beginning to believe I had invented this dilemma. Well, it’s back to a widget. Kate
From WP ~ Subject was tagline on Cutline ~
– Hide quoted text –
On Sat, Nov 29, 2008 at 11:09 AM, Hanni – WordPress.com wrote:
Hi Kate,
I’m afraid that we’ve removed the tagline feature on that theme here at WordPress.com.
Sorry about that!
Hanni
WordPress.com Support
Is it the case that at WP.com we do not have the ability to use the random images – as we don’t control the PHP, etc, files?
I will Try
Random WordPress Header | Pixel Shoppe // Jan 8, 2009 at 12:04 am
[…] found a plugin that lets you do just that. It’s called Header Image Randomizer. It’s simple to install and customize. The site offers a […]