This tutorial will show you how to modify your theme so that you can have a different header image depending on what page or category your viewing.

There are a number of different ways to perform this task. This is pretty easy with minimal modifications to the theme. The modifications we’re going to make are for a typical Artisteer created theme, but it will work for just about any theme. Your mileage may vary.

This is sort of two tutorials in one. We’re going to make a small modification to the header.php file and we’re going to write a simple function and call it in the functions.php file.

Find this line of code in your header.php file…


<div class="art-Header-jpeg"></div>;

And change it to this…

<div <?php userfunc_header_image(); ?>></div>

You’re all done with the header.php file. Now for the fun part.

Now open your favorite text editor (NOT Word) and paste the following code into it…

<?php
// Function to use a different header image based on category or page.
// Copy elseif statements to create additional header for additional
// categories or pages.
function userfunc_header_image() {
    if         ( is_page('about'))  echo 'class="header2"';
		elseif ( is_category('261'))  echo 'class="header3"';
		elseif ( is_category('cat-a'))  echo 'class="header4"';
	else  echo 'class="art-Header-jpeg"';//This should match the default header class
	}
?>

Save this file as header_image.php and copy it to your theme directory that you have your modified header.php file in. We could have placed all of the above code (with the exception of line #5) in our header.php file but this way is neater plus we get to see how a simple function works.

You can add additional pages/categories by copying the elseif statement and adding a different header image unless you want to use the same one for more than one category/page. Don’t forget to change the category/page names to the proper ones for your theme. Also don’t forget to make additional CSS classes to match any additioanl header images you add.

Now open your functions.php file and insert the following line of code at the very top right after the opening ?php tag…

include_once (TEMPLATEPATH . '/header_image.php');

Almost done. Now all we have to do is define some CSS classes for our new header images. Just put the following CSS at the end of your style.css file. I just copied the CSS code for the default Artisteer header class and changed the name of the image. Your header image can be any name you want, just make sure the CSS matches.

div.header2
{
	position: absolute;
	z-index:-1;
	top: 0;
	left: 0;
	width: 888px;
	height: 250px;
	background-image: url('images/Header2.jpg');
	background-repeat: no-repeat;
	background-position: center center;
}

div.header3
{
	position: absolute;
	z-index:-1;
	top: 0;
	left: 0;
	width: 888px;
	height: 250px;
	background-image: url('images/Header3.jpg');
	background-repeat: no-repeat;
	background-position: center center;
}

div.header4
{
	position: absolute;
	z-index:-1;
	top: 0;
	left: 0;
	width: 888px;
	height: 250px;
	background-image: url('images/Header4.jpg');
	background-repeat: no-repeat;
	background-position: center center;
}

That’s it, you’re all done.

Don’t forget to make your header images. If your modifying an Artisteer theme this works best on on square cornered header images.

If you have any questions or need some help, just leave a comment and I’ll do what I can to help you out.

Disclaimer

I make no promises as to the functionality of these modifications to your theme code. Do it at your own risk. Do it on a backup copy. Do it while wide awake and after having plenty of sleep or plenty to drink, your choice. Don’t do it to your original code. Don’t do it while sleepy, cranking, or driving. And most important, don’t expect it to work the first time. If it does work the first time you probably got lucky. Besides, if you don’t break things you never figure out how they work. And last but not least…Have fun and learn something new.

  • Frank says:

    Hey Bud – thank’s for that great tutorial and your help with my theme problems. Many Greetz, Frank

Awesome Themes



Genesis Framework for WordPress

Favorite Random Quotes

“My wife is always trying to get rid of me. The other day she told me to put the garbage out. I said to her I already did. She told me to go and keep an eye on it.”

by Rodney Dangerfield