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