Archive for February, 2010

Rotating Header in WordPress

Wednesday, February 17th, 2010

The following is one way to get your blog to rotate images within the header of your blog.

First you’ll need to go to your CPanel to set-up a directory in your File Manager to place the rotate.php and all the images that you want to rotate in the header. On the Digital Storytelling the directory structure is set-up like this:

http://umwblogs.org/wp-content/rotate_ds/

The next step is to download the rotate.php zip file that you will place in the folder you have created, in this case it will be the ‘rotate_ds’ folder. Once you have saved the file you can place the zipped folder in the ‘rotate_ds’ and extract the contents to the folder (which should be the ‘rotate.php’ file). So the hierarchy should look something like this:

http://umwblogs.org/wp-content/rotate_ds/rotate.php

Now that you have the php file in place you can put in the images that you want to rotate in the header in the same folder. Make sure when you create the images that you format the images to the proper height and width otherwise your images might not come out the way you want.

With all that in place you can now put in the little bit of code that will tell your header where to grab the images from and that you want to rotate them. One way of doing this is through the main CSS stylesheet of your theme but, if you are having problems with the CSS you can stick code into the header.php that will override any other code in place.

Go to the back-end of your blog and click on Appearance and navigate down to the Editor option. This will allow you to edit your themes. On the right hand side there should be a list of templates one of which is “Header (header.php)” click on that to open it up in the editor.

Scroll through the code until you come across:

<div id="header"

You can insert the following code in right after div id=”header”:

style="background: #000 url('http://umwblogs.org/wp-content/rotate_ds/rotate.php')"

That is the bare minimum to get the rotate.php to work. If you want the images to appear nicely in the header it is a good idea to add some CSS in. So take a look at the code in its entirety for the Digital Storytelling header.php:


div id="header" style="background: #000000 url(http://umwblogs.org/wp-content/rotate_ds/rotate.php) center center no-repeat; height: 160px; padding-top: 10px;"

Here is an explanatory image of what the CSS is doing:

DS Rotating Header CSS