WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Themes» How to Enable Custom Header Images Panel in WordPress 3.0

How to Enable Custom Header Images Panel in WordPress 3.0

Last updated on June 21st, 2012 by Editorial Staff
34 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Enable Custom Header Images Panel in WordPress 3.0

If you guys haven’t had a chance to test out WordPress 3.0, then you are missing out. We have created numerous posts about WordPress 3.0 features and have shown WordPress 3.0 screenshots as well. One of the note-worthy upgrade in this version is a new default theme called Twenty Ten. This theme has a lot of great features enabled, but one of the features that a lot of users want is the Custom Headers Panel. In this article, we will share with you how you can enable custom headers with a back-end admin panel in WordPress 3.0.

What exactly will this feature do?

It will create a tab in your admin panel which will allow you to change header images. You can register default images if you are a theme designer to give users more options. It also allows users to upload custom images for the header. Last but certainly not the least, this feature utilizes post thumbnails on single post pages. If your post thumbnail is big enough to fit the header size, then it will use your post thumbnail as the header instead of the default image. If your thumbnail is bigger, then it will crop it down for you.

Custom Header in WordPress 3.0

Watch the Screencast

How to Add this?

We took the code straight from Twenty Ten’s functions.php file. You need to paste the following codes in your theme’s functions.php file.

<?php
/** Tell WordPress to run yourtheme_setup() when the 'after_setup_theme' hook is run. */
add_action( 'after_setup_theme', 'yourtheme_setup' );
if ( ! function_exists('yourtheme_setup') ):
/**
* @uses add_custom_image_header() To add support for a custom header.
* @uses register_default_headers() To register the default custom header images provided with the theme.
*
* @since 3.0.0
*/
function yourtheme_setup() {
// This theme uses post thumbnails
add_theme_support( 'post-thumbnails' );
// Your changeable header business starts here
define( 'HEADER_TEXTCOLOR', '' );
// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI.
define( 'HEADER_IMAGE', '%s/images/headers/forestfloor.jpg' );
// The height and width of your custom header. You can hook into the theme's own filters to change these values.
// Add a filter to yourtheme_header_image_width and yourtheme_header_image_height to change these values.
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'yourtheme_header_image_width', 940 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'yourtheme_header_image_height',	198 ) );
// We'll be using post thumbnails for custom header images on posts and pages.
// We want them to be 940 pixels wide by 198 pixels tall (larger images will be auto-cropped to fit).
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
// Don't support text inside the header image.
define( 'NO_HEADER_TEXT', true );
// Add a way for the custom header to be styled in the admin panel that controls
// custom headers. See yourtheme_admin_header_style(), below.
add_custom_image_header( '', 'yourtheme_admin_header_style' );
// … and thus ends the changeable header business.
// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
register_default_headers( array (
'berries' => array (
'url' => '%s/images/headers/berries.jpg',
'thumbnail_url' => '%s/images/headers/berries-thumbnail.jpg',
'description' => __( 'Berries', 'yourtheme' )
),
'cherryblossom' => array (
'url' => '%s/images/headers/cherryblossoms.jpg',
'thumbnail_url' => '%s/images/headers/cherryblossoms-thumbnail.jpg',
'description' => __( 'Cherry Blossoms', 'yourtheme' )
),
'concave' => array (
'url' => '%s/images/headers/concave.jpg',
'thumbnail_url' => '%s/images/headers/concave-thumbnail.jpg',
'description' => __( 'Concave', 'yourtheme' )
),
'fern' => array (
'url' => '%s/images/headers/fern.jpg',
'thumbnail_url' => '%s/images/headers/fern-thumbnail.jpg',
'description' => __( 'Fern', 'yourtheme' )
),
'forestfloor' => array (
'url' => '%s/images/headers/forestfloor.jpg',
'thumbnail_url' => '%s/images/headers/forestfloor-thumbnail.jpg',
'description' => __( 'Forest Floor', 'yourtheme' )
),
'inkwell' => array (
'url' => '%s/images/headers/inkwell.jpg',
'thumbnail_url' => '%s/images/headers/inkwell-thumbnail.jpg',
'description' => __( 'Inkwell', 'yourtheme' )
),
'path' => array (
'url' => '%s/images/headers/path.jpg',
'thumbnail_url' => '%s/images/headers/path-thumbnail.jpg',
'description' => __( 'Path', 'yourtheme' )
),
'sunset' => array (
'url' => '%s/images/headers/sunset.jpg',
'thumbnail_url' => '%s/images/headers/sunset-thumbnail.jpg',
'description' => __( 'Sunset', 'yourtheme' )
)
) );
}
endif;
if ( ! function_exists( 'yourtheme_admin_header_style' ) ) :
/**
* Styles the header image displayed on the Appearance > Header admin panel.
*
* Referenced via add_custom_image_header() in yourtheme_setup().
*
* @since 3.0.0
*/
function yourtheme_admin_header_style() {
?>
<style type="text/css">
#headimg {
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
}
#headimg h1, #headimg #desc {
display: none;
}
</style>
<?php
}
endif;
?>

That is jibbrish to me. Please Explain

Ofcourse, this might look jibrish to some of you. This is mostly for theme designers, but we will do our best to break it down. Before we start make sure you copy and paste this code in your code editor, so you can make the changes necessary.

Note: We are using /images/headers/ as the directory where you will store your default header images.

  • You start the code out by creating a function yourtheme_setup().
  • In line 21, we define the default header image. Note there is a variable %s which is basically a placeholder for the theme directory URI.
  • Line 25 and 26 is where you define the image width and height. By default it is set to 940px wide and 198px high. You can change it by editing those two lines.
  • Starting from line 42, we start registering the default headers. These are the images that will show up as a radio button option in your admin panel. If you need more options then simply follow the format being used.
  • In line 95, we choose the header styling. You do not need to change these settings because you alreadyd efined them in Line 25 and 26.

That is all what you are doing for the theme’s functions.php file. Next we are going to go into how you are going to add this to your theme.

Code to add in your Theme

This code will most likely go in the theme’s header.php file. You can style it however you like.

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail') ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// We have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>

What is this code doing?

  • First, it is checking if it is a single post or a page. It also checks if this post/page has a thumbnail, and whether it is big enough.
  • If the page is a single page and has a big enough thumbnail, then it displays the post thumbnail specific for that post.
  • If it is not a single page, or the post thumbnail is not big enough, then it will show the default header.

We hope this tutorial was helpful. We got a few emails asking about this tutorial, so we broke the code down from the Twenty Ten theme. If you have any questions, then feel free to ask in the comments.

34 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

36 Comments

Leave a Reply
  1. Steven Denger says:
    Jul 3, 2017 at 10:28 pm

    Great tutorial – for developers.
    For beginners – worthless. The name of this site should be WP Developers – not Beginners.

    Reply
  2. Kitty says:
    Feb 1, 2017 at 12:31 pm

    Is there a way with the twenty ten theme to have the header as a feature slider image on the entrance page and a static header images on all the inside pages?

    Reply
  3. snehal says:
    May 21, 2015 at 3:03 am

    Hello Thanks for great information. I followed all your steps correctly and its successfully done. but one problem is header image blank space is showing on home page also. Plz Help me…

    Reply
  4. Martin says:
    Aug 14, 2014 at 6:23 pm

    How can i change the name from “header” to “footer” in the appearance menu ?

    Reply
  5. Christine says:
    Dec 28, 2013 at 6:18 pm

    I know I am bringing up an OLD post but – THANK YOU!! Worked perfectly :)

    Reply
  6. Rajesh Khatri says:
    Dec 5, 2012 at 12:44 pm

    I just read and apply to my local site, i have certain questions:

    1) when i add images into featured image it will directly save in “wp-content/upload” Folder can i set this to in my theme folder like “mytheme/image/header” ? how can i do this plz suggest me.

    2) and second point is when i add image it is also create thumbnail (150 x 150 & 300x 95) size images , can i stop this auto create images?

    3) doesn’t understand below code, what does that mean:

    array (
    ‘berries’ => array (
    ‘url’ => ‘%s/images/headers/berries.jpg’,
    ‘thumbnail_url’ => ‘%s/images/headers/berries-thumbnail.jpg’,
    ‘description’ => __( ‘Berries’, ‘yourtheme’ )
    ),

    It will be great pleasure if some one guide me.

    Hoping for early response, Thanks in advance,

    Rajesh.

    Reply
  7. forrestmiller says:
    Oct 12, 2011 at 9:03 am

    Hello, Thanks for this informative post. I followed you steps and it worked out perfectly except for one thing. My header is aligned to the left and i cant seem to figure out how to center it. How can I make this happen?

    Reply
    • Rajesh Khatri says:
      Dec 5, 2012 at 12:47 pm

      You can set align center using margin:0 auto css property.

      Reply
  8. tronicman says:
    Sep 21, 2011 at 11:43 am

    Hi,

    thanx for the tutorial, but as I am more a designer than programmer, I could need a little bit of extra information ;-)

    (I understand HTML and CSS, know a little bit of working with WordPress, but don´t know much about PHP)

    ´cause that doesn´t work at all.

    When changing:

    ‘cherryblossom’ => array ( ‘url’ => ‘%s/images/headers/cherryblossoms.jpg’, ‘thumbnail_url’ => ‘%s/images/headers/cherryblossoms-thumbnail.jpg’, ‘description’ => __( ‘Cherry Blossoms’, ‘yourtheme’ ) ),

    what exactly do I have to write into the URL, instead of the “%s”?

    A total path like “http://www.mysite.com/wordpress/wp-content/themes/mytheme/” ??

    Or does it “know” its path (means, that it is in the theme called “mytheme” in the “themes” folder within the “wp-content” folder, and I only have to write “mytheme//images/headers/cherryblossoms.jpg”?? Or shouldn´t I change the “%s” at all?

    Do I have to change something in the CSS? And if yes, where and what?

    Could you please give me some hints?

    Reply
    • wpbeginner says:
      Sep 22, 2011 at 7:05 am

      @tronicman %s is the path to your theme. So %s points to yourdomain.com/wp-content/themes/yourtheme/ and then you specify afterwards like /images/headers/

      Reply
  9. Berry says:
    Aug 26, 2011 at 9:51 am

    Hello, I did everything as in the tutorial and it all works, featured images are shown in the header of the posts but everytime I post something I get this error:

    Warning: Cannot modify header information – headers already sent by (output started at C:xampphtdocswordpresswp-contentthemesTiendeveenfunctions.php:239) in C:xampphtdocswordpresswp-adminasync-upload.php on line 2691

    Everything works, you only get this error when posting with a featured image which is irritating, any help please?

    Reply
  10. Robert says:
    Jan 27, 2011 at 10:46 am

    Thanks for the post. In my theme I have 4 different custom post types. I would like to use the header image functionality but also be able to set a different default header image for each of 4 custom post types. Is anyone aware of a plugin/resource for accomplishing this?

    Reply
    • Editorial Staff says:
      Jan 27, 2011 at 2:26 pm

      You can’t do it with the current header panel because that sets an image for all pages. However you can do it by hard coding the custom-post-type specific page template.

      Reply
  11. pegasus says:
    Jan 5, 2011 at 12:24 pm

    hey there, hope you can lend me a hand, i’ve cut and pasted the code on my functions.php file and header.php, and everythings works fine as long as i’m logged into the worpress’ dashboard, the problem is when i log out and try to log back in, it shows nothing but a blank page, i’ve styled the old default theme that came with the 2.9 release (was it 2.8??).
    any thoughts?

    Reply
    • Editorial Staff says:
      Jan 7, 2011 at 10:13 am

      Most likely, you are leaving additional spaces in the functions.php file that is causing this error.

      Reply
  12. chartinael says:
    Oct 28, 2010 at 8:53 am

    the intro vid on wp.org says, that a custom header is doable for different pages. However, I don’t seem to figure out, how to assign a specific header for cats, pages, or posts. Any thoughts?

    Reply
    • Editorial Staff says:
      Oct 28, 2010 at 3:03 pm

      Yes, if you look at the default Twenty Ten codes it does that. Basically how it is working is that it takes your featured image that you attach for that post or page, and then displays it there. In Twenty Ten there are other criterias set such as if the width of the featured image is “this big” then show the featured image as the header image, if not then show the default header image.

      Reply
      • chartinael says:
        Oct 28, 2010 at 5:44 pm

        Hey there, it doesn’t work for me:

        have image sized as header images, have in folder x on my server
        click on featured image link in post/page
        enter url
        click insert into post (no other option), i’d expect something like safe as header for this post, page, section god knows what.

        then image gets uploaded whereever cursor was at time of clicking and that’s it. Header image still the default image as set in appearance / header section. Am I doing something wrong? Theme is virgin. I thought I’d try things out first.

        Reply
  13. Nacho says:
    Sep 23, 2010 at 12:37 pm

    Is there a way to apply this to categories?

    Reply
    • Editorial Staff says:
      Sep 24, 2010 at 8:24 am

      Do you mean custom header images on categories??? Because by default this image is shown on all pages.

      Reply
  14. Carkod says:
    Sep 8, 2010 at 3:43 pm

    Thank you so much, especially for taking the time to do the screencast, it helps a lot!

    Reply
  15. Piet says:
    Sep 2, 2010 at 3:23 am

    Great tips, but in your example of functions.php the %s (as template directory) still links to twentyten instead to the child theme!

    I am trying to replace the default header image (path.jpg) in admin with my own, but cannot accomplish that as long as %s links back to the twentyten parent theme…

    Any chance on a solution?

    Reply
    • Editorial Staff says:
      Sep 2, 2010 at 6:12 am

      use the bloginfo template_directory hook…

      Reply
      • Piet says:
        Sep 2, 2010 at 7:41 am

        I figured it out:
        define(‘HEADER_IMAGE’, get_bloginfo(‘stylesheet_directory’) . ‘/images/your-image.jpg’);

        Reply
  16. cathy says:
    Aug 8, 2010 at 8:53 am

    I have created a theme based on ET-Starter. I have made some adjustments and everything is going swimmingly. The one thing I cannot figure out is how to adjust the strings within the _e(‘string’) sections on the page. For example, the string I am trying to replace reads ‘If you don’t want to upload your own image, you can use one of these cool headers.’

    The only thing I can find on replacing these strings have been with respect to translating to another language. It’s very murky in the code (for me) to ascertain the hook for this filter.

    Reply
  17. Matti says:
    Jul 2, 2010 at 6:50 am

    Could this be modified to show all the different headers on one page? I am thinking about whether this could be developed into a slideshow of header images, with the ability to add new images through the wordpress custom header admin.

    Reply
    • Editorial Staff says:
      Jul 2, 2010 at 9:46 pm

      It could be if you know jQuery… but we haven’t seen a plugin like that yet.

      Reply
      • Matti says:
        Jul 3, 2010 at 3:22 am

        Is there a simple way of editing this to show all images at the same time? A small edit to the php that anyone could help me with?

        Reply
  18. Micah says:
    Jun 28, 2010 at 7:20 pm

    Is there a way to take the existing header photos displayed by the header_image() tag and randomly call them on each page load? It would be great to upload 10-20 at a time and then let the theme randomly pull one of the photos to display.

    Reply
    • Editorial Staff says:
      Jun 28, 2010 at 9:53 pm

      Not by default… but you can use the old image rotation trick that we mentioned in our site. Use the search feature :)

      Reply
      • Micah says:
        Jun 29, 2010 at 12:13 am

        Right, I saw that article but realized the structure in the 2010 theme is updated. I wasn’t sure if others had already done this with the header_image() function. It would be pretty cool if somehow you could enter a variable into the parens, like this: header_image(‘random’). Is there a way to write something into functions.php for this? Otherwise, I guess I’ll have a try with your method, thanks.

        Reply
        • Editorial Staff says:
          Jun 29, 2010 at 8:17 am

          Ok, here is a way you can do it. Get the plugin called Twenty Ten Header Rotator:
          http://wordpress.org/extend/plugins/twenty-ten-header-rotator/

        • Micah says:
          Jun 29, 2010 at 2:09 pm

          Wow how timely, thank you!

  19. LimeCake says:
    Jun 28, 2010 at 6:57 am

    Hi i recently downloaded a theme but it hasn’t got the custom header option like my current theme has. Do i just copy and paste the code in this page? i’m an IT idiot so i have no idea about CSS or anything like that. will copying this code create a menu in my wordpress template that will enable to change my header easily or do i have to manually go into the stylesheet and change the header image? thanks!

    Reply
    • Editorial Staff says:
      Jun 28, 2010 at 8:05 am

      If you have no idea about CSS and such, then we recommend you hire a developer. Because you still have to modify the theme files to make the styling right for that theme.

      Reply
  20. Pete says:
    Apr 15, 2010 at 8:42 am

    Thanks so much… great minds think alike ;)

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
RafflePress - WordPress Giveaway and Contest Plugin
RafflePress
Giveaway and Contest Plugin for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
DesignEvo
DesignEvo Coupon
Get 25% OFF on DesignEvo premium logo making service.
Themify
Themify Coupon
Get 20% off Themify's beautiful, responsive WordPress themes. Choose any theme or get all 42 for just $71.20 ($1.69 per theme)!
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.