WordPress Themes Blog Oh! Blog

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn0
Random Header Tutorial

You are using a neat WordPress theme with an image header but want to have multiple images that you can randomize on your blog? Here is how to go about it…

STEP 1 – Editing Images

Make all your header images that you want to randomize of the same size (dimensions) and format. For example, if you have GIF images then all should be of the same extension. I hope you get the point.

STEP 2 – Naming Images

All the names of your header images should follow a similar pattern. Here is an example we will use :-

blogtop-1.gif
blogtop-2.gif
blogtop-3.gif
blogtop-4.gif

We do this because when writing the code, we will try to randomize the number part (logically, randomization is done by numbers in any programming language) and keep the text part similar for all.

STEP 3 – Moving the Image Files

Move all your header image files to the “images” folder in your theme folder. Most probably, if you are using a theme that uses images, then it should have an “images” sub-folder. If not, make one and put all your header images in there.

STEP 4 – Randomizing the Images

Open your header.php file from the theme folder in a text editor. Put this code just below the tag.



The rand() function actually picks up a random number from the number of items you have specified. We are going to use this function to randomize and pick 1 item from the 4 header images in the “images” folder. So, if you have more than four images, just change 4 to your number.

STEP 5 – Using the Randomization in the Actual Header

This part can be a bit tricky as it will require you to find the code where your theme calls the actual header image (the one being used in the default theme). Usually, most of the professional theme designers define the header image through the CSS background property of the header DIV. So, you will have to get rid of that technique and use the old school HTML technique to call the image in the header DIV or the place where you want your header image to be located.

Ideally, the following piece of code will pull your header images in your theme :-


header

So, basically this code will insert the value of the variable $header_image after “blogtop-” and this will pull out the image from the “images” folder. All you have to do is figure out where exactly to place this img code in your theme header.

This concludes the random header tutorial and if you have questions, just ask here in the comments.

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn0
  1. Tina left a comment on March 29, 2016 at 12:17 am |

    HGIT is the professional manufacturer for two axis foam sealing machine, this machine can be used in Filter, cabinet, lighting, battery, etc.
    German Beckhoff dispensing operation system. Operation interface is indicated in both Chinese and English; if there is any need, other languages can be added. The system boasts functions such as false operation reminding, idiot-proof protection, overpressure alarming, temperature alarming and low material level reminding.
    When operating the human-machine interface, the operator only needs to enter commands in the interface such as “Confirm” and “Start” for loading and unloading of workpieces, and then the equipment can automatically complete the required function operations.
    The control system is CNC2013 control system independently researched and developed by the Company. It can control multiple axes simultaneously and control dispensing speed and glue flow, with multi-formula storage function, pressure alarming function, etc. which makes it safer and user-friendly.
    The dispensing valve and mixer match with each other well, easy to operate and convenient for maintenance.
    Two components metering pump can choose Domestic pump or Germany pump according to customer demand
    http://www.hgcx.cn/en/index.php

  2. Or Weissler left a comment on July 24, 2013 at 12:32 am |

    A great job, as well as invaluable, thanks.

    • western left a comment on September 9, 2013 at 8:56 pm |

      People visit forums looking for answers. They’ll usually find a forum post because they’ve done a search for a specific question, and are looking for an answer. If you try to market to them, they’ll just ignore it and move on. Give value. Answer questions. Contribute to the community.

  3. Eva Rutgers left a comment on June 19, 2013 at 8:03 pm |

    Wow, awesome blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your site is magnificent, as well as the content!. Thanks For Your article about How to Make Random Header Images? .

  4. Brock Rothmiller left a comment on May 19, 2013 at 12:51 pm |

    Wow, incredible blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your web site is magnificent, as well as the content!. Thanks For Your article about Blog Oh Blog » Blog Archive » How to Make Random Header Images? .

  5. baby shower gifts left a comment on April 9, 2013 at 9:43 pm |

    He who has four and spends five, has no need of a purse. – Portuguese Proverb

  6. Dallas Cairns left a comment on August 4, 2012 at 2:03 am |

    Oh my goodness! an amazing article dude. Thanks However I’m experiencing issue with ur rss . Don’t know why Unable to subscribe to it. Is there anybody getting identical rss drawback? Anybody who knows kindly respond. Thnkx

  7. Tim left a comment on May 18, 2012 at 11:38 am |

    Nice! I started using the random header code on my site, but I was able to fine tune it a little thanks to your post, im pretty stoked about this!

  8. aandrea left a comment on December 21, 2011 at 1:03 am |

    paso 1 ,paso 2 ,paso 3 ,,,ok ahora el paso 4 cree un archivo en eclipse con el nombre header.php y pegue el codigo $header_image = rand(1,4);
    ?> despues en el lugar de la cabecera
    por supuesto que el div esta mal pero donde ………….. gracias

  9. andreina left a comment on December 21, 2011 at 12:00 am |

    cual seria el codigo para una web con html 5 ,,,,,,,,por q no encontre header.php
    y gracias

  10. Arama Motoru Optimizasyonu left a comment on October 25, 2011 at 12:04 pm |

    Perfect tutorial , i am glad to see this post . Now i am very good at making random header images. Thanks

  11. Dan left a comment on October 22, 2011 at 10:31 am |

    Fantastic. Using on my site. Thank you for the great code.

  12. yasam koçu left a comment on May 26, 2011 at 3:31 am |

    Nice tutorial, Jai. BTW, currently I am using Silver Light theme. How do I insert or change the header file so I can replace the title to an image of my choice? Thanks

  13. ö?renci koçu left a comment on May 26, 2011 at 3:30 am |

    Great tips,very useful information for bloggers.

  14. driver left a comment on April 22, 2011 at 4:33 am |

    Great tips! Simple but informative. It is no doubt that rotate header can impress reader.
    Thanks

  15. alt?n çilek form seti left a comment on January 27, 2011 at 2:55 am |

    Nice tutorial, Jai. BTW, currently I am using Silver Light theme. How do I insert or change the header file so I can replace the title to an image of my choice? Thanks

  16. Reklam Ajans? left a comment on December 23, 2010 at 9:02 pm |

    Good tutorial thank you so much..

  17. Webs Asia left a comment on November 30, 2010 at 10:12 am |

    Great tips! Simple but informative. It is no doubt that rotate header can impress reader.
    Thanks

  18. messi left a comment on August 14, 2010 at 4:17 pm |

    i would also like to know where to put that code in my freshy2 header

    i would appreciate any help

  19. jose left a comment on June 6, 2010 at 4:14 pm |

    Hi,
    thanks for this tip. i have just one doubt:
    i’m using this, but to show some random images in my sidebar, so i need to show instead of one, threee images at the same time.
    i try changing rand(3,29), guessing that would make three images will be shown, but no. also, i need the three images shown not to be the same. is there a way to get this without using a plugin?
    thanks!

  20. abhi left a comment on April 10, 2010 at 8:07 am |

    cery good article,carry onur work.best wishes for ur job.

  21. Kabir left a comment on December 12, 2009 at 12:46 pm |

    very useful information , buy why don’t you give answer of the questions of the reader here to show for all users in you site. BtW great tutorials

  22. aga left a comment on October 27, 2009 at 8:43 am |

    where exactly I should place the first php code – I understand that it’s in header, but where??

  23. Arama Motoru Optimizasyonu left a comment on February 11, 2009 at 8:57 pm |

    Great tips,very useful information for bloggers.

  24. SostyPasha left a comment on February 3, 2009 at 6:30 am |

    Thanx so much 🙂
    very useful tut

  25. seo left a comment on October 13, 2008 at 10:08 pm |

    That’s a great, easy and useful.
    thanks so much.

  26. URCHIN7PC left a comment on September 6, 2008 at 6:51 pm |

    good!!!!!!!

  27. Ahmar left a comment on August 31, 2008 at 3:14 pm |

    This tutorial is cool and i wanna use it for:
    http://www.deskbeauty.com

  28. thezzbiszz left a comment on August 15, 2008 at 12:40 pm |

    Hello, my web site using freshy theme. And I can’t do the Step 5.
    I have to put that code on the header.php
    Or I have to find that code in the header.php and change it?
    And what do I do with the css file?

  29. iCalvyn left a comment on May 24, 2008 at 5:15 am |

    Great tips, I might create few header and let it randomly load, let my reader feel not so bored after view my blog…

    I also might create season header, like new year, or xmas… and let it random load…

  30. toplist left a comment on May 21, 2008 at 4:23 am |

    thats very useful, thanks so much.

  31. Souvik Banerjee left a comment on May 19, 2008 at 8:00 am |

    I am not able to under stand the 5th stage. you can visit my site to see the theme I am using.

  32. ari syarifudin left a comment on May 10, 2008 at 7:40 pm |

    Good article, Thanks. I will take a minute for doing in my blog. Uoppps, thanks a lot. Great jobs

  33. Coupons left a comment on May 6, 2008 at 1:36 am |

    Nice tutorial. I used a similar method on a vBulletin forum a while back, with great results.

  34. bissell left a comment on May 5, 2008 at 11:29 am |

    Wow, that’s a great idea. I should be able to do that by myself, although I’m a noob 🙂 But I like how that looks like, definitely.

  35. Marineguyfla left a comment on May 4, 2008 at 9:31 am |

    Pretty Simple, but useful!
    Thanks

  36. papajoneh left a comment on May 3, 2008 at 8:08 pm |

    Thanks for this code. Been reading your blog post for quite some time now, silently.. and I have to say, No regret. Thanks once again, Jai 😉

  37. faze one left a comment on May 3, 2008 at 11:51 am |

    i am using a script that does this, and i looked for months before i found it….I call my pap code in the css itself though….

  38. dumu left a comment on May 3, 2008 at 10:36 am |

    It’s a great job, easy and useful, thks.

  39. Joshua Clanton – Design for the WEB left a comment on May 3, 2008 at 8:54 am |

    Great little tutorial here. I knew that it had to be pretty easy, but I hadn’t had a reason to use random images yet. Thanks for the info!

  40. games left a comment on May 3, 2008 at 8:27 am |

    good tutorial, useful for me.
    thxs

  41. Cosmoslayer left a comment on May 3, 2008 at 1:28 am |

    Nice tutorial, Jai. BTW, currently I am using Silver Light theme. How do I insert or change the header file so I can replace the title to an image of my choice? Thanks

  42. Booto left a comment on May 2, 2008 at 1:04 pm |

    Very useful.I can make some header images by myself

Leave a Comment

Your email address will not be published. Required fields are marked *

What Others Say

BannerJai was awesome to work with. A port of an ASPX/HTML site to Wordpress went seamlessly, and his recreation of our look and feel were fantastic - Kevin Webster

BannerJai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles

  •   Let’s Talk

    "Thank you for visiting my website! In order to start a project with me, please send me information on your project so I can figure out how best to help you."

    "After your initial contact, I’ll schedule a quick one-on-one session via Skype to review the project and get to know you."
     Request a Quote
  Have Questions?   Hire Me

Send Me Your Questions

Tell Me About Your Project