How to..., WordPress

How to create a random banner in WordPress

Update:
At the bottom of this page you can find a simpler solution to this question.

Update2:
I have currently removed the random banner from my design. Not because it didn’t work well, but because I wanted a simpler design.

As you might have noticed, the banner at the top of this site changes as you navigate the site. To implement this in WordPress is quite simple.

You need this plugin:
Random Banner
Random banner how to install

And a couple of banners. I made mine with a template I made in Photoshop. You can download my template here:
Template to edit the default banner in WordPress

Or you can make a couple of banners using this tool:
flickr-to-WP-banner

When you have set up Random Banner and made some top banners, place them in the random banner folder as noted in the instructions for the plugin.

Activate the Random Banner plugin.

Now you need to edit line number 27 in “header.php” for your current theme. You should replace the existing line 27 with this one:
#header { background: url("< ?php random_banner(); ?>") no-repeat bottom center; }

NOTE: I have not bothered to install a plugin that lets me print pure PHP-code on my page, so you can not copy line 27 directly from here. You need to delete the space between < and ? before "php random_banner..."

...and off you go!

You can read about my current banners here.

9 Comments

speak up

Add your comment below, or trackback from your own site.

Subscribe to these comments.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*Required Fields