Get fresh WordPress Content delivered in your inbox with warpspeed!

learn wordpress wplift wordpress rocket

WordPress 3.0 brought a host of new features with it and one was the ability to change your theme header from within the admin panel, under the “appearance” tab and was built into the TwentyTen theme. What if you want to add this functionality to your own theme ? Thankfully it’s pretty easy to do by adding some custom code to your theme’s functions.php file.

Add Code to Functions.php

Open or create a file called functions.php in your WordPress theme’s folder and paste the following code :

[php]
<?php
//Check see if the customisetheme_setup exists
if ( !function_exists(‘customisetheme_setup’) ):
//Any theme customisations contained in this function
function customisetheme_setup() {
//Define default header image
define( ‘HEADER_IMAGE’, ‘%s/header/default.jpg’ );

//Define the width and height of our header image
define( ‘HEADER_IMAGE_WIDTH’, apply_filters( ‘customisetheme_header_image_width’, 960 ) );
define( ‘HEADER_IMAGE_HEIGHT’, apply_filters( ‘customisetheme_header_image_height’, 220 ) );

//Turn off text inside the header image
define( ‘NO_HEADER_TEXT’, true );

//Don’t forget this, it adds the functionality to the admin menu
add_custom_image_header( ”, ‘customisetheme_admin_header_style’ );

//Set some custom header images, add as many as you like
//%s is a placeholder for your theme directory
$customHeaders = array (
//Image 1
‘perfectbeach’ => array (
‘url’ => ‘%s/header/default.jpg’,
‘thumbnail_url’ => ‘%s/header/thumbnails/pb-thumbnail.jpg’,
‘description’ => __( ‘Perfect Beach’, ‘customisetheme’ )
),
//Image 2
‘tiger’ => array (
‘url’ => ‘%s/header/tiger.jpg’,
‘thumbnail_url’ => ‘%s/header/thumbnails/tiger-thumbnail.jpg’,
‘description’ => __( ‘Tiger’, ‘customisetheme’ )
),
//Image 3
‘lunar’ => array (
‘url’ => ‘%s/header/lunar.jpg’,
‘thumbnail_url’ => ‘%s/header/thumbnails/lunar-thumbnail.jpg’,
‘description’ => __( ‘Lunar’, ‘customisetheme’ )
)
);
//Register the images with WordPress
register_default_headers($customHeaders);
}
endif;

if ( ! function_exists( ‘customisetheme_admin_header_style’ ) ) :
//Function fired and inline styles added to the admin panel
//Customise as required
function customisetheme_admin_header_style() {
?>
<style type="text/css">
#wpbody-content #headimg {
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
border: 1px solid #333;
}
</style>
<?php
}
endif;

//Execute our custom theme functionality
add_action( ‘after_setup_theme’, ‘customisetheme_setup’ );
?>
[/php]

  • Default.jpg is the default image header file so rename that if you wish
  • 960 is the default width of the image
  • 220 is the default height of the image

Once you have have added this code and activated your theme, you will see the new menu option under “Appearance” called “Header” – this is where you can upload and choose which header file to use.

Place the Image in your Theme

The final step is to place code in your theme that will show the chosen image, the following code will probably go in your header.php file :

[php]
<div id="header">
<!– other header code here…. –>

<!– This line adds the header to the theme –>
<img id="headerimg" src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="Header image alt text" />
</div>
[/php]

And there you have it – an easy way to include this new functionality in your WordPress themes. Thanks to Nooshu for this code.

Published:

Last updated on:

Oliver Dale is the founder of Kooc Media, An Internet Company based in Manchester, UK. I founded WPLift and ThemeFurnace, find out more on my Personal Blog. Thanks!

19 thoughts on “Add a Customizable Header image to your WordPress Theme

  1. Help!! I tried entering this code in the functions.php file and now my whole website is white. When I access it from Mozilla it’s just a blank white page. When I access it from internet explorer I get this error:

    The website cannot display the page
     HTTP
    500

     
    Most likely causes:
    The website is under maintenance.
    The website has a programming error.
     
    What you can try:
     

    Refresh the page.
     

    Go
    back to the previous page.
     

    More
    informationI don’t know wordpress well enough to figure out what to do or how to restore my old setting.  I’m not able to get into the theme and functions.php to replace the code with the old code.  Any advice??

    • Do you have FTP access to your site ?
      You can FTP into your site, navigate to the theme directory, download the functions.php file and remove the code and re-upload.

  2. Hi,

    I added the preceding code to my website ( http://www.thenakedear.com ) as per your instructions, and it did add a header image, however it messed with the layout of the rest of the site. After this I deleted the code in both the Functions.php and Header.php, which took the header away, but the layout is still messed up. I even tried downloading the functions and header.php from FTP and deleting, then re-installing, but it is still the same.

    Any help would be appreciated!

    Thanks,

    James

  3. Thanks for sharing this, I just built a multi-user website for a client and was looking for a way to streamline the sub-blog themes into one. You article just brought me one step closer. 

  4. Thank you very much Oli. I hope this tutorials gives you a boost because the problem with the old ones is that they are BACKGROUND images and like the new Twenty Ten theme, they are displayed as images instead.

  5. so i thought it worked but now i’m having the same issue as previous poster had with website showing up white.

  6. This is cool, thanks. Can you suggest a mod that will let the user specify which page(s) the customer header appears on? I would like to try this very much. Would love to hear your thoughts

    Thank you,
    Charles

  7. Hello there! Thanks for the tip!! THnk god. Finally, i have a header on my blog! Thank you!
    I can adjust a big header on my own. Really customizable. Have a problem on Europe free theme. Would like to have a page bar under/above the header. Can you help me?

  8. Hi! Thanks for the code! What a lifesaver! It took me a while to get it, but it changed my menu font to something plain like times. All of my other fonts are great, and I didn’t think it would affect that. Any suggestions? Thanks!

  9. Hey man, just a little question, how can put a custom field in some place above header image?… in my theme, i want to header images of pictures width naming the author of it, so, i need custom field in the same location were change the header image.

    Help!

    (sorry, my english is awful)

    Pablo form Chile

  10. I’m not sure where you’re getting your information, but good topic.
    I needs to spend some time learning much more or understanding more.
    Thanks for excellent info I was looking for this info for my
    mission.

Comments are closed.

Join 40,000 WordPress Astronauts
AND GET OUR LATEST CONTENT IN YOUR INBOX WITH WARPSPEED

We will never spam you.
close-link
siteground coupon
Get 60% Off the No. 1 WordPress Hosting!