Custom Image Header API

Recently we added some API to WordPress 2.1 to make adding custom image headers to themes much easier. We use this API for the themes on wordpress.com. The API is pretty simple. First, define some defaults:

define('HEADER_TEXTCOLOR', '009193');

define('HEADER_IMAGE', '%s/images/spring_flavour/header_bg.jpg'); // %s is theme dir uri

define('HEADER_IMAGE_WIDTH', 690);

define('HEADER_IMAGE_HEIGHT', 115);

Next you need to define a couple of functions. One styles the blog header and the other styles the admin header. See the functions header_style() and admin_header_style() defined in this sample theme functions.php.

Those functions can now be registered as callbacks with the add_custom_image_header() function.

add_custom_image_header('header_style', 'admin_header_style');

add_custom_image_header() does the work of creating a “Custom Image Header” page in the “Presentation” menu. The “Custom Image Header” page handles allowing users to change the header text color and upload and crop new header images.

Custom Image Header

Define a few constants and a couple of functions and your theme can easily add custom image header support. Here are some more sample functions.php files from various themes that use the custom image header API.

24 comments to Custom Image Header API

  1. Thanks for the tutorial. It seems to be easy to setup. One question though: does this work in WordPressMU too?

  2. BigBerries says:

    That’s pretty sweet! More ease with customizations. Awesome. I am sure many people will be glad about this.

  3. Ben says:

    That’s very cool. I asked Andy about this so that I could use it with Regulus but never got a response so I ended up going with my own version (which isn’t as good). I am working on a new theme and will be sure to use this in it.

    I just need WP 2.1 to be released now :)

  4. zakintosh says:

    WOW! Just what I need … if only I could figure out the techie bits on how to get this working on my blog :(

  5. [...] seguito la traduzione di un articolo a cura di Ryan Boren, sviluppatore di WP, riguardo le nuove API per temi con immagini personalizzate disponibili con la [...]

  6. andyk says:

    Nice one! Should be very handy… I think I’m going to have to get hold of the 2.1 beta and have a play!

  7. [...] Boren reports there will be a Custom Image Header API which will allow easier handling of adding custom header images to WordPress [...]

  8. [...] Boren, un des développeurs de WordPress, annonce qu’il a ajouté une API permettant d’interchanger facilement le header de son blog [...]

  9. [...] ich bei Lorelle lese gibt Ryan Boren, einer der führenden Entwickler der (noch) freien Blogsoftware WordPress, [...]

  10. [...] bit of tasty-treat WordPress has added into the system is a new Custom Header API, providing developers with a new way to dynamically allocated headers to your WordPress blog.  [...]

  11. [...] are a lot of new features in it, and one thing I liked is “Custom Header Image” as reported by Ryan [...]

  12. [...] 整合WordPress 2.1的新功能Custom Image Header。 [...]

  13. [...] Boren recently posted an article about the Custom Image Header API that they use on the themes on WordPress.com and how they had added the API to WordPress 2.1 [...]

  14. [...] added the custom header option. [...]

  15. adam says:

    it’s worth mentioning that for theme authors, all this stuff needs to be wrapped in if (function_exists(''))

    and.. i don’t know what function to check for.

  16. adaptiman says:

    I’ve successfully added these calls to the fall-season-10 theme. I’m having another problem, though. Uploads are not working.

    I’m using the nightly 2-12 build on RedHat ES. When I try to upload the custom header file, I get the following error:

    Unable to create directory /var/www/vhosts/test.com/httpdocs/wp-content/blogs.dir/1/files/. Is its parent directory writable by the server?

    I’ve searched the forums and tried:
    1. permission settings
    2. chowning to apache
    3. Checking safe mode (it’s off)
    4. tried itdamagers htaccess settings

    All of these suggestions have failed.

    Any other suggestions?

  17. [...] Añadido soporte de Custom Header API. [...]

  18. [...] with Ryan Boren’s blog describing the function, I managed to make this function appear again in default theme. Will tidy up a little bit and [...]

  19. JCLT says:

    Hello,

    doest this API work with WordPress MU. And does it allow a storage in the blogs.dir directory ?

  20. [...] Boren.nu: Custom Image Header API [...]

  21. [...] 整合WordPress 2.1的新功能Custom Image Header。 [...]

  22. [...] uses the “Custom Image Header” feature available in the admin interface — read this tutorial and note that to display the image you can call header_image() in the header.php [...]