Cutline Theme for WordPress

One Giant Leap for Mankind

Cutline Theme for WordPress header image 2

Totally Random Header Images for Cutline

October 11th, 2006 · 155 Comments · How To

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.

Header image randomizer!

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.jpg
  • header_2.jpg
  • header_3.jpg
  • header_4.jpg
  • header_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!

Download the new, special-case header image randomizer!

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!

Tags:


155 Comments so far ↓

  • Ethan

    Hi Chris.

    Wanted to post the edited portions of my header.php file but it got messed up. How do I post code into comment boxes?

  • Deb

    Help. I new to all of this kind of stuff. I created these gorgeous headers in pagemaker, I’ve got them all named e.g., header_1.jpg and I uploaded them onto WordPress. From there I’m stumped. To simply get one customized image in the header you do that from the dashboard, presentation and custom header image. But to get these random images to work I’m just a little more than clueless. Where do I copy this code. I need detailed step-by-step directions.

    Your tutorial is assuming some knowledge that I apparently don’t have.

    All help would be greatly appreciated.

    Thanks!

  • Michelle

    I was just wondering if it is possible to do the randomizing with more than 5 images and if so can you tell me how.

  • pria

    same thing as deb.

    and how do you go about _creating_ a wordpress template?

  • Michelle

    hi,

    I just want to say thanks for creating such a great blog design choice. I am an artist at heart and love to change things and this header gives me the opportunity to have a new look each time i visit my site.
    I currently have designed my own images and have 25 rotating images on my blog(www.goldenvegetarian.com) My blog is still in progess buy I love the way it allows me to customize it without having just a static picture.

    Great work I just love it.

  • randomosity » links for 2007-01-12

    […] Totally Random Header Images for Cutline | Cutline Theme for WordPress (tags: wordpress images CSS tutorials themes plugins templates) […]

  • Cecily

    Could someone share the information on how to get more than five random images in the header? I’ve uploaded around ten to the server, but only five show up in regular rotation. Thanks!

  • Ethan

    HI.

    Go to your cutline theme folder. Look for the header.php file and find the line that had this : php echo(rand(1,5). Then just change the number 5 to something else that you want. That should do it.

  • Rod

    Hi all. I would like to include the tagline with the site name. I have filled in this of course but in Cutline in does not seem to appear. Am I missing something? I wonder.. and help in this matter is appreciated. Thanks Rod

  • Tom

    Chris,

    You rock, dude. I love your theme! I am trying to use a logo in the masthead while still keeping the WordPress Weblog title under the “Options Tab”. How can I do both so that I can use my logo and still have a Weblog title? Currently, I made the H1 title pop out on the far right, and made it very small. (I know, it looks like dog poop!)

    Also, how can I center my logo in the masthead section…I have tried everything in my limited bag of css tricks. Any help would be much appreciated. Thanks!

    Tom Z.

  • Important Notes About WordPress 2.1 and Cutline Compatibility | Cutline Theme for WordPress

    […] Find out how to get random header images with Cutline! ← Use this Simple Plug and Play Sitemap for […]

  • Sucharith

    Hi,

    Does the Random Header Image fix work with the latest 1.1 version ?

    Sucharith

  • Cutline 1.1 — Running a Killer Website Just Got Easier | Cutline Theme for WordPress

    […] Find out how to get random header images with Cutline! ← Important Notes About WordPress 2.1 and Cutline […]

  • Chris

    Sucharith — Both of the download links in this post refer to header files that were constructed for version 1.03. I actually changed their names to reflect the fact that they are now legacy code, as each file is appended with _1_03.

    I have quite a bit of work to do regarding finalizing the 1.1 release, and part of that work is to issue new random header image files that will work with the new version.

    Stay tuned for those, though, as I hope to have them out today.

  • Chris

    Sucharith — Updated random header generators are available at the bottom of the official Cutline 1.1 release post.

  • Marlo

    Chris,

    I noticed that the random header file is not calling the custom.css file. To get it working, I inserted: /custom.css” type=”text/css” media=”screen” /> at line 12. And replaced at line 23.

    Hope that’s all I needed to do. Thanks for the great theme, btw.

    -Marlo

  • Mark

    I think Marlo is on to something, except my line numbers are a little different than hers. I did the line 12 fix and it added my custom css back in but blew pretty much everything else out of the water.

    Could you maybe take a look at the random header file (not using the special one)? Also, what’s the impact of the IE specific stuff on the custom css file. do they reference it?

    Thanks.

  • Mark

    OK, I answered my own questions about the IE specific stuff once I had a moment to have a look.

    Any word on the random header file and custom css? I tried Marlo’s suggestion, although I have no idea what she replaced at line 23 as my line 23 is the body tag. Just adding /custom.css where she did breaks all the css for the blog.

  • Sara, Ms. Adventures in Italy

    Hi Chris – I am an instant convert to Cutline…but I wasn’t able to find the image overlay answer? Was Ethan (above) close? It seemed to be missing something. Thanks for your work!

  • Paul

    I agree with Mark as to the random header file and the custom css. Seems like it is not picking up the custom css causing the styes to break apart. Any one know how to fix this issue?

  • Mark Mathson

    I would like to have my blog name and the post or page name in the title formatted like this cutline.tubetorial.com page is. Any suggestions on how to achieve this in the above code?

    Thanks…

  • Mark Mathson

    Oops… I meant to post it like this…

  • Mobius

    Man… You are a genious!!!

  • Eric

    Nice theme. Thanks.

  • rahul

    This is the best Theme in the whole world.
    Thanks Chris.
    —-Rahul India.

  • Cutline på dansk

    […] Cutline ser enkelt ud, indeholder dette WordPress-tema flere avanceret funktioner, som bl.a. skiftende “header” billeder, indbygget “Site-map” funktion, der forbedrer søgemaskine optimering (SEO) og et […]

  • Patrick

    I was trying to put a background image behind the h1 in the masthead..so that I had a background image behind the h1 text of the blog title. any suggestions?

  • Patrick

    oh got it … I had to un comment the masthead image in the css and change the masthead box size…

  • Cutline 1.1 på dansk

    […] Cutline ser enkelt ud, indeholder dette WordPress-tema flere avanceret funktioner, som bl.a. skiftende “header” billeder, indbygget “Site-map” funktion, der forbedrer søgemaskine optimering (SEO) og et […]

  • Cliff

    Am I wrong, or does your random header file not work with custom css? I can not get the custom.css to work with your random header.php. I tried just adding class=”custom” to the body tag, but that didn’t work.

  • Imágenes aleatorias de cabecera

    […] eran las mismas según la sección, pero ahora cambian de forma aleatoria. He seguido los pasos de este tutorial – en la web oficial de soporte del tema Cutline – y en 10 minutitos lo tenía funcionando. Espero […]

  • hoosierplew

    @Cliff –

    I noticed that too. you need to copy over the stylesheet link as well as adding “custom” to the body tag:


    /custom.css" type="text/css" media="screen" />

  • Paul

    I’m using the random header function for the first time but is working intermitently and sometimes the image is not loaded – any ideas please?

  • Paul

    Chris no need to moderate this or my last comment – I’m a clut! One of the header files started with an upper case ‘h’

  • Garri

    Does anyone know if this random header image generator can be successfully used on the Press Row theme?

  • hans

    Where do I place the special random images code?

    Do I remove all the code for the header images 1-5 and then paste the new code in?

    thank you

  • Jeremy

    Is there ANY way to do this without php, in xhtml or html? If not how do I know if my host site uses php? Thanks, awesome tutorial and idea by the way.

  • Dustin

    If your host doesn’t have PHP installed, you need a new host. You can bet that any commercial hosting service has the preprocessor installed. Check it by creating a file called phpcheck.php with the following code:

  • Wordpress Plugins

    […] Random Header Not a plugin, but can be adjusted for use by just about any theme if you’re willing to edit your theme files. […]

  • Modifying the Cutline theme | Patrickone Dotnet

    […] of the header.php. Why? Because this modication has already been done by Chris himself. Just go to the Cutline page and download the new header file to replace yours and the five jpeg images you replaced will now be displayed […]

  • Kori

    By chance, will this work for Pressrow?

  • Peter Beck

    Howdy — I’m having the same problem that a few folks have noted above, namely that for WordPress 2.1.3 and Cutline 1.1, inserting the randomization files breaks the custom css changes I’ve made.

    If it can be corrected via a line or two of extra code, I’d really appreciate more explicit instructions about what and where to place them.

  • A New Look and A Cool New Tool for BeyondBehaviors | Steve Nguyen’s BeyondBehaviors.Com: School Crisis & Traumatic Stress Management

    […] creator, Chris Pearson, has added some nifty features to this theme like the random image header images (I have replaced Cutline’s default images with ones of Dallas, Texas) and a built-in sitemap. […]

  • Nick Molnar

    Chris-

    Excellent theme.

    Is there an easy way to assign specific header images to specific pages?

  • Ben

    I have my header image on the front page but on the Archives, about and sitemap the default headers work. How do I use the same home page header throughout the cutline site?

  • pat

    Hi–I’m on wordpress and use cutline–and I really like it–but I cant figure out whether the random images is actually available to me. I currently have a free of cost blog and I dont believe I have access to customizing CSS, so is this feature available to someone in my position or would an upgrade be necessary? I’ve double checked my wordpress tabs in my presentation and theme area and I dont see where I can simply place this random image code (I’m still a little new to blogging, so….) Thanks

  • mobmash blog » Blog Archive » links for 2007-08-01

    […] Totally Random Header Images for Cutline | Cutline Theme for WordPress (tags: blogging howto design wordpress) […]

  • Eugene

    Hello guys,

    I used

    [code]
    /images/header_.jpg” width=”770″ height=”140″ alt=” random header image” title=” random header image” />
    [code]

    the header img only shows on the main page not on any other page. any idea?

  • Nancy

    I uploaded the random header thing from Chris and now I have no image and something funky has happened to the margins. I don’t even know where to find code — I just uploaded to images folder and expected my five images to work. It did remove the default image.

    Help of any kind would be appreciated so much!

  • zagg

    Cris, first of all thank you for this spetacular theme. I’m trying to use the random_header_1_03.zip but it seens not to be the 3 columms version. Is there a new version?
    thank you man!!

Leave a Comment (Need help? Visit our Support page and Forums first.)