Giving your users changeable or custom headers in themes
Posted by andrea in Built in to WordPress, and also available for WordPress MU, is the Custom header API. This service allows you to quickly add some code to a theme’s fuinctions.php file to make the header area completely customizable. User will be able to upload a header image of their choice on their chosen theme, without affecting other blogs using the same theme.
You may want to try this first on a test site of WPMU.
First, check and see if your theme has a functions.php file included. If it doesn’t, make a blank file called functions.php. If it already has code in it, which it will if the theme is widget enabled, then you can paste this code in right before the last ?> tag.
//make changeable header
define('HEADER_TEXTCOLOR', '');
define('HEADER_IMAGE', 'setta.jpg'); // %s is theme dir uri and image filename
define('HEADER_IMAGE_WIDTH', 985); // make sure these values match the theme header
define('HEADER_IMAGE_HEIGHT', 200);
define( 'NO_HEADER_TEXT', true );
function atypxmas_admin_header_style() { // change atypxmas to your theme name
?>
// this part adds the header in the admin area
#headimg {
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
}
#headimg h1, #headimg #desc {
display: none;}
}
function header_style() {
?>
#header{
background: url(<?php header_image() ?>) no-repeat;}
}
add_custom_image_header(’header_style’, ‘atypxmas_admin_header_style’); // change atypxmas to your theme name you used above.
And that’s it! Everything else is handled internally by WordPress. To make things even easier, here’s a copy of a sample functions.php file. Please read the code and change the values accordingly for your specific theme, including the filename.
![[Post to Twitter]](http://wpmututorials.com/wp-content/plugins/tweet-this/icons/tt-twitter-micro3.png){kind=icon}
Random Posts
Andrea,
Another great post:) I will certainly review this code in the coming months as I get back into theming.
Ha ha – saved me time and effort yet again. Keep up the good work!
Everything I ever needed to know about changeable headers in themes. Thank you so much!
Heya Andrea you missed the if ‘blank’ check so that the words can be hidden when you click hide text, the method you have above won’t allow you to hide text.
I posted the version with the if ‘blank’ statement here:
http://www.lunchboxfunnies.com/forum/viewtopic.php?t=1825
Which will allow you to hide text or show text on both the default and custom header.
[...] – Eternal Love saved by punkblackstar2008-12-27 – A8stract NTW saved by xfrancois2008-12-23 – Giving your users changeable or custom headers in themes saved by ckeithley2008-12-23 – Wow, Wordpress… saved by SSJ3raditz2008-12-21 – Installation Guide [...]
hey andrea, amazing tutorial, I never knew its so easy. I just gave a theme a customizable header in 5 minutes!! incredible!
Btw. where can I read more about this? I mean where do the uploaded images go?
@Philip M. Hofer (Frumph):
the lkink you gave is dead, can someone please check this?
Hey,
i change atypxmas to? Theme name from CSS?
what should i do with themes with 2 word names?
That was a good question. First is the name of the theme exactly the name of the them sub-folder containing it, or is it listed somewhere in the theme code? What happens with names containing spaces?
Another question, if i do not see an Image selection option under the Header Image and Color tab, could it mean the theme I downloaded is not Mu compatible? I believe under regular WP it allows for an image selection as is.
No, it just needs you need to create a div with id=”header” and style it to the proportion you want.
in functions.php the #header id is defined dynamically.
Edit your header.php and add the div, style it to the size you want, margin:0 auto; it and enjoy!
Hey i like to add these function to the classic kubrick theme but it doesnt work. Do you have an idea how i can add custom header to the kubrick theme?
Thank you for this. Working on a big WPMU site and this works perfectly!
[...] Giving your users changeable or custom headers in themes – WPMU Tutorials [...]
Wpmu always set user file to blog.dir/../../
How to set custom header image to point that file path ??
Hi I’ve applied your tip to the Primepress theme but it doesn’t seem to be working right. What happens is that it’s added another custom image on top of the existing rotating one. Any ideas?
Screenshot below
http://www.syamsul.net/primepress_botched.jpg
Thanks in advance
Is it possible to let the user select their own size(height) of the picture?
and how do i implement it into the code?
.-= Patrick´s last blog ..21 bloggtips =-.
The height is really determined by the theme itself, and the max size is what is listed in the code. You don’t have to use the size in my example, it really depends on the header in your theme.
Thanks for the tutorial Andrea – having a bit of troub with the dimensions though as I’m using a combination of a percentage for the width and ems for the height which breaks the my function file… any clues?
How big is the image? You need the dimensions in pixels of the original header graphic, not the ones on the div.
OK sweet, I was a bit lazy and just had my header image in the top left of my header div rather than giving it’s own div, so that’s all sorted that out but now I’m getting this error:
Fatal error: Call to undefined function add_custom_image_header()
This is my code:
//make changeable header
define(’HEADER_TEXTCOLOR’, ”);
define(’HEADER_IMAGE’, ‘/wp-content/themes/nha_blogs/images/people_news.png’); // %s is theme dir uri
define(’HEADER_IMAGE_WIDTH’, 448);
define(’HEADER_IMAGE_HEIGHT’, 163);
define( ‘NO_HEADER_TEXT’, true );
function nha_blogs_admin_header_style() {
?>
#headimg {
height: px;
width: px;
}
#headimg h1, #headimg #desc {
display: none;
}
#header{
background: url() no-repeat;
}
<?php
}
add_custom_image_header(’header_style’, ‘nha_blogs_admin_header_style’);
I found the function in wp-includes\theme.php :
function add_custom_image_header($header_callback, $admin_header_callback) {
if ( ! empty($header_callback) )
add_action(’wp_head’, $header_callback);
if ( ! is_admin() )
return;
require_once(ABSPATH . ‘wp-admin/custom-header.php’);
$GLOBALS['custom_image_header'] =& new Custom_Image_Header($admin_header_callback);
add_action(’admin_menu’, array(&$GLOBALS['custom_image_header'], ‘init’));
}
Is there something I’m missing to prevent it from playing with the code in functions.php?
I have written my theme from scratch, it’s pretty basic but has been working perfectly well so far… is there something I should have added to make it talk to theme.php?
Thanks again from AU !
a-ha ! fixed it, for I am a tool and put the code into the /wp-admin/functions.php not my theme functions.php… derr!
Cheers Andrea !
I have followed the steps above and I see the Custom Header section in the admin. But, when I upload an image, the next step takes me to the page that lists all the available templates to choose from. The URL show STEP 2 but there is no place to CROP. I have tried multiple files, multiple sizes, etc.
Nothing happens. The image is never uploaded.
Am I missing something? Should a file actually be uploaded and if so, where should I be looking?
Thanks!
Hi Andrea,
This is wonderful. Thanks so much for this. I had one question, tho. When I added the code to my functions.php file, I noticed that the original header image disappeared. It wasn’t until I uploaded a new one that the header showed up again.
Could this be an issue with the theme I’m using? I’m testing using the Inove theme.
Thanks again,
Russ
If you didn’t change the line in the code to the path & image in your theme, then that would do it.
Hi Andrea,
I have been trying to insert your sample code in an Artisteer theme, and changing the values as needed, but I keep coming up with syntax errors, I posted on the Artisteer forum and on WPMU forum, where it was suggested I contacted you.
I do understand the code a bit, but PHP syntax is not my development language, there is a tag out of place, if I paste the sample code in.
I have all the Artisteer code pasted in this WPMU topic.
http://premium.wpmudev.org/forums/topic/artisteer-theme-and-changing-headerjpg
Any example of fitting the code into an Artisteer theme would be most welcomed, and I will link back to any solution from both forums, as I think many other would be interested.
Kind Regards
David
david.cox[at]adeptris[dot]com
Andrea,
Thanks for the how-to. Going through the steps you provided, I have a quick question, if I change the functions.php file in the theme directory, what exactly ties the header code change to one particular blog? I think this would override the header image for all blogs that use the same theme.
Where exactly are we setting this for one specific blog, where is that connection made?
In the blog’s options table, where the blog header setting gets saved.
Thanks for the quick reply,
So, after I modify the changes in functions.php and drop the header image in my theme folder, I empty the blog’s “Blogname” & “Blogdescription” fields, the header should show up for that perticular blog.
Any other blog with entries for two options above will have text and not this header?
“and drop the header image in my theme folder,”
The code above adds a menu to the backend of WP. the header gets uploaded there, it doesn’t go in the theme folder.
Anything done in that menu is only specific for that blog.
Thanks so much Andrea, It worked after a copied the code from your sample functions.php
Many thanks!
Would be great to link to this from http://codex.wordpress.org/Appearance_Header_Image_and_Color_SubPanel
With your permission, I’ll share the code there by way of a more detailed entry.
Again, many many thanks!
Hi Andrea- Did this once on a theme and it worked first try. No tried on another and it works on front end but in admin area i get this:
Warning: Cannot modify header information – headers already sent by (output started at /home/content/71/4743871/html/wp-content/themes/tstore/functions.php:45) in /home/content/71/4743871/html/wp-includes/functions.php on line 792
Warning: Cannot modify header information – headers already sent by (output started at /home/content/71/4743871/html/wp-content/themes/tstore/functions.php:45) in /home/content/71/4743871/html/wp-includes/functions.php on line 793
can you help? thanks!
Sorry to bug you.. I had the same image from other custom header theme then uploaded same image again and it threw error with both images…same name. cleared both tried again, smooth sailing! thanks
fyi, this is NOT a cookie cutter hack.
I’ve used this one 5 or themes and just starting to get over the learning curve. I still got 50 or so more themes to do.
So far, every theme has required significant edits in the style.css and header.php files, as well as editing the example function.php file.
Why the example in the post is different than the actual one used is beyond me.
More tips are listed here.
http://mu.wordpress.org/forums/topic/13723
Thanks for getting me on the right track.
It’s not meant to be a cookie cutter hack.
I think the post states that the *example code* still needs to be edited for your particular theme. It;s meant as a means to understand the process, so you’re not just copy/pasting code in will-nilly with no idea what it’s supposed to do.
I don’t envy your theme list. Sure they haven’t been done already?
Question:
Can this be edited so that when a user uploads a png with transparency it will maintain a png and thus its transparency?
Right now, it automatically converts to jpeg and turns the background black.
The custom header API that you’re hooking into with this code is in the core. So that conversion is core, not in the code above.
Thanks for the reply.
I looked into wp-admin/custom-header.php and it looks like it’s happening on the crop. So I tested uploading a png with the correct size and sure enough it maintains its png/transparency.
I can’t figure out what to edit in custom-header.php though.
I do see under function step_3 is:
‘post_mime_type’ => ‘image/jpeg’,
which i tried editing to say “$type” or “image/png” or “png”, but nothing changes it still converts to a .jpeg, even when elimanate that string entirely. Somewhere is a function that converts but I can’t read the php code that gives it away.
At least I can make a tutorial or a notes page to instruct people to crop it to the default size prior to the upload.