I’ve been playing around with the new beta version of WordPress 3.0 and discovered a technique for having different headers for each page or post. The best part is that it will work with v2.9.2 so you don’t have to wait for v3.0 to come out.

This technique comes out of the new twentyten theme and is very easy to implement into your Artisteer created theme.

The first thing that needs to be done is to enable the new post_thumbnail function (if it isn’t already enabled). Open your functions.php file and add this to the top right after the opening PHP declaration…

// add post_thumbnail support
if ( function_exists('add_theme_support') )
  add_theme_support('post-thumbnails');

Save the file and then open your header.php file. What we are going to do now is add a little bit of magic to the art-header-jpg DIV that will over-ride the default header image.

In your header file the DIV you want looks like this…

<div class="art-header-jpeg"></div>

We want to make the code look like this…

    <div class="art-header-jpeg">
	<?php
	if ( is_singular() &&
		has_post_thumbnail( $post->ID ) &&
		( $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
		$image[1] >= 1000 ) : // change 1000 to the width of your header
		echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
			else : ?>
<?php endif; ?>
	</div>

Don’t forget to change the ’1000′ in line six to the value of the width of your header image.

NOTE: This works best with a square header image. On rounded corner headers Artisteer make two images. One is a background PNG with the rounded corners and the other is your JPG image that sits on to of it.

That’s it, you’re done. Now¬† make some header images that are the same size as the default header and then load up your theme and go to the edit screen for an existing (or new) post.

If all is working you should see a new box on the right side of your post edit page that will allow you to attach a thumbnail to the post.

post_thumb1

As long as the image you attach is at least as wide as your header then the it will over ride the default image when you view the post otherwise it will just show your default header.

Now every page or post can have a different header image.

header1

header2

Anyway, that’s about it. Give it a try and have fun.

REMEMBER: Backup, backup, backup. And don’t work on a live site. It’s really a pain when you blow up WP and can’t access your site. Ask me how I know :mrgreen:

  • satishraj says:

    Thankyou very much this article helped me alot it worked perfectly for me thanks once again!!!!!

  • Robert says:

    Thanks Bud, I’ve been looking for “relevant” articles on tweaking Artisteer generated pages. For once it didn’t take a month of searching through web drek to find it.

  • Ken says:

    Is this included in Templateer?

    • admin says:

      Not yet but I’m working on adding it into the next version along with the WP 3.0 custom header and custom background functions…if all goes well.

  • Chris says:

    Hey Bud!

    When is the new version of the templateer coming out?

    thx,

    chris

    • admin says:

      The new version has been out for a few weeks. It supports a number of the new WP 3.0 features

  • jeremy says:

    When will you be ready for the WP 3.0 version of this? (BTW it works great for 2.9.2)

    Thanks, this is an awesome and easy function I have been searching for awhile for.

    • admin says:

      This will work with WP 3.0 also. Or are you talking about the custom header function too.?

Awesome Themes



Genesis Framework for WordPress

Favorite Random Quotes

“There ought to be one day-- just one-- when there is open season on senators.”

by Will Rogers