I am thoroughly enjoying working with WordPress. Since changing my blogging software I’ve not only found that I have more control over my weblog but I’ve also learnt a little PHP/MySQL too which is coming in handy for other projects. Knowing a little PHP (all my other scripting experience has been with UesrTalk) has allowed me to tweak this weblog’s templates and functionality. Yesterday I figured out that I can have a random weblog banner image, an excuse to dust off some of my older iPhoto pics. Here’s a how-to for anyone else who’d like to do the same:
1. WordPress stores PHP template files used to make your weblog’s HTML pages in the /wp-content/themes/ directory. I use a modified version of the default theme so my templates files are in /wp-content/themes/default/ and the images used by the template are in /wp-content/themes/default/images/. The template that’s used to create the header of your weblog is called simply header.php.
2. Opening the header.php file in a text editor shows that the section that dictates the header graphic is:
#header { background: url("<?php bloginfo ('stylesheet_directory'); ?>/images/kubrickheader.jpg") no-repeat bottom center; }
3. Opening the kubrickheader.jpg image in Photoshop shows me that I can use any rectangular image that’s 720×182 pixels in place of the default blue box that comes with my chosen template.
4. I selected a range of images from my iPhoto collection that I’d like to use as weblog banner images and cropped them to the correct size saving them with incremental file names e.g. personalbanner1.jpg, personalbanner2.jpg, personalbanner3.jpg, etc. The trick is to save them with the same filename except for an incremental number suffix. You’ll use that number to randomly choose an image later.
5. I uploaded my series of custom banner images, 9 in total, into the WordPress theme image directory of my weblog and changed the header.php template to use the new image series:
#header {background: url ("<?php bloginfo ('stylesheet_directory'); ?>/images/personalheader1.jpg") no-repeat bottom center; }
6. So far so good but the change to the header.php template only allowed me to use the first of my custom banner images. I wanted to show a random banner image every time any of my weblog pages is viewed. By adding a bit of custom PHP, in this case a function that returns a random number, the banner image suffix is randomly chosen with every page load. Job done!
#header { background: url ("<?php bloginfo ('stylesheet_directory'); ?>/images/personalheader<?php echo rand (1,9); ?>.jpg") no-repeat bottom center; }
The rand (1,9) function generates a random number between 1 and 9. Obviously you must change the last number to reflect the number of banner images you have created. We need to add echo rand (1,9) to make sure that the random number is added to the HTML page. By converntion, each instruction in PHP must end with a semi-colon and finally we enclose the instruction in a PHP tag that tells your web server to interpret everything between the tags as PHP code.
And that’s it! Learnt a little bit about how WordPress makes weblog pages and learnt a little bit of PHP! Have fun hacking your own WordPress weblog.
Cool. There’s an easier way, though… 😉 I use the “Automatic Rotator” script, which automatically picks an image from a folder, and spits it out on request – so you can just set the background of a div to the php file itself, and it will Do The Right Thing… Also works when used in static HTML (as long as it can “see” the php file, which will execute on its own and return an image)
http://automaticlabs.com/products/rotator/
Thanks D’Arcy, I’ll check out the Automatic Rotator script. I wanted to do my own little hack though just so that I could get a slight insight into some of the (easier) inside workings of WP, plus I’m slowly teaching myself PHP 🙂 But that’s what I love about the web and weblogs, there are always so many ways to accomplish the same or similar tasks.
Thanks! I think the PHP way is easier for my needs.
Very cool method for images!
I have tried without success to have a flash animation at the same place the header image is located.
Any suggestion?
Thank you.
Hi Ronaldo, sorry, I can’t help you with Flash. However I’m sure the answer would involve modifying the header.php template file replacing the header image with a Flash file instead.
Thanks for this. There is a plugin apparently but it may not be uptodate and compatible with recent versions of wordpress. The only thing I would add is that if your theme uses a seperate .css style sheet it will be necessary to tell your server to parse for php inside the .css file with a .htaccess file containing
AddType application/x-httpd-php .css
assuming a linux server.
Ronaldo,
I’m sure this is 6 months too late, but I wanted to respond to your inquiry about randomizing flash banners. I tried David’s code to call Flash banners and it worked perfectly. This is the snippet of code I used:
…and this is how I used it:
.swf” width=”600″ height=”125″>
.swf” />
I hope this helps.
Thanks for this but i tried and it didn’t work.
Can u help me?