• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

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
//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' );
?>
  • 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 :

<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>

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


Author:

Oliver Dale is the founder of Kooc Media, a small internet company based in the UK. Kooc Media runs several high-profile websites including WPLift, ThemeFurnace and DesignersTalk.

Leave Yours +

19 Comments

  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. Cjbrogers

    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. Michael

    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. stargirl32

    just wondering how i can center the image? otherwise it worked perfectly!

  6. stargirl32

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

  7. Charles

    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

  8. Charles

    sorry, that should be “custom” header, not customer :-)

  9. Lily

    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?

  10. lola

    Is this okay with WordPress 3.4 and in any theme?

  11. Sanju

    Thanks for this cool tutorial. :)

  12. Erika

    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!

  13. montemarcos

    is there any way that i can put different images on certain pages..

  14. Mujibur Rehman

    I am having a brand new website (http://www.createafreewebsiteb… ) and I am using TWENTYTEN WORDPRESS theme and I want to create a border accross the IMAGE in my post. Could you please let me know how to do that.

  15. That’s man, very useful !!!!!
    i’ve been search a lot for this code.

  16. 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

  17. ket

    Hi,
    Is this just to add image to the header. There is no fallback if image does not exist.

  18. 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

Search

Our Sponsors