custom_headerThis tutorial is geared towards themes produced with Artisteer but will work with virtually any theme. It’s pretty straight forward with modifications to the functions.php and header.php files. Since everyone’s Artisteer generated themes are a little different your files might look a bit different but it shouldn’t be too complicated.

If it fails to work the first time check for typos. Also when you paste the code into your functions.php file make sure that you don’t break up any existing code blocks.

OK, let’s get started. Since we’re going to be modifying some files we need to backup functions.php and header.php. You can use your favorite text editor (not Word). Also I would recommend against using the theme edit function as it’s impossible to undo what you’ve done.

Open your functions.php file and scroll to the bottom. The last few lines might look like this

add_filter('comments_template', 'legacy_comments');
function legacy_comments($file) {
if(!function_exists('wp_list_comments')) : // WP 2.7-only check
$file = TEMPLATEPATH.'/legacy.comments.php';
endif;
return $file;
}  

Add this chunk of code to the end of your functions.php file. You’ll want to change the size of your header area and the default color of your header text. The HEADER_IMAGE is the name of your default header image. There is a bunch of CSS styling for the header text. You may want to change it to match your theme. You can copy what you need from your style.css file.

If you don’t want to copy and paste the source code below you can download my Cool Blue theme and extract it from a working example.

<?php
// Admin Panel
//  Set some default values
define('HEADER_TEXTCOLOR', 'ffffff');//  Default text color
define('HEADER_IMAGE', '%s/images/Header.jpg');  // %s is theme dir uri, set a default image
define('HEADER_IMAGE_WIDTH', 998); //  Default image width is actually the div's width
define('HEADER_IMAGE_HEIGHT', 125);  // Same for height

function header_style() {
//  This function defines the style for the theme
//  You can change these selectors to match your theme
?>
<style type="text/css">
#header{
background: url(<?php header_image() ?>) no-repeat;
}
<?php if ( 'blank' == get_header_textcolor() ) { ?>
#header h1, #header #desc {
display: none;
}
<?php } else { ?>
#header h1 a, #desc {
color:#<?php header_textcolor() ?>;
}
#desc {
margin-right: 30px;
}
<?php } ?>
</style>
<?php
}

function admin_header_style() {
?>
<style type="text/css">
#headimg{
background: url(<?php header_image() ?>) no-repeat;
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width:<?php echo HEADER_IMAGE_WIDTH; ?>px;
padding:0 0 0 18px;
}

#headimg h1{
padding-top:40px;
margin: 0;
}
#headimg h1 a{
color:#<?php header_textcolor() ?>;
text-decoration: none;
border-bottom: none;
}
#headimg #desc{
color:#<?php header_textcolor() ?>;
font-size:1em;
margin-top:-0.5em;
}

#desc {
display: none;
}

<?php if ( 'blank' == get_header_textcolor() ) { ?>
#headimg h1, #headimg #desc {
display: none;
}
#headimg h1 a, #headimg #desc {
color:#<?php echo HEADER_TEXTCOLOR ?>;
}
<?php } ?>

</style>
<?php
}

add_custom_image_header('header_style', 'admin_header_style');

?>
;

Save the functions.php file and open your header.php file.

Find the following lines near the end of the header.php file (yours may be slightly different than mine).

<div class="Header">
    <div class="Header-jpeg"></div>
<div class="logo">
    <h1 id="name-text" class="logo-name">
        <a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    <div id="slogan-text" class="logo-text">
        <?php bloginfo('description'); ?></div>
</div> 

</div>

Just comment them out for now. You can delete them later when you’re sure everything works.

Now add this code to replace the above…

<div id="header">
	<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
	<p class="desc"><?php bloginfo('description');?></p>
</div>

That’s it.

Now for the big test. Go to your admin panel and you should now see “Custom Image Header” in the Appearance panel. If your them breaks and you get a PHP error check your functions.php file for typos. If all else fails you can always copy your backup file over.

If you see the new function, click on it and you should see something like this (of course it will have your header).

custom_image_header

Note: This will work best with an image that doesn’t have a transparent overlay, such as an Artisteer generated header with round corners. Start out simple, make a theme with no radius and experiment.

Have fun with your new theme function. You can upload a large image and crop the section you want to use. If the image is exactly the same size it will use it as is. Another bonus is that all of the images that you crop will be put in the upload directory. So if you play with it a lot you may end up with a large quantity of files in your image gallery.

Disclaimer: Performing this mod to your theme could break it. It does work and is a core WordPress API that’s being called. If your easily frustrated or break out in a sweat when things don’t work right then pass on this enhancement or get someone else to help you out . Never work on your original files. Always make backups. Drink plenty of liquids. Your milage may vary.

  • Andy R says:

    Great Tutorial! I have made it work on my own demo theme (not on t’internet yet, on my PC’s test webserver).

    It would be great if this worked for pictures in other locations on a theme…such as a middle or footer banner.

    I’ve had a play but add_custom_image_header is WordPress defined and only works for the header…

  • Nicole says:

    Thanks! This worked great! But now I want to have a different header for a specific category. How do I do that not that the custom header is defined in the functions.php?

    • admin says:

      I don’t think you could do it easily since the custom header is a core WP function. The API is kind of hijacking the header image outside of your theme. Although you could probably make a page template for a specific category and use a different header.php for it.

  • Tony Stark says:

    Any idea how to make transparency? It looks like Custom_Header.php converts to jpeg when it crops. Without cropping, however, it keeps the original file.

    I thought it might be:

    ‘post_mime_type’ => ‘image/jpeg’,

    but that code doesn’t do anything

    so i think it might be

    $file = wp_handle_upload($_FILES['import'], $overrides);

    which overrides the original attribute of the file, but I can’t seem to change it to make it keep the original attributes.

    • admin says:

      Everything is done in a WP API. This is a function WP built in and is used in the default theme. It’ll take a lot of digging into the WP code to figure out which is way beyond my job description.

  • Pontus says:

    Doesn’t work for me – I just get a blank screen – both for site and wp-admin. What could I being doing wrong? Followed your instructions perfectly.

Awesome Themes



Genesis Framework for WordPress

Favorite Random Quotes

“Ancient Rome declined because it had a Senate; now what's going to happen to us with both a Senate and a House?”

by Will Rogers