the-deuce.jpg

Simple Random Header Images for Your Blog

Design Tips for Where the Rubber Meets the Road: #02 - Random Header Images for Your Blog

If you could choose between a static home page or a dynamic one, which would you take?

Dynamic every time…but wait, doesn’t that require work to pull off?

Not if you use my incredibly simple random header image solution! Oh, and you could use this for more than just header images; I just figure that most folks will want to rotate their headers, since they tend to be the most dominant visual elements.

Are you ready to go random? Let’s do it!

1. Prepare Your Header Files

We're going to use 5 different images in our random header generator

For the purposes of this example, we’re going to use 5 different images to pull off our random header effect. It’s important that these images be the same size — this will keep your image declarations consistent and W3C-valid. So, grab the five header images of your choice, and name them according to the following convention:

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

One thing worth noting here is the fact that all of your images should have the same file extensions. If you’re using .gif files, then make sure that each header image has the .gif extension. Photographs will look infinitely better if saved as .jpg, though, so that’s why I’ve chosen that extension here.

Upload the images to your desired directory on your server. If you’re using WordPress, I’d suggest uploading the images to the images folder within your active theme directory. Once your images are on the server, it’s time to install the random header code.

2. Code It Up!

Because I hate to limit my examples to any particular type of CMS software, I have chosen to do a bare-bones illustration here. Since implementing random header images across different platforms is a straightforward task, I’ll leave that to you.

One thing that you do need to be aware of, though, is the fact that your page must be compiled as PHP, which means that your Web page cannot just be a regular old HTML (the page should end with the extension .php 1). But, if you’re running WordPress, you have nothing to worry about because WordPress compiles pages as PHP by default.

If you are using WordPress, then the Thesis Theme will save you some time here, and you won’t have to deal with any code at all! By default, the Thesis multimedia box will randomly rotate images that you place in your /rotator folder, thus making this an utterly brainless process.

If you’re using a different WordPress theme or another PHP-based CMS, here’s the random header image code you’ll need to get started:

<img src="http://path_to_images/header_<?php echo(rand(1,5)); ?>.jpg"
width="image_width" height="image_height" alt="image_alt_text" />

All the magic happens in this bit of PHP:

<?php echo(rand(1,5)); ?>

That little snippet of code produces — and then echoes, or prints — a random number between 1 and 5. Therefore, the header image references become header_1, header_2, and so on.

What, you were expecting it to be more complicated? Sorry!

Oh, and if you experience any problems implementing this, please let me know in the comments.

1 WordPress pages are still compiled in PHP, but by default, they do not end with the .php extension. I realize this is confusing, but this is the hand I’ve been dealt.

Take the Next Step!

  1. Share this on Twitter:
  2. Share this on Facebook:
  3. Submit it to StumbleUpon
  4. Bookmark it on Delicious

211 comments… read them below or add one

Charlie October 11, 2006

Great post! I like how this technique works hand in glove with the Cutline theme. It’s almost like you planned it that way.

Reply

jonathan October 11, 2006

Nice snippet of code… I have it in action here

Reply

Chris P. October 11, 2006

Charlie: Hmmmm :)

Jonathan: Looking great! Hey, one thing, though — the Cutline theme was released under a Creative Commons Share-Alike 2.5 License, which means that you must retain the attribution links that were included in the footer.

It’s all I ask for a piece of free, continually updated goodness!

Reply

jonathan October 11, 2006

no problem chris… and thanks for your great work!

Reply

Chris P. October 11, 2006

Hey, anytime…I can’t seem to get enough of this stuff!

Reply

Doug Karr October 11, 2006

Utilizing a server side script for random images can be useful if you actually want to test response/reaction. However, for high volume sites, you’re actually increasing the load and response time of your server. This can be done in JavaScript as well, resulting in quicker load times and less server resources. However, you won’t easily track behavior based on the image that way.

You can get many samples on Google: http://www.google.com/search?q=javascript+random+image

Reply

Chris October 11, 2006

I use a full PHP script for random images and then I include that in my page. It’s more complicated than this method, but it gives me more control. For example I can easily include the ALT tags, include individual links to each image, etc.

http://chris.comitar.com/blog/downloads/picture.phps

Reply

Chris P. October 11, 2006

Of course, I like your approach, if for no other reason than because I’m all about control.

However, I couldn’t have pulled off the simple angle with that one — arrays are where I draw the line! :)

Reply

Lawton October 11, 2006

THANK YOU! I was just wishing that I could do this, b/c I am photoshoping some new headers and wanted to randomize them. Chris, my WP blog using Cutline is still freezing up a lot. Any ideas?

It says this at the top all the time now:

Warning: call_user_func_array() [function.call-user-func-array]: First argumented is expected to be a valid callback, ‘widget_translate_noframes’ was given in /home/songsblo/public_html/wp-includes/functions.php on line 1279

http://www.songsblog.com

Reply

Lawton October 11, 2006

Does the code go in the Header file?

Reply

Chris P. October 11, 2006

Lawton: Try disabling widgets and see if that doesn’t solve your problem with the error text at the top.

Also, yes, the code goes inside your header.php file. For a specific look at how this will appear, check out how to add random header images to Cutline.

Reply

Lawton October 11, 2006

Sorry. Which one is the widget? It’s not the plugins right?

Reply

Chris P. October 11, 2006

The widget is, in fact, the plugin.

Reply

Lawton October 11, 2006

Thanks buddy. PS-

Tubetorial is the Cat’s Meow.

Reply

Lelia Katherine Thomas October 12, 2006

I’m personally not a fan of random header images. [To me] They’re amateurish and just extra and unnecessary glitter. People probably don’t come to your website to see your five “really cool” header images. They come for the content, first of all. And a static, thoughtful design is always best in my opinion.

Reply

Chris P. October 12, 2006

Leila,

I really don’t expect people to spend 0.5 seconds looking at — or caring about — my header images, but that’s not really the point.

Even the most subtle changes on a Web site can convey thoughts of “new” and “what’d I miss,” and I think that’s the real value that comes from adding a random element to any page.

And to be perfectly honest, I only added random header images on this site because I just wanted to get a different look without actually having to change the images manually!

Reply

jonathan October 12, 2006

If done tastefully, I don’t see the problem having random header images. It’s not about glitter or wow factor, but having a fresh face for a user to see, without the clutter. I agree with Chris’ response.

What can be annoying IMO is changing blog themes daily or weekly or (insert annoying timeframe) that some friends of mine do.

Reply

stephen October 12, 2006

I haven’t fully read your post – but is the method you are teaching any better/different than the script I used for the 120 images that randomly appear in the header of the ‘Apex SA/NT’ site I created a few years ago?
http://www.sant.apex.org.au

I welcome any other suggestions/modifications.

Reply

Chris P. October 12, 2006

Stephen: I think Doug’s comment answers/rebuts your question better than I could.

Reply

matrianklw October 21, 2006

Does this work for Blogger?

Reply

Chris P. October 22, 2006

Matrianklw: I don’t know how Blogger’s pages are composed. For instance, are they bare html, are they php, are they PERL?

I dunno! The only way this would work (as described) is if Blogger was based on a PHP framework.

Reply

coe October 23, 2006

Outstanding. Once again, you give great design insight. And don’t get me started about how much I like Cutline as a theme.

Reply

Internetagentur Mimbair October 24, 2006

Clever, very clever. The first designer I meet, who plays with PHP as easy as with Photoshop. ;)

Reply

anada October 25, 2006

Random header image is a brilliant design with php drive. I should collect applications like this to better serve my clients.

Reply

basil October 27, 2006

Hi Chris.

I have being looking for a site where it explains how in a simple way one can change the images on the header whether dynamically (that was my first wish) or as you have it here rotating the image by refreshing the page.

I’ll settle for that for the time being. I’m a newbie and all my stuff is self-taught. I have been playing with the coding that you have illustrated on this page for rotating images. Great so far!

I copied your code to a test page that I uploaded to my server with 5 header image, the mechanics of the coding works because every time you refresh you can see that the coding for the images changes.

But where are the images.

I have obviously failed in writing the proper coding for my particular site.

Can you lend a hand or better still could you explain to me in Dummy terms how I can get this working.

Sincerely thanking you for the opportunity to get it right.

Your eternal fan

Basil

Reply

basil October 27, 2006

Sorry Chaps forgot to ADD coding I used.

bentleyproperties

Reply

basil October 27, 2006

It seems that the coding does not show up on your page. If you go to:

http://www.bentleyproperties.com.es/test.php

Reply

Chris P. October 27, 2006

Basil,

In my example from the post, I used a representative file path instead of an actual one. This path:

<img src="http://images_folder_path/header_<?php echo(rand(1,5)); ?>.jpg” ... />

doesn’t really exist. You are supposed to substitute images_folder_path with the directory where your images are stored on your server.

Cool?

Reply

basil October 27, 2006
basil October 27, 2006

Thanks Chris I did that, you can see from the coding.

Reply

Chris P. October 27, 2006

Basil, your quotation marks are not being properly encoded by the server, resulting in “?” outputs. This has rendered your image reference useless. Once the code comes out right, you’ll be fine.

Trust me, the random header image code works like a champ.

Reply

basil October 27, 2006

Hi Chris,
I have corrected the quotation marks but Im getting a parse error, unexpected ‘.jpg” width=”image_width” height=”image_height” alt=”image_alt_text” />

Do you see anything wrong here?

Reply

basil October 27, 2006

.jpg” width=”image_width” height=”image_height” alt=”image_alt_text” />

Reply

basil October 27, 2006

Fro. my browser here it looks like you don’t get all the coding
.jpg”

Reply

The Lucky Punter October 27, 2006

Chris – first off, I really appreciate your work. Great stuff.

As you can see, I use your PressRow theme and love it.

Questions: (sorry, but not all will pertain to this post)

1) will the rotating image code above work for PressRow?

2) I have several different people writing on my blog – is there anyway to put the author name under the headline?

3) Lastly, is there anyway to make the homepage “longer”?

THANKS a lot for your time – i look forward to hearing from you.

Punter

Reply

Chris P. October 28, 2006

Punter,

Questions will be answered in the order they were received :)

  1. Some modification would be required in order to make the code work for PressRow. Unfortunately, PressRow’s header uses CSS background images to display the pictures, but the code above (as well as the Cutline theme) uses actual <img ... > tags to display the images.
  2. Author names are already coded into the template, and they just need to be “uncommented” in order to work. You’ll find author references within the <h4> tags in the following template files:
    • archive.php
    • index.php
    • search.php
    • single.php
  3. I’ve just updated the index.php file for the theme, so if you download it again and overwrite your index.php file, the length of your home page will be determined by your WP Options panel (which can be as big or small as you like).

Reply

basil October 28, 2006

If my image files header_1 to header_5 are in my image folder on the server and the path to your coding is
.jpg” width=” image_width” height=” image_height alt=” image_alt_text” />
Your coding with my path.

Why shouldn’t this work,

Basil

Reply

basil October 28, 2006

why is it it your page never copies the full coding whats missing is the path.
img src=”http://www.bentleyproperties.com.es/images/header_……………………..

Reply

Chris P. October 29, 2006

Basil, I’m beginning to think that PHP is not installed in your server. If that were the case, then this definitely wouldn’t work for you.

Reply

moirae November 5, 2006

If you want to see an awesome use of random header images, check out a blog called January One.

Reply

Andrej November 8, 2006

Thank you!

Reply

mountaineer November 15, 2006

Hey Chris -

I love what you are doing with random header images …
I noticed your newest one is of this years
West Virginia vs. Louisville football game …
one of the others is from last years slug fest.
Just curious -
Do you have connections to either school ?
Keep up the good work …

You are the best read around. Thanks again.

Reply

Chris P. November 16, 2006

Mountaineer,

I live in Louisville and have been a fan my entire life. As proof, I’ll point you to a post on one of my not-so-top-secret sites, the Deuce.

I was so distraught over the Rutgers loss that I figured my story (which is really the story of every life-long fan here in Louisville) just had to be told.

I believe that our story, which has likely been shared by fans of a handful of schools over the last thirty years, is one that is not often publicized. Despite that, I truly believe that it reveals the most poignant aspects of being a fan.

It’s the underdog story, except Cinderella is nowhere to be found.

Reply

Doug November 17, 2006

Do you know if this will work in Movable Type? I’m new to MT and am not sure if their pages are compiled in PHP.

Reply

Someone November 25, 2006

Hi,

can someone tell me if I can get this thing works with “orange themer” by porter?

usually I have to add banner in css like that:

.topb .banner {
float: left;
width: 700px;
height: 210px;
background: #fff url (‘/images/picture.jpg’) no-repeat bottom left;

but now I can’t implent this piece of code anywhere, tried few combination but still no results. Can someone help in in more n00b way, I really want to insert random head pictures on my future website..

Greetings.

Reply

Chris P. November 26, 2006

Someone,

I don’t know anything about that theme, but may I suggest giving the Cutline Theme for WordPress a try? It’s got more bells and whistles than you can shake a stick at, and I think you’ll find it easier to mod to your specifications, too.

Reply

Someone November 26, 2006

in fact my theme in irreplacable at the momment, but I terribly want to include random header. :/ Well ok, if someone else might know the solution, I’d be really grateful.

link to that “orange theme” is right here: http://www.themeporter.com/2006/10/06/orange-design-wordpress-theme/

Cheers, Someone

Reply

Someone November 28, 2006

i’ve made it by myself. thanks for ya reply anyway.

Reply

Klaus December 20, 2006

Can Someone tell me how he made it work a random background image in CSS. I know so far, that is should be possible to use a php snipplet in css such as:

random.php:

style.css: … background: url(random.php) …

but it does NOT expand my php (I use it in Wordpress).

Please help! Thx!

Reply

Chris P. December 21, 2006

Klaus,

When I first developed Pearsonified version 3, I was using CSS to control the rotating header images. In order to accomplish this, I actually had to create unique div elements for each different image that I wanted to use.

I started by establishing a naming convention for my header div elements—banner_1, banner_2, banner_3, and so on. Next, I declared different background images for each banner element within my stylesheet.

At this point, achieving randomization is relatively simple, as I only needed to call the appropriate banner div from within the XHTML markup. My code looked something like this:

<div id="banner_<?php echo(rand(1,8)); ?>">

The above code structure will randomly call on one of your div elements that is pre-defined in your stylesheet.

Personally, I grew tired of this method because of the additional work required when adding another image to the random rotation. On top of that, I think using an img tag with both alt and title attributes is simply better from an accessibility standpoint.

Reply

Luca December 21, 2006

hi Chris, I like your solution but my image is called from the CSS. Any idea about how can I manage to have random images using CSS?
Thanks

Reply

Chris P. December 21, 2006

Luca,

Read the comment directly above yours.

Reply

Robert Richard January 29, 2007

Hello,

I’m using Cutline theme. Need to get more than 5 images with Random Header, what should I change in the coding?

Thanks for your reply.

Reply

Chris P. January 29, 2007

Robert — In your header.php file, you’ll notice a line of code that contains this:

echo(rand(1,5))

That snippet of code outputs a number between 1 and 5; or to put it another way, that bit of code rotates five random header images. If you’d like to increase the number of images, simply change the 5 to whatever value you like. If you have 8 images, then make it 8.

Reply

Stewie February 7, 2007

Just pushed this up tonight. What an excellent tool.

Thanks!

Reply

Alexey M. March 2, 2007

Very simple decision. But if pictures greater each time long loads. I have refused.

Reply

Sandra March 8, 2007

:( i tried lots of times and i couldn´t…. I think i have to learn something else :(

Reply

Brad March 28, 2007

chris-

do you know anywhere/anyone who has a print.css file for your lovely Pressrow?

i’m trying to hack away at one, but it sucks.

bad.

let me know!

-Brad

Reply

Rhett April 16, 2007

Hey Chris,

First, many thanks to you for having the XHTML Sitemap. I struggled, unsuccessfully, many times with the Google XML Sitemap plugin. It’s a good feeling when you can follow directions and things work.

However, that’s not always the case, is it… I am attempted to add the random image code in. But it totally F’d my WP :D. The first, possible problem, is that I don’t know where in the header to place it. I successfully could add text and a sample header image (so I know something can be put in the right spot) below my header (with all the links, et al) but when I paste in the code, I think the php bit does something bad. I have currently taken it off, but I’ve created a sort of progression in images–here.

I don’t know if that will help at all. Any thoughts would be appreciated. Thanks.

Reply

Dean April 21, 2007

Chris,

Nice work. I am new to blogging and Wordpress…I like your random header images idea and would like to use it on another theme. Does your code only work with Cutline? If not, what do I need to do to get it to work in my theme?

Thanks, Dean

Reply

tomás May 5, 2007

Hello, questions…

I have a wordpress blog, and am using Cutline. I see tons of cool features, modifications, etc… that people implement, like on your site.. or on that of Jonathan…

For example, random headers, putting an RSS site feed button on the main page…where Front Page, About, etc…can go, or placing the Front Page, etc…text, above the header.

Can I do this? What am I missing? I dont understand, nor am aware of what I need to do in order to be able to do this stuff. Is it a question of manipulating the CSS style sheet?

Thanks for everything..
Tomás

Reply

Matt May 7, 2007

@Doug – You can do this in MT using JavaScript. Check out the source of my site… This is an alternative to php, cgi etc and works cross-browser. You just need to create the headers and then edit your templates.

Reply

J May 25, 2007

Hey!
Great tutorial! I am pretty new at this, and would like to spice up the site…I have followed your directions and saved all my pic files as directed…where do i paste the random header code, though? (I use wordpress).

I know this is a fairly elementary question, but i would really appreciate your help!
Thanks so much!!!

Reply

Chris P. May 27, 2007

J — Because your blog is on the hosted version of WordPress at WordPress.com, I don’t think you have the ability to add the necessary code to the header.php file.

Despite that, I’m pretty sure that there is a “Cutline Options” tab in the Presentation section of your WordPress dashboard, and I think there may be a random header image option on that.

Reply

Dan June 22, 2007

Thanks for the great article. I’m having a little trouble though. My banner image info is embedded in a bunch of “div” tags that refer back to a section of the css sheet. I’m fairly new to this, so I can’t figure it out. I’m using the bluedark theme for wordpress. Any suggestions?

Reply

Rachael September 3, 2007

I have a question. I’m sort of figuring this out blindly since all this is new to me. However, I have a blog with Livejournal and in my CSS, where the header image goes, I have the link to my rotate.php file on my own server. I thought this would work, it was temporarily working with a different script I was using, but it stopped randomly choosing images so I wanted to try this one. My questions (sorry for the longwinded-ness) is, the images aren’t pulling up on my livejournal. In theory, it should be working, yes? Or is my problem that the coding is specifically for Wordpress blogs? I can provide my CSS code and the .PHP code if it helps. Thanks in advance.

Reply

John Kalev September 10, 2007

Maybe you can help somehow Im missing something – followed the tutorial and am using the copyblogger theme and cannot get my random header to function. I inserted the code as follows in the header.php file as follows,

.jpg” width=”840” height=”187” alt=”image_alt_text” />

” title=””>
Anyone please help
Thanks in advance!!!

Reply

John September 10, 2007

Maybe you can help somehow Im missing something – followed the tutorial and am using the copyblogger theme and cannot get my random header to function. I inserted the code as follows in the header.php file as follows,

.jpg” width=”840” height=”187” alt=”image_alt_text” />

” title=””>
Anyone please help
Thanks in advance!!!

Reply

Jeff Friend September 12, 2007

Chris, what an easy-to-use and streamlined way to do this! I just implemented this where I would have used many many lines of Javascript to do the same this. Thank you for the great tip!

Reply

John September 25, 2007

This is my code… what am I doing wrong?

my div elements are labeled ‘logo1′, etc.

Reply

John September 25, 2007

how do i post my code here… last post eliminated it?

Reply

Me October 1, 2007

Hi Chris,

Do you have a bit more code for the CSS random image? -> (Chris P. at 10:15 am on Dec 21, 2006 )
Can’t seem to wrap my mind around it on how to do this with CSS.

Reply

passionepc October 2, 2007

Is possible use a code for blogspot header?

http://passionpc.blogspot.com/

Reply

Chris P. October 2, 2007

passion — As far as I know, you cannot insert enough code into a Blogspot template in order to pull off the rotating PHP script.

I’ve never actually worked with Blogspot, though, so I’m definitely not 100% sure.

Reply

Paul C October 11, 2007

Magic! I’ve just adapted this for the CSS of a simple website based on OpenRealty, and it works perfectly. Concise yet effective code – thank you!

Reply

claudia October 22, 2007

before i shoot myself for being so incredibly dense – WHERE OH WHERE is the active theme directory that i would upload my header pics into. i can NOT friggin find it and i feel like a total LOSER…

heeeeelp? please???

Reply

db October 26, 2007

Whats the default header image sizes for Cutline? Anyone?

Reply

Laura October 31, 2007

Thank for putting this out to the world. :D

I really was expecting more then one echo statement :D

Reply

afp November 5, 2007

thank you, it works great on my blog

Reply

Matt Presta November 6, 2007

Chris, thanks a lot for the great randomizer header code. It adds a lot to the site! By the way I noticed something odd when I first uploaded it into Cutline theme. I didn’t touch the header code but it shrank all my headers to 770 pixels wide. Kind of odd. I simply did a find/replace in the header code and switched anything that said 770 to 970 (like what you had originally written into Cutline) and this seemed to fix the problem fine. It’s just odd that I’m the only person reporting this. Anyhow everything seems to be working great. Thanks again.

Matt

Reply

Chris P. November 6, 2007

Matt — The original header images were 770 pixels wide. You are probably using an unofficial 3-column modification of the Cutline theme, which is likely why you needed your images to be 970px wide.

Of course, this is also likely why no one else has reported that as a problem :)

Reply

Tommy November 8, 2007

Hi Chris,

Thanks for this nice piece code. Is there any way to automate the random display of images instead of relying on refreshing only?

Reply

Boswell November 15, 2007

Chris, brilliant, many thanks!

Is there a way of having the home page with a static header and other pages with random headers?

Hope you can help….

Reply

Mike November 22, 2007

Hi guys,
Is there a specifiek place where you have to put the code in the header, because i doesnt seem to work.
Thx in advance

Reply

Chris P. November 23, 2007

Tommy — I think that’s something that can be achieved with JavaScript, but I’m not well-versed in that area, so I can’t help you there.

Boswell — You can use the built-in WordPress function is_home() to see if the current page is the home page, and then you can serve a particular image if that condition is true.

If is_home() evaluates to false, then serve the random header image code.

Mike — The code must be between your <body> tags in order to work.

Reply

Jeremy December 2, 2007

Hey Chris,

I just registered and created my first personal website yesterday using your Cutline theme. The random headers was a bonus that I discovered when I installed it. Very cool.

The issues I’m having are that I’m consistently getting the same image on pages 1 & 2 (archives & about). Random doesn’t mean always different, but that doesn’t seem random either. :)

Secondly, how can I extend the number of headers beyond 5? I have 7 to put in rotation, which could grow, but lack the css knowledge.

Thanks!

Reply

Chris P. December 2, 2007

Jeremy — Although I no longer oversee Cutline development and am not the architect of the 3-column interpretation of the theme, I believe your problem is that default installations do not include the random header image code. You need to download and install the script from the Cutline site itself in order to get the image randomization working.

For more information on how the image randomizer works, you can check out my latest post on the topic over at the Neoclassical Theme demo site.

If you still experience problems, I suggest switching to the Neoclassical Theme altogether—it’s newer, nicer, and more robust than Cutline.

Reply

Charles December 11, 2007

Hi Chris,

How can i assign urls to the images as to make them clickable? I would like to use the images as “banners” to direct visitors to other websites but I am not sure what to add to the code.

I appreciate your help.

Thanks.

Reply

Chris P. December 16, 2007

Charles — Unless you link all the images to the same place, you can’t accomplish this with the default theme setup. Originally, I considered a different PHP script to handle the rotating images, but I decided that explaining how it worked would be too complicated for the average user (who I target when I create base versions of themes).

Despite this, one of the many items on my to-do list is to create a separate, downloadable image rotator script that can handle different hyperlinks like you’ve described. Unfortunately, I have no idea about the ETA just yet, simply because I’ve got so much other stuff going on.

Reply

Jen December 18, 2007

Hi I have been trying to add a random image generator to my site for weeks. I do not know very much about web coding and its still not working? I would really appreciate it if you had any tips?

Kindest regards – Jen

Reply

Chris P. December 19, 2007

Jen — The random image rotator is not working on your site because it is written in PHP, and your site is being served in plain old HTML.

In order for the rotator to work properly, you’ll need PHP installed on your server (which it likely already is). In addition, your Web page files will need to have .php extensions (as opposed to .html), as this will alert the server to the fact that the page needs to be compiled in PHP before being served to your site’s visitors.

Reply

JasonMcIntyre December 22, 2007

Hi Chris
Thanks for the tip!
We just implemented this technique on our ASP.NET server.

Jason

Reply

chris j December 28, 2007

Hey Chris,

When I get ready to use my on jpg for images on Cutline, what’s the best method to assure they’re sized properly. I’m assuming I upload images at proper pixel width and height already? What’s the best application for doing this on a mac? Thanks

Reply

Jen December 28, 2007

Thanks Chris, my server did not support php!. I have managed to resolve the problem now – thanks very much for your help.

I have bookmarked your site & will recommend to friends – its a great resource. :)

Reply

kunal bhatia December 29, 2007

i loved the would be simplicity of your code, except that im a blogger.com user and for the love of my life i couldnt find a file hosting service that provides the same initial url for all the files. hence i used this code instead.

Reply

Chris P. December 29, 2007

chris j — You definitely want to have your images sized properly before uploading them to your server. Personally, I use Photoshop to accomplish this, but you can just as easily use GIMP, which is free.

Reply

chris j December 30, 2007

Chris P.
Thanks for the Gimp link
never used an x11 application before. cool.

Reply

Shane January 2, 2008

Hey Chris, how’s it going. I’m having the damndest time trying to get a background image to display on the footer, using your cutline theme. It’s a pjt I am working on for a friend, I’m trying to sell him on the idea of switching his website to WP. Anyways. Ive copied and pasted some of the other image elements from the theme in a mad attempt to get a background image to display in the footer, so the text will sit on top of the image in the footer. I am just not entirely sure how to code it in the footer stlyes section. And Do I need to add something to the footer php?
any bone you throw my way would help
Thanks shane

Reply

Adriaan January 6, 2008

Hey Chris, I think this feature is banging.

BUT. As stupid as this may sound, and I probably should’ve gotten this by now, but where do I put the code? In the ‘Edit CSS’ section? And do I use the zip file you had ready?

Thanks in advance

Reply

Adriaan January 7, 2008

I think I got it. But if I am right putting the codes on the ‘Edit CSS’ section, is it true I have to pay WP for it to work?

Reply

Carolyn January 12, 2008

Hi
Having some problems getting started…
1. how do i enter info into the “about” section of my blog?
2. under header.php, where exactly do I insert the code to go random?
3. also my images are in place and are sized at w 576 and h 200 so i need to change that in the code as well.
Thanks

Reply

Roy January 26, 2008

I must admit, I much prefer to use Flash rather use animated GIF’s ; )

Also, I don’t know why one would say that .jpg files are better than .gif files for this? Jpegs are a “lossy” compression but GIF’s can be exported in 100% quality.

If you don’t mind others playing with your bitmaps (although you can flatten the layers to one file).
PNG’s are what I’d use as you have so much more control over the images, not to mention you can use a transparent canvas to blend images to any background, which always looks kinda neat, although some files can get quite large which can slow page loading times!

Reply

Rahmi January 27, 2008

Hi Chris, love your Cutline.

Is it possible to add more header image files, without having to fiddle the 1, 5 code everytime?

Or can I change the 5 to 100, even though I don’t have 100 header images?

Thanks.

Reply

Nocom February 3, 2008

Hey Chris P. please insert in post above my php code link for WP themes header.php.TNX

Reply

Nicolas February 5, 2008

Is there anyway to not have the same image load twice? I’d like all of the images to be seen once before it starts again.

Reply

Boston Womens Rugby February 19, 2008

Tried this randomizer and it works brilliantly however in Firefox only
Cant get it to work in Windows.

Maybe I missed something in the comments section

Reply

Azhagiya Tamilmagan March 8, 2008

It’s really good idea. Anyway, I’m not using Wordpress currently, so I have to look for the other script language on this idea.

Reply

Clask March 9, 2008

Holy snap I used to have similar code on my old website! I’ve been looking for the code for at least two years now on how to do the random images — thanks a ton! I’m brushing up on my web design stuff and teaching myself some php to get back into my old coding stuff; this is immensely helpful! (you might have just bought a dinner for a starving college student)

Reply

Guida Facile March 16, 2008

Is possible insert random image, removing the following line in css:

#header {background:#DADADA url(‘../images/header_home.jpg’) no-repeat 10px 10px; padding:10px; height:200px; }

and using php?

Reply

Chris March 24, 2008

i have made a logo for my site and save it as a jpeg image but den i wan put it on the header of my site. i cant understand anything u wrote properly.m jus beginner . can u plz tell me in detail how to move about plz ???

Reply

Simon March 28, 2008

Hello there

Amatuer week sorry

This is the code in the theme I am using

background:url(images/header.jpg) no-repeat center;

Di I replace all of this with your code – or di I have to do some tweaking?

Reply

Matt April 10, 2008

I am in a similiar situation as above. The code with in the stylesheet for the current header image is:

#splash{float:center;width:800px;background:url(images/splash.gif)

I have tried all sorts of combos to get your random generator to work with no luck.

I am using wordpress 2.5 and the this theme:
http://themes.wordpress.net/columns/2-columns/4259/blue-box-01/

any ideas?

Reply

Alda April 13, 2008

Hi,

I love the rotating headers but can’t get them to work! I’ve cropped 12 different headers and uploaded them to my neoclassical-images folder, naming them header_1.jpg etcetera up to _12. I’ve then gone to the rotating_images.php file and changed this code:

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

… and, as you can see, put 12 in the code for the number of images. However, they’re not appearing – I get the stock photos rotating occasionally, and in between just blank frames, sometimes with image_alt_text on the bottom. What am I doing wrong??

Incidentally, the URL under which I’m tweaking my new look is http://newsite.aldasigmunds.com. Grateful for any help!

Reply

Alda April 13, 2008

Never mind – I found the answer. I was uploading to _images rather than _headers. Problem solved!

Reply

Enci April 23, 2008

I love this but I don’t know which page to put the code into. When I check the header.php page there is nothing there that looks even close to the code. I don’t want to delete something or mess up some codes.

Could you help me? I have the bamboo-10 theme that I’m working on. The link is http://www.californiatrails.org

Reply

richie April 25, 2008

Hello Chris,

I love your template – zen is good :-)

Loved the idea of rotating headers – i created 7 but the code you are saying that people should change – that code is not the same that is in my header.php Do i just replace it with the code you list above?

Here is my site http://voidAGE.com Its a web based proxy site

Thank you again for this template

Reply

Barb April 29, 2008

Hi -

I’m using your random header image in a wordpress site. It works great in Firefox, but in IE I do not see my images. Do you know why?

Here is a link.

Reply

Chris P. May 1, 2008

Barb — I’ve spotted an errant “2” in your HTML inside the #headimg div. Try removing that, and see if it doesn’t solve your visibility issues in IE.

Reply

Barb May 3, 2008

I got it. Thanks Chris P!

Reply

Charlie May 4, 2008

Quick Question… I Cant figure out the discrepancy between IE and Firefox with this awesome script of yours. Works fine in Firefox, but doesnt work in IE7. Take a look at my link above.

Any suggestions whats the problem here?

Reply

Charlie May 4, 2008

Oh, and I forgot to add… I tried to look at what you said was the cause of Barb’s problem, but I’m still a bit of an html/php newbie. Furthermore, I’m not using this script for a header, but rather just an image titled “main_#.jpg” thats on the main page.

Again… any help would be appreciated because I don’t have the web dev know-how to figure out the problem.

Reply

Barb May 4, 2008

Hi Charlie,

Fill in the width, height and alt tags with actual values. I did not put actual values and that caused it not to work in IE.

Change it to:

<img src="http://babybarth.com/images/main/main_.jpg" width="230" height="276" alt="Baby Pic" />

Barb

Reply

Charlie May 4, 2008

Thank you so much Barb!!!

Reply

Wendy May 14, 2008

You make it sound so simple. Unfortunately I am still at a loss.
Where would I place that code?
Header (header.php) or
header_with_text.php

And how would be able to get the text to show as well?? Without messing up the header??

Clueless as to how to even go about it

Reply

riverrun May 25, 2008

hola. Great themes. Just one rookie question… umm Exactly where should I paste the Random Images Code in the theme editor?

thanks!

Reply

Chris P. June 4, 2008

Wendy — Your theme is obviously a little different, and because I’m not familiar with it, I can’t say for sure. I’m going to assume that you would add the necessary code to your header.php file, but I am not certain that this is correct in your case.

riverrun — Although themes differ widely in how they handle this sort of thing, you should be able to place the code in your header.php file in order to get the results you want.

Reply

wendy June 4, 2008

Figured it out already thanks Used the cutline to edit some images below the header and works like a charm

Thanks though for staying in touch and letting me know

Appreciated muchly

Reply

Brianan June 9, 2008

Hi Chris,

Rotating Header Image is great, I have yet install & try it.

However, it will be even great and benefit all bloggers, if we could link the header to any respective ads…. or if you have done it, please advice or any blogger read this, please do email me at brianATbriananan.com

Tks, Brian
http://briananan.com

Reply

manvi June 13, 2008

that was so easy thanks for that.
how do i change the title text that shows the name and description of blog?

Reply

salim June 30, 2008

hi i wanted to randomise images, but attatch each image with a different weblink. Basically, I am trying to randomise my ads on the page and would liek to know how to do so.

Thanks.

Reply

Declan P July 16, 2008

Left a message earlier, got no resolution.

My site works in Firefox not in IE have tried to figure it out from your commentary to no avail, I use theme Bluebox and put the randomizer code in header.php

As they say in German Hilfe!!!

Reply

heather July 22, 2008

thanks so much for the code + directions, but i just can’t seem to make the images show.

i’m sure i’m doing some dingy thing- would you mind taking a peek?

http://www.cameragirl.com/sample.php

thanks!

Reply

iChaitanya August 1, 2008

This works like a charm!

Thanks a lot!! :)

Reply

J.R. Jackson September 6, 2008

I’m going to put this on my site ASAP.

Thanks

J.R.

Reply

Ricardo September 11, 2008

For those who are wondering if it can be used on Blogger.com, the answer is no. It is not allowed to insert PHP code on Blogger. I think it should be allowed.

I would say to you to create a Wordpress blog because they allow PHP code, but as they charge you if you want change the CSS code… I really wouldn’t advise you to use their services.

Reply

Sudipto Sarkar October 10, 2008

I got another post regarding this. It can be used to add image header to any wordpress theme. You won’t regret reading it.

Reply

Cas Ruffin November 10, 2008

Hi Chris,

We entered the random header images in our site, and it works!!!…Sorta. It doesn’t rotate when I press reload, but it does change if I check on another browser. Sooo the images are static for one session, but it rotates on different browsers and different sessions. I hope that makes sense. Any help would be appreciated. Thank you.

Reply

Cas Ruffin November 10, 2008

Correction. I think it changes if you reload after laying dormant for awhile. But it’s not instant like we’d like it.

Reply

Barb November 10, 2008

Hi Cas — Do you have a link you can share so we can take a look at the code?

Reply

Cas Ruffin November 10, 2008
Rolling November 14, 2008

I came here today to THANK you, n tell you that ur design has givn a new lease of life to my blog (and with the way it looks on the page n the attn it gets, to my writing too ;) :)

Reply

Prhime November 27, 2008

is there a way to remove the black bar on the top of each image? i tried tweaking the code and the css sheet but didn’t seem to change anything.

Great work!

Reply

Kitty November 28, 2008

The great solution is just what I’m looking for, but I tried several times and failed T.T

I am using WP2.5.1 and GenkiTheme fixed version.

I replaced the following code in style sheet
url(images/header.jpg);
with
url(images/header_.jpg);

Then the header won’t show up…
I wonder what I’ve got wrong there…Thanks a lot.

Reply

Kitty November 28, 2008

Correction:

I replaced the following code in style sheet
url(images/header.jpg);
with
url(images/header_.jpg);

Reply

Kitty November 28, 2008

I give it up…the random code was replaced automatically… Sorry

Reply

SolidBlue December 5, 2008

Does anyone know how to use this code when editing a tumblr blog? I have the photos saved in photobucket, but throwing in the randomizing code results in a stock image saying the picture has been moved or deleted.

Can anyone post what changes need to be made to use the randomizer on tumblr? Thanks!

Reply

Nathan Hangen December 11, 2008

Great tip, been looking for an easy way to do this.

Reply

Marcelo Emmerich December 16, 2008

I used the bloginfo structure to avoid having the path to the images hardcoded. My code now looks like this (with the latest cutline 3 column theme)

<img src=”/images/header_.jpg”
width=”970″ height=”140″ alt=”” />

Marcelo

Reply

tsquez December 17, 2008

Just wanted to say this is so simple and it works like a charm. I like this better than using a plugin. Very nice work and thank you, keep it up.

Reply

Brent December 31, 2008

Awesome! You guys rock!

Question: what if the image source is not in a php file, rather it is in the style.css file? will this code still work? I tried, but no go. The original code looks like:

#header {
background: url(img/top.jpg) #FFFFFF no-repeat bottom;
border: #FFCC99 0px solid;
height: 183px;
margin: 0 auto;
padding: 0;
width: 760px;

I updated it with:
#header {
background: url(img/top.jpg”) #FFFFFF no-repeat bottom;
border: #FFCC99 0px solid;
height: 183px;
margin: 0 auto;
padding: 0;
width: 760px;

any help would be appreciated! Thanks!

Reply

Adam Schwartz January 8, 2009

Great advice – I’ve got it working on this site (not on the index, but on all the other pages). Brilliant and simple, thanks!

Reply

Hemal January 13, 2009

Hey hi… please can anyone help me on how to get the logo of my website on the header.

This is my blog on WP. What i want to do is put my logo on the left of the title. Can anyone help me out?

Reply

Barb January 14, 2009

Hi -

I’ve used this twice now and love it!! My question is — is there a way to set a timing value so that the image changes automatically every so many seconds?

Thanks,
Barb

Reply

Edwin January 20, 2009

I’m using the default headers of Pressrow but im looking for alternatives. Its hard to find headers with the exact size Pressrow needs to look good.

Reply

Hutek.info January 21, 2009

thanks so much, very simple and very useful

Reply

Slavco January 30, 2009

thank you for this tutorial, it’s pretty much what i’ve been looking for, HOWEVER do you think that yuo could spice it up ang make it, not random, but date specific, as in on 01.01.2009 one image on 02.01.2009 another image and so on?

Reply

curt February 16, 2009

WHERE DO WE ADD THIS CODE AT???

Reply

w. February 25, 2009

Hi Chris, I just installed the Press Row theme on my blog (dubdew.com) and I love it! Thanks so much.

Regarding the random header script, I understand that Press Row uses background images in CSS, which makes it more complicated to implement the random header images. And while I read through the gazillion earlier comments before mine and your very detailed replies, I’m afraid I still don’t really get what to do! (I think you were explaining it to Klaus – Dec 21, 2006.) I would be SO grateful if you could email me on the provided address to lend a hand. I’ve also got a couple of other questions regarding how to make a couple of minor tweaks to the Press Row theme (generally revolving around the header though), so I’d really appreciate your help.

Thanks so much in advance!

w.

Reply

HeriNXI March 3, 2009

thanks, this is what i’m looking for :)

Reply

Maan March 14, 2009

Its really an awesome post. i had been looking for this kind of tutorial from some days and finally got around it. Hats off for you buddy.

Reply

Jack March 19, 2009

Who would have guessed that such trivial details would lead to such great benefit. I guess it’s always the small things that count.

Reply

Brandon March 21, 2009

Hi Chris, I am havig a bit of trouble with implementing this awesomeness. I used Sugarrae’s tutorial to figure out how to add custom images to my Thesis site (http://www.sugarrae.com/thesis-hooks-dummies-tutorial/#change-header) but when I put in the

I get alt text. I have this piece of code in my custom_functions.php file.

/* Custom Header Image */
function add_header_image () {
echo “
<img src=\”http://sonicpeanut.com/tester/wp-content/themes/thesis/custom/images/header_.jpg\” alt=\”Your Blog Title\” height=\”215\” width=\”940\” style=\”border:0px\” />
“;
}
add_action(‘thesis_hook_after_title’, ‘add_header_image’);

My files are named header_1 – header _7 and they are in that images folder. When I take out the randomizer code it has no problem showing a static image. What am I missing? I feel like its something simple. Thanks for your help!

Reply

Brandon March 21, 2009

aw man, for some reason my code didn’t show up right. I dont know how to make code show up in these comments things. Not that the “echo rand” thing is in the place it should be like you described.

Reply

Francisco April 3, 2009

Hi, The Random Images code is Amazing
I did the random in my web page
But just work in Firefox and doesnt work in Explorer do you have any idea why?

Thanks for your help

Reply

Barb April 3, 2009

Hi Francisco

Did you check this from the 5/4/2008 post above?

Fill in the width, height and alt tags with actual values. I did not put actual values and that caused it not to work in IE.

Reply

Francisco April 3, 2009

Barb.

Thanks for your help, I have tried with a lot of codes but this is actually the most simple and best of all.

Reply

milad April 8, 2009

how can i use this code on thesis?

Where do I put it?
What in the code needs to be changed for my particular pics?

Reply

mattyoungmark April 25, 2009

Hi! I’ve been looking for a way to randomize a graphic on my header, but can’t seem to make this work! (I’m kinda new.) The image I’m trying to randomize is caption.png in the following bit of code:

.logo h2{
float:left;text-indent:-100000px;background:url(images/caption.png) no-repeat left top;width:327px;height:94px;margin:10px 0 0 0px;
}

I’ve tried combining this with your code in various ways with no success! Which part of your code should I paste over which part of my code? I’m fairly certain that I’ve got the paths and my random images set up correctly.

Thanks!

Reply

Mike May 23, 2009

two or three

a) is there a limit to the number of headers that you can rotate with this code i.e. I’m thinking of doing 100

b) is there a way to modify the code so that the header will change if you click on it rather than having to refresh the page?

c) are there any special concerns I should be aware of if trying to have so many rotating headers? (i.e. I have no basically zero website experience or expertise so don’t know if I might be running into a huge problem with this objective)

Reply

Fernando Cruzalegui May 27, 2009

I can’t do it. I do not have any *.php, all I have is a custom header option and no place to copy and paste this code. Any help?

Reply

Fernando Cruzalegui May 27, 2009

I just can select one image and when I go to customize css then I’m asked to buy something… is that what I need?

Reply

Barb May 28, 2009

Fernando -

It looks like you are trying to implement this on wordpress.com. Is that correct? I have not used Wordpress.com and from the little reading I have done on their site I’m not convinced you could add this code to their templates. I would suggest that you post something on the forums at wordpress.com and give them a link to this page and see if they can tell you where you need to go to add this code.

HTH,
Barb

Reply

Fernando Cruzalegui May 28, 2009

Thank you Barb, thank you so very much. I feel a bit embarrased. Thank you again.

Reply

Barb May 28, 2009

No problem Fernando. If install Wordpress on your own private hosting account you can make any modification you want to Wordpress (including this one). If you use Wordpress.com you are limited by their rules.

Reply

AL June 20, 2009

Can I use this simple header method and use the galleria plug-in? I’m using the f8 lite wordpress theme and want to use galleria. However, I really want a rotating header (even if it only changes when the page is refreshed).

Thanks!
AL

Reply

AlphabetSoup 101 July 13, 2009

wow, you site looks clean and cool. Very slick design. Love it!

Reply

Justine July 16, 2009

Dear Chris,

I Have just launched a conference website featuring your neat Neoclassical design. My problem is this – the client wants to have the header scroll regularly (instead of when you click on a different page or post). The reason is that each header highlights a different speaker or trainer and they want all to obtain some coverage. Is there anything that can be done to speed up the change? Say every 6 – 8 seconds…. My designer is fed up with this job and is giving me the impression that this is just not possible without a massive overhaul. Can you illuminate?

Reply

Michael August 17, 2009

I’m wanting to implement this simple image rotator in Thesis to place a large image (like what is in Neoclassical) under the header (where I’ve put my logo).

This is the code I’ve written (not really understanding it) and I’m getting a syntax error for the function. Please help!

/* Rotating Photos Below Header */
function add_rotating_photo () {
<img src=”/custom/images/header_.jpg”
width=”865″ height=”199″ alt=”some random photos of our workshops” style=\”border:0px\” />
}
add_action(‘thesis_hook_after_header’, ‘add_rotating_photo’);

Reply

Sutton September 3, 2009

Chris,
I like your PressRow template, but I’d like to change the header image. (No offense.) How do I do that? It almost seems like it should be possible in the appearance tab, since there is a choice for “Header Image and Appearance,” but all i see are choices for colors, not for the image itself.

I’m no expert, but I’ve mucked around in the theme editor before, so I can follow basic instructions.

Reply

Chris September 14, 2009

Hello Chris,

I have tried to use the code for the header image rotator in your PressRow theme. And it at first it appeared that it was working. But the header does not appear in Internet Explorer. FF, Chrome, Safari and Opera dislpay it without any problems. Have you (or anybody outhere) got any clue what goes wrong?

Thx,
Chris

P.S. @ Sutton: you can change the header image in style.css on lines 104 till 108.

Reply

Rhythm December 12, 2009

I used your neoclassical theme for my new piano website http://pianotreasure.com, made a few font/color changes, added 8 images for the rotating image php, and it looks beautiful…check it out.

One small problem: occasionally, refreshing shows no header image at all, just a one-line message saying other images are available if you refresh the page. Is there a way to avoid this? I don’t want browsers to see an empty header, even one time. Most won’t bother refreshing, they’ll just go somewhere else.

Also, is there a way to make all the images rotate while you’re viewing the site, without refreshing? Like a flash slide show of all your stored images that keeps changing while you read whatever page/post you’re on?

Reply

Rob McCance December 26, 2009

If I could come up with ONE professional looking header, then maybe I could think about adding another, then a rotator.

:)

Reply

Philip January 17, 2010

I am trying to get the random image code to work and don’t seem to have any luck. I have changed the extension from html to php and thus put the code you provide in the same location of where my single header image is located. I do have all five images I have chosen to rotate put in the same folder of my site folder. I don’t know what the problem is. I am using dreamweaver to build my site and when I put your code in, dreamweaver takes out header_1 and leaves a blank location from the design perspective and thus leaving it blank. Help me please!; Thanks a million!

Reply

Philip January 17, 2010

One more thing: what do you suggest would be my “image_path_folder?” I added the dimensions of my header images and finally do not have a blank location, but I still have what looks like a link that is down in the location of where the header would exist. In other words, where the header image would exist does have a div outline, but still the image doesn’t show up. Thanks in advance

Reply

faris vio January 19, 2010

I really want a rotating header (even if it only changes when the page is refreshed).
Thanks!AL

Reply

esnouffer March 4, 2010

Hi CPearson
I just bought Thesis – I have have never had so much trouble! The basics are all there – but geez – I am not a newbie but not a coder either. I am the in-between lot – so probably your most difficult type.
All I want to to do is upload one static image to FILL the header banner and after 4 evenings of troving the web for answers – I am just about to throw in the towel. Also, I can’t have rotating images on my header unless I have a 1 or 2 column website? (I don’t really even want rotating but it seems to be the only answer for Thesis IF I want an image on my header). Disgruntled and wondering why I shelled out $87 dollars as I seem to be no better off. Just check out my website – it use to be easier (at blogger no less!)
Can you help me? I think a lot of people actually do use my website for information – but not right now – that’s certain.

esnouffer

Reply

Adam McClure April 27, 2010

Awesome implementation Chris! How would I modify the code to make the pictures rotate without refreshing the page?

Reply

Chris Pearson April 27, 2010

Adam, you’d have to use JavaScript to do that. Basically, it would be totally different from the structure I’ve given you here, and you should search for “JavaScript image rotator” if you want more accurate results.

Reply

Durkin June 2, 2010

Useful peice of code. I’m going to use it to display some random products in the header of my website once I’ve done the re-build :)

Reply

Christopher Robin July 8, 2010

Lovely script… but it doesn’t seem to display in Internet Explorer! (What a shocker right?)

Any thoughts would be lovely! I’m stumped!

Reply

becca July 31, 2010

Will this work in Blogger ?
I don’t know if it’s PHP based or HTML based…….is there a way I can figure this out?

Reply

furqan August 13, 2010

im stuck in applying link on random images in php. its getting on my nerves day by day but i did not find any solution online. would u plz help me on the code below plz
<?php
//an array of 4 images in the same direcory as the script
$images = array("bag.jpeg", "diaries.jpeg","pcap.jpeg", "pen.jpeg", "trouser.jpeg","tshirt.jpeg");

//generate a random number
srand((double)microtime()*1000000);

$randomno = (rand()%4);
//display image
echo ("”);
?>
plz plz plz plz help me

Reply

Courtney August 17, 2010

Holy cow this helped me a lot! I am creating a fanlisting for a tv show and I wanted the header image to change each time the page was refreshed to show all the different characters and this helped TONS! =) Thank you so much! If you’d like to see where I used the code, it’s here.

Reply

Pete September 4, 2010

For us super thick and novice Wordpress’ers, I just need the code and tell me where to put it. Talk to me like a second grade student though.

1. Find this string in your header.php, starting and ending with__________ and replace it with the following code.

2. Copy and past the below code in the areas starting and ending above.

Please help, headers not rotating.

Reply

Nickolove October 25, 2010

I really like the idea of a dynamic header and I have the Thesis theme but I cannot seem to get the dynamic header to work using the instructions given here. I’m just getting an error message.

Also, you said:

“By default, the Thesis multimedia box will randomly rotate images that you place in your /rotator folder, thus making this an utterly brainless process.”

However, the multimedia box does not appear as a header and I’ve had no success in re-positioning the multimedia box.

Suggestions please.

Reply

Nam Tien March 25, 2011

Thanks.
Yes I also like a dynamic website rather.
My web uses Wordpress template. I will try to change to Header code as guided above.

Reply

Ottawa April 15, 2011

What I am looking to do is similar. I am looking to have a static page as well as the blog appear on the main page of my wordpress site. Right now going to the settings section will only allow me to do one or the other. any feedback would be appreciated.

Reply

Chris Pearson April 17, 2011

Ottawa, to accomplish what you’re trying to do, you’ll need to “hack” WordPress a bit. This is most easily accomplished with a framework like the Thesis Theme (which contains many hooks that can be used to “plug in” blog content), but it can be done in an extremely hack-ish way by filtering the_content as well.

Because of potential conflicts with plugins, I don’t recommend filtering the_content, so we’ll only talk about the hook method here.

With the hook method, essentially what you’re going to do is run a new WordPress post query to generate your “blog.” One of my old articles contains some code examples for how to generate a WordPress query, and I also recommend the WordPress Codex page on using query_posts.

This concept, as well as the code it requires, is an intermediate to advanced concept with WordPress. If you don’t have much experience with PHP or WordPress, I recommend hiring a developer for a task like this.

Reply

James Smith June 7, 2011

Thank you so so much I’ve tested it and have it working! So AWESOME!

Just want to say a huge thank you—this is so cool. I will post what I've done with it asap.

Thank you again Chris.

Reply

Yesil Elma June 14, 2011

Hey. I want to inquire one thing…is this a wordpress web site as we are planning to be going across to WP. In addition did you make this theme by yourself? With thanks.

Reply

Chris Pearson June 14, 2011

Yesil, this site is indeed a WordPress site, and it runs on the Thesis Theme (with a custom design by me).

Reply

Cherub October 12, 2011

Hey Chris,

I am trying to get this code to work in Thesis 1.8.2 but nothing is happening. When I put it in Custom_Functions.php I get an error and have to go back and delete it. When I put it in custom.css nothing happens. I put in my path to images in (which I am not sure if its correct) and nothing is working.

Any help will be greatly appreciated!

Reply

Chris Pearson October 13, 2011

Cherub, simply putting this code inside your custom_functions.php file is insufficient. The code must be placed inside a function and then hooked into place (aka, where you want your images to display) using Thesis hooks.

If you need additional help with this, be sure to stop by the Thesis forums for expert assistance!

Reply

steph October 23, 2011

hi chris,

i’m using this in a plain ole php page, no wordpress. it works great (hats off to you!!!) in opera, but not at all in IE8. The images don’t load.

any ideas?
thanks!
steph

Reply

karl November 5, 2011

Thanks – Been looking for something similar to randomly show my banners. It worked fine for me.

Reply

Stathis January 21, 2012

Hi Chris, I am using this:

<img src="http://windsorpanorama.com/public_html/templates/DefaultV2/images/random/City_.jpg" width="image_width" height="image_height" alt="image_alt_text" /> %%tpl_top_banner%%

in my .tpl file and the code is not working.

The four file names are City_1.jpg……City_4.jpg. Any suggestions?

Thanks

Reply

matt May 2, 2012

Awesome post! Thanks a bunch :)

Reply

Lou August 9, 2012

Thank you for this tip. It was very useful.

Reply

Harish September 21, 2012

great help for me really!
thanks :)

Reply

Computer Repair June 6, 2013

Love the tips! Going to share with fellow coders and beginner web builders including my son… Thanks for making it simple and easy to follow.

Reply

Jasper February 17, 2014

Well guys, love this but I just can’t get it to work… Would really appreciate your help!!

Reply

Hoot and/or Holler

Previous post:

Next post: