With the various theme hooks and theme filters, now it’s easier then ever to change the Thematic header with your own logo or custom banner design.
Until now you had to either change the header.php file in Thematic (something not really recommended) or use rather ugly CSS tricks to hide the existing content and use your logo or banner as a background for the #header or #branding div.
The end result will be a Child Theme Options page that will allow us to select if we want to use the default header or upload a header image:
Child Theme Options Page - You now have the posibility to upload your header image from Wordpress
We’ll start by creating a Child Theme. If you are already using one of the Thematic Child Themes then you can move to the next step, modifying the functions.php file.
The code for this tutorial was created by my colleague Gabriel. He always helps me with custom programing for Wordpress 
!
This functions.php file will consist of two parts: adding the Child Theme Options page to Wordpress and replacing the default header with your own logo or banner image.
Open functions.php and add the following code:
<?php
// ---------- "Child Theme Options" menu STARTS HERE
add_action('admin_menu' , 'childtheme_add_admin');
function childtheme_add_admin() {
add_submenu_page('themes.php', 'Child Theme Options', 'Child Theme Options', 'edit_themes', basename(__FILE__), 'childtheme_admin');
}
function childtheme_admin() {
$child_theme_image = get_option('child_theme_image');
$enabled = get_option('child_theme_logo_enabled');
if ($_POST['options-submit']){
$enabled = htmlspecialchars($_POST['enabled']);
update_option('child_theme_logo_enabled', $enabled);
$file_name = $_FILES['logo_image']['name'];
$temp_file = $_FILES['logo_image']['tmp_name'];
$file_type = $_FILES['logo_image']['type'];
if($file_type=="image/gif" || $file_type=="image/jpeg" || $file_type=="image/pjpeg" || $file_type=="image/png"){
$fd = fopen($temp_file,’rb’);
$file_content=file_get_contents($temp_file);
fclose($fd);
$wud = wp_upload_dir();
if (file_exists($wud[path].'/'.strtolower($file_name))){
unlink ($wud[path].'/'.strtolower($file_name));
}
$upload = wp_upload_bits( $file_name, '', $file_content);
// echo $upload['error'];
$child_theme_image = $wud[url].'/'.strtolower($file_name);
update_option('child_theme_image', $child_theme_image);
}
?>
<div class="updated"><p>Your new options have been successfully saved.</p></div>
<?php
}
if($enabled) $checked='checked="checked"';
?>
<div class="wrap">
<div id="icon-themes" class="icon32"></div>
<h2>Child Theme Options</h2>
<form name="theform" method="post" enctype="multipart/form-data" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']);?>">
<table class="form-table">
<tr>
<td width="200">Use logo image instead of blog title and description:</td>
<td><input type="checkbox" name="enabled" value="1" <?php echo $checked; ?>/></td>
</tr>
<tr>
<td>Current image:</td>
<td><img src="<?php echo $child_theme_image; ?>" /></td>
</tr>
<tr>
<td>Logo image to use (gif/jpeg/png):</td>
<td><input type="file" name="logo_image"><br />(you must have writing permissions for your uploads directory)</td>
</tr>
</table>
<input type="hidden" name="options-submit" value="1" />
<p class="submit"><input type="submit" name="submit" value="Save Options" /></p>
</form>
</div>
<?php
}
// ---------- "Child Theme Options" menu ENDS HERE
// ---------- Adding the logo image to the header STARTS HERE
if(get_option('child_theme_logo_enabled')){
function remove_thematic_blogtitle() {
remove_action('thematic_header','thematic_blogtitle',3);
}
add_action('init','remove_thematic_blogtitle');
function remove_thematic_blogdescription() {
remove_action('thematic_header','thematic_blogdescription',5);
}
add_action('init','remove_thematic_blogdescription');
function thematic_logo_image() {
echo '<div id="logo-image"><a href="'.get_option('home').'"><img src="'.get_option('child_theme_image').'" /></a></div>';
}
add_action('thematic_header','thematic_logo_image',4);
}
// ---------- Adding the logo image to the header ENDS HERE
?>
This source code works on all Thematic 0.9 Child Themes. If you’re using an older version of Thematic, chances are this won’t work.
Save and go into your Wordpress admin panel under “Appearance -> Child Theme Options”. If every thing worked out ok you should have a similar admin panel as the one in the picture on top of the page.
As a side note there’s already in the works a plugin for Wordpress that will make modifying Thematic a breeze so keep an eye out for great new things coming your way!
112 Comments
Thanks!
Thanks for the tip. Works smoothly
This is great! Thank you.
Britain’s Got Talent
Works a dream!
Thanks!
Thankyou for this, i copied the code accross and have the box displayed but dont seem to be able to get the image to view what have I done wrong?
In the back end, under the Child Theme Options panel, do you see the image you uploaded? If not, chances are you don’t have writing permissions for your uploads folder. To fix this try and go into your FTP client and give the uploads folder 777 permissions.
If you don’t have a FTP client you can always use Filezilla. Here’s a quick tutorial for it: Filezilla 777 Tutorial. Let me know if this worked for you!
Hi that didnt work, got a friend to have a look and there is something wrong with image uploading. He got it to work for other themes but i still can’t get it to work for thematic i have changed to a different theme for now.
Isn’t changing permissions to 777 a security risk? See this article: http://codex.wordpress.org/Changing_File_Permissions
Yes, 777 permissions are a security risk.
Some servers won’t let you upload images if you don’t have 777 permissions. This means you won’t be able to use the media gallery from Wordpress without these permissions on the /uploads folder.
Only and only on the uploads directory should receive 777 permissions.
To put it into perspective, if you can use the media gallery you will be able to use this script!
Thanks for the response, Christian. My server seems to allow more restrictive permissions, and it’s all working, so I’m leaving it at that. I did have to modify the php with the @fopen and @fclose. Hope this is ok.
Thanks for a great tool!
Can you send me your login? I can’t really tell what’s wrong without looking at the code and site. You can use the contact form to send it.
Is threaded comments available in commune? What are the upcoming features? Good job on the theme!
Yes, threaded comments are available. You just have to activate them in the Wordpress back end, in the settings tab under conversations.
Great for newbies to Wordpress, like me…got this error after paste and trying to update:
Parse error: syntax error, unexpected T_DNUMBER in /home1/menopau6/public_html/wp-content/themes/sugar_cane/functions.php on line 10
Normally this code should have worked out of the box.
From what I can see you’re using the Sugar Cane Child Theme. It already has php code inside it’s functions.php file so try and check that all the
Ah! I tried to do this and it didn’t work… Now can’t even get to the page to fix it!
Keeps saying: Parse error: syntax error, unexpected $end in /home/alexisgrant/alexisgrant.com/travelblog/wp-content/themes/thematic/functions.php on line 42
Help!
Maybe something broken under the new WP 2.8 update? I modified functions.php, successfully loaded a header image, then got the following on logging out (and now I get this on login, and can’t get to the Admin/Dashboard page:
Warning: Cannot modify header information – headers already sent by (output started at /homepages/3/d94931308/htdocs/populardelusions/wp-content/themes/thematic/functions.php:91) in /homepages/3/d94931308/htdocs/populardelusions/wp-login.php on line 287
Warning: Cannot modify header information – headers already sent by (output started at /homepages/3/d94931308/htdocs/populardelusions/wp-content/themes/thematic/functions.php:91) in /homepages/3/d94931308/htdocs/populardelusions/wp-login.php on line 299
Warning: Cannot modify header information – headers already sent by (output started at /homepages/3/d94931308/htdocs/populardelusions/wp-content/themes/thematic/functions.php:91) in /homepages/3/d94931308/htdocs/populardelusions/wp-includes/pluggable.php on line 671
Warning: Cannot modify header information – headers already sent by (output started at /homepages/3/d94931308/htdocs/populardelusions/wp-content/themes/thematic/functions.php:91) in /homepages/3/d94931308/htdocs/populardelusions/wp-includes/pluggable.php on line 672
Warning: Cannot modify header information – headers already sent by (output started at /homepages/3/d94931308/htdocs/populardelusions/wp-content/themes/thematic/functions.php:91) in /homepages/3/d94931308/htdocs/populardelusions/wp-includes/pluggable.php on line 673
Warning: Cannot modify header information – headers already sent by (output started at /homepages/3/d94931308/htdocs/populardelusions/wp-content/themes/thematic/functions.php:91) in /homepages/3/d94931308/htdocs/populardelusions/wp-includes/pluggable.php on line 865
Check out to see if at the end of the functions.php file after the last php closing tag “?>” there aren’t any spaces or characters. That’s probably the reason the header information error is appearing.
Doh! You’re right!
Hey,.. I’d been trying to figure this out for an hour,.. a simple vacant line (line18) in functions.php was all I needed to delete…works perfect now (setting up RSS feed). Thanks Cristi
@Alexis Grant – Check out this article about the php error you’re having: http://www.mydigitallife.info/2006/04/23/php-parse-error-syntax-error-unexpected-end/ Might give you a clue why the error is appearing.
hi, i’m having the same problem as “melissa” (june 19th) – and working in thematic. i can’t seem to get an image to upload. nothing displays for “Current image:” and nothing shows up on the blog. i have tried redoing everything from scratch several times, and also made sure the uploads folder was given 777 permissions. can you explain to me how you resolved this problem?
thanks!
wu
Unfortunately we didn’t resolve the issue. I don’t know what the problem could be and I would need access to your wordpress account and to the ftp to debug this. If you can send this info over my contact form I can have a look tomorrow !
Yeah, I am having a problem with the actual display of the header as well. I may be missing something simple here, but it seems that the “adding the logo image to header” section is not executing, though I am not getting any errors. I can upload fine (directory is 777), the image is actually displayed in the Child Options section, but no go on the site itself. Actually, there is one weird thing, for some reason on the child theme options page, my logo is displayed at the top (where you actually upload the logo), but the basic default (Kubric) header is displayed underneath that under “Customize Header”..I am guessing that is not supposed to be like that?
Nevermind, I am an idiot..well actually my excuse is that it is late (early?) here..I did not actually finish creating a full child theme..I will work on this some more tomorrow.
Thanks! I had to make a small change to get it to work on Vista with PHP 5.
The fread did not work so I replaced it with file_get_contents. The code is below for those interested. I commented out unused code.
Thanks for the code!
if($file_type==”image/gif” || $file_type==”image/jpeg” || $file_type==”image/pjpeg” || $file_type==”image/png”){
/*$length=filesize($temp_file);*/
$fd = fopen($temp_file,’rb’);
$file_content=file_get_contents($temp_file);
/*$file_content=fread($fd, $length);*/
fclose($fd);
Cool! Thanks for the contribution!
Indeed file_get_contents() saves a lot of lines. You don’t need the other two lines either… drop the two lines for fopen() and fclose() as well. file_get_contents() does it all, and more efficiently (no need to go get the filesize first, for example).
thanks for the code. it works great. but i’m wondering if there is a way to make the logo centered once i upload the image.
You need to style the div with the id ‘logo-image’ like this
#logo-image{
text-align:center;
}
This code you have to add into your child theme’s style.css
Also to make it fit perfectly you can play with css padding like so
#logo-image{
padding:10px 20px 0px 50px;
}
Hope this helps!
Greetings Cristi: The code worked perfectly… until I logged out. I got the white screen of death when I logged back in. I deleted the header code from functions.php and was able to get back to my dashboard.
I’ve made sure there are no characters after the php closing tag. I’m using WP 2.8.2. Is there a way to fix this?
OK, I got this to work today. Last night at midnight, I kept trying this and was ready to pull my hair out. Then this morning, I suddenly thought – “hey, he doesn’t say where to add the code.” I had been trying to stick it where I thought it should go (with absolutely no knowledge of why it might go there!) This morning, I just put it at the beginning and it works! You Rock!
The only thing is that it will only accept my .gif file that has a white background. It won’t accept the transparant .gif and it won’t accept a .gif with a colored background to match the background of my header. What .gives with this? Why will it only accept the gif with the white background?
Thanks!
I’ve tested it with a transparent gif and a transparent png and it works just fine! Can you please check to see if you saved the gif correctly?
You’re right. No idea why it’s working now. I tried it several times before and I’m doing nothing differently. I always save for web & devices via either photoshop or Illustrator. Been doing this a very long time.
Thanks so much for your help! Can’t tell you how much I appreciate it. Please let me know if I can do something for you guys.
I’m glad you sorted that out!
As for what you can do for us? Just spreading the word about our themes or send a friend or colleague that needs custom web-design to us that would be great! Just don’t send them in the next two weeks as we’re off in vacation!
Thank you, this is a good tip.
I have manually added img alt attributes and a titles to my functions.php but this can be fairly easily added as an option (or alternatively could call the blog description to use as alt?). Img alt attributes assist people who may not be able to see your images for a variety of reasons.
You’re absolutely right. Thank you for the idea!
Works well. Thanks for the tip.
thank you for the excellent code sharing! i successfully added my logo with the above function, but there is a huge amount of white space that appears above it on the page. how can i get rid of this?
thanks!
Hi Cristi,
Thank you for the code – I created the child theme and then added the code to functions.php, and began getting this error immediately after saving:
Parse error: syntax error, unexpected T_DNUMBER in /home/reddwarf/public_html/wp-content/themes/thematic/functions.php on line 3
I can no longer access my theme editor – it just pops up with the same error. I have the most up to date version of Wordpress. Any help would be appreciated!
Were did you add the text? Inside thematic functions.php or inside your Child theme functions.php?
If inside Thematic, delete and reupload Thematic. If not, connect to the FTP, download the functions.php file, empty it, and upload it back to your child theme. The problem is a syntax error (meaning you forgot a ‘;’ or didn’t put the < ? php ? > tags correctly).
I added the text within my Child Theme functions.php – thank you for the speedy response! I’ll follow your suggestion and let you know how it goes.
Thanks for the help. I added a logo to the header and used the style.css to edit the location.
Thanks.
Are you aware that your solution doesn’t work with Thematic 0.9.5.1? Any idea as to how I can make it work?
I am using a custom theme and had no problems with the logo. Will try it out using Thematic 0.9.5.1 and let you know what I find.
Sorry, I was talking about the general header image solution using the child theme described on this page. It’s not working with the latest Thematic version.
I will try to see if I can duplicate the problem you are having. What is the site you are working on? I will try to help out when I get some free time.
Hi Cristi,
I am keen to use a child theme options page for other things, any ideas where I could get some info. Eg I have a custom homepage with a youtube vid. I want to make it easy to change without rewriting the .php code. A simple text box where I can put the embed code would be great, any info would greatly help.
Phil
Hi,
Have a look here:
http://wordpresstheming.com/2009/10/thematic-theme-options-panel/
It explains how to build a more comprehensive admin panel. You can use the code from the Google Analytics, just change the title and the placing of where it’s displayed inside the theme!
thanks Cristi
@phi you do not need to modify the php to embed a youtube video. WP has plugins for it too.
Thanks! Works like a dream.
Is there an easy way to just replace the blog name with the image and leave the slogan under it?
I’m thinking that I might like to change the slogan every now and then. It would be so much easier to keep it as plain text and not add it to the header image.
Sure. Just comment out the line:
add_action(‘init’,'remove_thematic_blogdescription’);
You will now have the blog description under the logo.
Editing the CSS should work too if you just want to move the logo and/or description around.
As you’ll see at my website, there is nothing but an error message. I really messed up. Can you help me figure out how to fix my problem?
Parse error: syntax error, unexpected T_DNUMBER in D:\Hosting\3056829\html\wp-content\themes\thematicpowerblog\functions.php on line 198
I popped the code into the Theme Function file in the Theme editor of my wordpress dashboard. It wouldn’t update and gave this error. So, I took the code back out and tried updating and everything is gone with only this error in it’s place.
I appreciate the help!
Alright, for some reason, the added code was still in the .php file on GoDaddy. I removed it there and have my site back.
I’ve tried replacing the original code with this code in the wordpress dashboard, but it reverts back if I try to update. I plugged it in directly at GoDaddy where I’m hosted and it came back with the same error only on line 3. I removed the code.
I’m using Thematic PowerBlog. Any ideas why this isn’t working?
Got it now. Had to take out the top <?php. Geesh.
@Diana could be a GoDaddy issue. I had a similar one too a while back.
Thanks for getting back to me. I fiddled within the style sheet and got an image in and still have the title and description under it. It works for now.
Off to the next problem. After all of this, now my browser and flash image uploaders both say: The uploaded file could not be moved to D:\Hosting\3056829\html/wp-content/uploads/2009/12.
Yuk, if it’s not one thing it’s another. Maybe you have an article on that? I’ll look.
I don’t really have any idea why that error is there. Again I think it’s something to do with your hosting.
You can post this error on the new forums here on cozmoslabs.
This way if we found the source of the error more people will see the solution!
@Diana have you tried to move the files manually? That might resolve the issue or help in getting to the bottom of it.
I believe I started another topic somewhere on here. I am able to upload images to my server, I think I can manually enter the html to put them in my pages and posts, not sure yet, but I found by searching around that there seems to be a problem. 2.8.5 Unrestricted File Upload Arbitrary PHP Code Execution has made my files accessible to whatever may have written into them.
Thanks for your reply.
@Diana have you tried switching to WP 2.8.6? It has some cool new features.
yes, I’m all better now. Still needed some more help, but it’s all good. I’ll have time to check out the new features now that I’m over the image upload problem.
Thanks
@Diana I am glad you managed to solve the problem. Feel free to ask anything in here. The WP community is a great one to be part of.
Hi – Excellent article and header programming… thanks.
Hey, you and Christi could probably win the Thematic Filters and Hooks contest here:
http://themeshaper.com/forums/topic/contest-best-thematic-filters-038-hooks
Cook up a good one, and good luck!
- Scott
Cool! I’ll try and cook something up!
@Scott I am sure they will win it hands down too.
Thanks Ed, I can see that there is much to learn and this feels like a good place to be.
This is a great site to learn @Diana. You have come to the right place for sure.
I cant figure this out.
I downloaded the thematic theme. I followed the instructions on this video to create a child theme: http://www.youtube.com/watch?v=ofK1O20PAJM
I copied the code above in the functions file in the child theme.
the child theme is not coming up on the left menu under appearance.
Thanks in advance for your help.
Sorry cannot be of much help as I have not tried this myself
I created the child theme folder. I opened the functions.php file and I have the following code:
‘Home’,
// ’sort_column’ => ‘menu_order’,
// ‘menu_class’ => ‘menu’,
// ‘echo’ => true
// );
// return $args;
//}
//add_filter(‘wp_page_menu_args’,'childtheme_menu_args’);
?>
where do I add the code listed above in this blog in functions.php
i appreciate all the help/.
This is the code I have in functions.php
‘Home’,
// ’sort_column’ => ‘menu_order’,
// ‘menu_class’ => ‘menu’,
// ‘echo’ => true
// );
// return $args;
//}
//add_filter(‘wp_page_menu_args’,'childtheme_menu_args’);
?>
where does the code in above post in the blog goes?
I resolved the issue above…:)
I was able to succesfully add the child theme folder.
Now, when I try to upload the Logo, I get the following error:
Warning: fopen(/tmp/phpTsOaIP) [function.fopen]: failed to open stream: Success in /home/content/a/b/e/aberrad/html/wp-content/themes/Thematic Child Theme/functions.php on line 24
Warning: fclose(): supplied argument is not a valid stream resource in /home/content/a/b/e/aberrad/html/wp-content/themes/Thematic Child Theme/functions.php on line 26
@Amine what version of WP are you on? Seems like an internal conflict of some sort in there.
I’m using the latest version of wordpress.
Thanks Ed for looking into this.
I deleted the thematic theme and the child theme. I reinstalled everything from scratch and I’m still getting the same errors. I think the problem is either in the code above or maybe something that has to do with my godaddy hosting account.
@Amine it could be in the code then or certain upgrades done to WP could be causing it too. I use Go Daddy too so do not see a reason there.
@Amine also try copying and pasting from a .txt page. This way you might pick up any extra fomatting code.
I just tried that and I still have the same error. The day this works, i’m gonna throw a party.
Has to do something with the code most probably.
TO THE ADMINS WHO WROTE THIS PAGE:
I think its best if you delete this page since your code is not working. I have been trying this for days with no luck….:)
Sorry Amine to take so long to answer you. I’ve been away on a short vacation.
What you’re experiencing is that your server isn’t allowing for your image to be uploaded.
Try and put @ in front of fopen and fclose like so:
@fopen
@fclose
It’s a long shot but it might work.
@ed @critsian@scott
Thanks very much for your input.
I added @fopen and @fclose and the good news is the error does not pop up anymore. The bad news is the image is still not there…:)
As you can see from the website using internet explorer, the image is trying to show up but there is an X.
http://www.isearchbankhomes.com
I’m using godaddy hosting account and I set up the uploads folder to writing permission.
Hello Armine -
There is no need to delete this post. I have used the supplied code and tested it at a couple of installations, and it works fine. It has worked fine on both WP 2.8.6, and also now on version 2.9. If it works well on other sites, Armine, that means the problem may lie with your hosting set-up, how your L-A-M-P stack is configured, or even a tiny bit of code — just one character — accidentally deleted. Best of luck with it
- Scott
@Amine it could be your hosting setup or a kink somewhere in the code. Try it on a different computer and see if it works out.
One Trackback
[...] Add a Header Image to Thematic the Easy Way [...]