Chris Pearson has just released a new version of Thesis Theme, there are a few new and excited features being added. But the fundamental is still the same. The theme has been designed in such a way that it is very flexible and easy in customization.
In this post, I’m going to show you how to add logo in the header of Thesis Theme. By default, Thesis Theme is displaying blog title and tagline in the header. It’s rather ugly and you can make a change to your blog in order for it to stand out from the crowd.
Here are the 3 steps you can easily follow.
#1: Open custom_functions.php
Open custom_functions.php file using any text editor of your choice. The file is located at thesiscustom folder. This file is purposely for you to customize Thesis Theme without touching the core file.
#2 Adding Header Action Hook
Add the following line of code just below <?php in the file. It is adding a hook function custom_image_header to the thesis_hook_header section.
add_action('thesis_hook_header', 'custom_image_header');#3 Creating Header Function
This is the most important step, creating customized header function. The following code should be added to the custom_functions.php file just below add_action code shown in step 2.
function custom_image_header() {
?>
<p id="logo"><a href="<?php bloginfo('url'); ?>"><img src="<?php echo '' . get_option('upload_url_path') . '/bh-logo.png'; ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>"/></a></p>
<?php
}<p id="logo"> It tells you that this paragraph is logo, which is defined in css.
<a href="<?php bloginfo('url'); ?>"> This is the make the logo header as clickable link.
<img src="<?php echo '' . get_option('upload_url_path') . '/bh-logo.png'; ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>"/> This code is responsible for the displaying of header logo. You can change bh-logo.png to the correct logo filename that is uploaded to your uploads folder.
Finally you can see the result in the image file below or you can scroll up to the top and take a look at my header section.
Conclusion
Same as the footer customization and attribution link removal, header customization made easy with the use of hooks. You can refer to Thesis user guide for more information about theme customization using hooks. Enjoy!
Related Posts:
{ 1 trackback }
{ 55 comments… read them below or add one }
How can we remove the text that remains after adding the logo?
Thanks!
CM
@Chris,
You an disable the remaining text by disable the following 2 options in Thesis Options.
- Show site name in header
- Show site tagline in header
You rock brother….got it licked now. Thanks!
I followed each step, but the image is still not showing in the header. Where should the picture be uploaded to on my server?
@Kelsey,
The picture should be uploaded to uploads folder. You can configure your uploads folder in Settings->Miscellaneous.
Here is the example of the settings:
Store uploads in this folder: wp-content/uploads
Full URL path to files: http://www.example.com/wp-content/uploads
How do you maintain the the Title and Tagline on the left and place the logo on the right side at the same level of the Title and Tagline.
I tried your code and the Picture/Logo displays at the bottom of the Title and Tagline.
@John,
There are some tricks to do this. I have emaili you the code. Please let me know if you have issue.
Hi,
really appreciate the blog post but I must be doing something wrong:
You did not clarify what happens to the final } however I understand it should appear like this:
function custom_bookmark_links() {
global $post;
?>
<a rel=”nofollow” href=”http://delicious.com/save?url=&title=” onclick=”window.open(‘http://delicious.com/save?v=5&noui&jump=close&url=&title=’, ‘delicious’, ‘toolbar=no,width=550,height=550′); return false;” title=”Bookmark this post on del.icio.us”>Bookmark this article on Delicious
add_action(‘thesis_hook_header’, ‘custom_image_header’);
<a href=”"><img src=”" alt=”" title=”"/>
<?php
}
Were flipVideoLogo.jpg is then that is the file in the location uploads, however I have to create this folder since it did not exist, is that correct?
Thanks
Azzam
Hi,
Lets fix that mess in the above comments with the right coding:
/**
* function custom_bookmark_links() - outputs an HTML list of bookmarking links
* NOTE: This only works when called from inside the WordPress loop!
* SECOND NOTE: This is really just a sample function to show you how to use custom functions!
*
* @since 1.0
* @global object $post
*/
function custom_bookmark_links() {
global $post;
?>
<a rel="nofollow" href="http://delicious.com/save?url=&title=" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url=&title=', 'delicious', 'toolbar=no,width=550,height=550'); return false;" title="Bookmark this post on del.icio.us">Bookmark this article on Delicious
add_action('thesis_hook_header', 'custom_image_header');
function custom_image_header() {
?>
<a href=""><img src="" alt="" title=""/>
<?php
}
Were flipVideoLogo.jpg is then that is the file in the location uploads, however I have to create this folder since it did not exist, is that correct?
Thanks
Azzam
@Video Flip Review,
Here is the right coding.
/*** function custom_bookmark_links() - outputs an HTML list of bookmarking links
* NOTE: This only works when called from inside the WordPress loop!
* SECOND NOTE: This is really just a sample function to show you how to use custom functions!
*
* @since 1.0
* @global object $post
*/
add_action(’thesis_hook_header’, ‘custom_image_header’);
function custom_image_header() {
?>
...
< ?php
}
function custom_bookmark_links() {
global $post;
?>
...
< ?php
}
Did not work for me again.
I got double display of the text version of the logo.
Should I modify the . get_option(‘upload_url_path’) and insert the actual upload position.
How to add the backgroun colour like you have done to yours?
@Azzam,
I don’t quite understand your issue about ‘double display of the logo’. Could you show me your example, code or screen capture? I think it will be better for me to prepare a blog post to show you how to change the background color some day next week.
Thanks for the great post.
This worked for me on the home page but not on the other pages – any ideas?
@Adrian,
Do you configure the following in your Settings->Miscellaneous?
Store uploads in this folder: wp-content/uploads
Full URL path to files: http://www.bloghighlight.com/wp-content/uploads
@Bey Luen
Yes – I have set the uploads folder as you suggested. Any other ideas?
@Adrian,
I have sent you an email for an alternative solution.
Hi Bey,
I have added the code and I get the “double” thing azzam talked about – see http://www.ecojaunt.com
I have verified the seeting in the misc is correct and the header file is there:
http://www.ecojaunt.com/wp-content/uploads/EcoJauntBlogLogo.jpg
Here is my code I added:
add_action(‘thesis_hook_header’, ‘custom_image_header’);
function custom_image_header() {
?>
<a href=”"><img src=”" alt=”" title=”"/>
<?php
}
Help would be appreciated. Thanks,
@David,
In the Thesis Options, you need to disable the display of title and tagline to prevent ‘double’ thing. I also notice that you logo doesn’t get displayed. You can use another alternative by changing the img tag to the following.
img src=”http://www.ecojaunt.com/wp-content/uploads/EcoJauntBlogLogo.jpg”
Bey – Thanks, got it working. What size is the header that is normal – WxH in pixels? I can t find it anywhere.
@David,
Great to hear that. The logo size I’m using is 440 * 75 (width * height).
i seem to be getting a large chunk of whitespace under my logo, is there any way i can get rid of this?
@alex,
Any screenshot or website that I can take a look?
Hi Ben,
What would be the normal size of a header (not logo) for the area for the settings of the blog as Page framework and not Full-width framework
thanks
Azzam
@Azzam,
There is no fixed answer for the size of a header. It depends on your header design and whether your readers accept it or not. If you need something for reference, you can take a look at my blog’s header as I’m using Page framework.
thanks for this tutorial !!!
how can i add a google adsense picture 486 * 60 i think in the header
is this possible ???
Hi,
Excellent instructions on how to add a logo in the header of the thesis theme!
Thanks for the help with this! Worked great!
How did you get the twitter/RSS/Email icons in the header?
If you have some time, a post about that would be great!
Thanks
Hi Bey,
The tutorial worked well! …thanks for your help!
I just had one question about spacing. How would I decrease the amount of white space (or margins) above and below the logo?
Thank you kindly for your help, it’s greatly appreciated!
Ben,
can you tell me how to size an image in a header, so that it remains constant, relevant to page size.
Graham Gallagher.
How do you make the logo centered in the header box on the page? Right now, my logo is showing up in the header box justified to the left.
Bob
hi there,
all done but logo header not appears..
here is a code:
function custom_bookmark_links() {
global $post;
?>
<a rel=”nofollow” href=”http://delicious.com/save?url=&title=” onclick=”window.open(‘http://delicious.com/save?v=5&noui&jump=close&url=&title=’, ‘delicious’, ‘toolbar=no,width=550,height=550′); return false;” title=”Bookmark this post on del.icio.us”>Bookmark this article on Delicious
<a href=”"><img src=”" alt=”" title=”"/>
<?php
}
}
where i kept initial logo name for now.
any ideas?
thanks
Great tutorial, thanks. How did you add the RSS feed and Twitter icons in your header?
Great article! I changed the logo but I lost the blog’s title and description. Any idea how to bring it back?
http://icelandportal.com
Bloody Brilliant Post. 2 secs and I was up and running. Love the work!
Thanks Ben – so far so good
One thing is that my header logo doesn’t fit the space of the header area. Can I resize this area, failing that do you know how can I center my logo in the header space?
Cheers
Hi Bey Luen
I follow your code above but it did not work. I want to replace the blog title with a logo (jpg file)
add_action(‘thesis_hook_header’, ‘custom_image_header’);
function custom_image_header() {
?>
<a href=”"><img src=”" alt=”" title=”"/>
<?php
}
Can you take a look at my site and advise what steps did I miss ?
Thanks
Desmond
Somehow my blog title and tagline keep apearing on the blog, with my logo under it.
How do I remove the tilte and tagline?
I just added this to my code: add_action(‘thesis_hook_header’, ‘custom_image_header’);
Thanks for the help,
Emiel
function custom_bookmark_links() {
global $post;
?>
<a rel="nofollow" href="http://delicious.com/save?url=&title=" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url=&title=', 'delicious', 'toolbar=no,width=550,height=550'); return false;" title="Bookmark this post on del.icio.us">Bookmark this article on Delicious
<a href=""><img src="" alt="" title=""/>
<?php
}
/* Header Display Above Nav */
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');
add_action('thesis_hook_header', 'custom_image_header');
I’m encountering two issues:
1. How do I center that logo I’ve just added?
or
2. How do I remove the box from around my logo without removing it from all other images on my site?
You can click on my username to see the site I’m referring to.
Thanks in advance for your help.
Doesnt work with Thesis 1.5.1??
Worked with 1.4.x but now on 1.5.1 code doesnt work!
Thanks for the amazing code!
Another unrelated question, what plugin gives you the three icons in the top right? Or the yellow box at the end of the post?
thanks now i can change my header to something different, this is exactly what i was looking for
I was trying to put my adsense code instead of an image. But it didn’t work. Do you know what would be the solution for this? I’m also trying to figure how to put google adsense in between the title and content of each post. Let me know if you know where to find this tutorials or if you know how to do it.
Gustavo
I am working on a site that is not on the root directory. http://www.leapdontlook.com/atlantanutrition.com. I cannot get the code to work after trying many configurations. Here is what I have at the lastest:
/* Custom Header Image */
add_action(‘thesis_hook_header’, ‘custom_image_header’);
function custom_image_header() {
?>
<img src=”http://www.leapdontlook.com/public_html/atlantanutrition/wp-content/uploads/food_genie_logo.jpg” alt=”" title=”"/>
<?php
}
I uploaded my image to the wp-content/uploads folder. Now what I get it the blog title twice.
Thanks for your attention to this.
I got the header part down but how do you move the Title text so it is not overlapped by the header? Like how could you move the title text below or above the image header?
I liked the way you have customized your thesis; simple but powerful. I will soon self-host and will use the Thesis.
Can you tell me the font size and the name of the font you are using in contents and comments. Thanks. I am following this blog now.
it is not working..
Simple and clear! Thank you very much brother !!
)))))
Hi, I followed your instructions, but the logo image comes out above the menu bar, instead of below it. How can I position the logo image to be below the menu bar and above the tagline, like your site does.
grat post…
hey there.. i have the same cuestion.. can u please.. send me the same mail?
tnk u…
John 03.17.09 at 10:53 am
How do you maintain the the Title and Tagline on the left and place the logo on the right side at the same level of the Title and Tagline.
I tried your code and the Picture/Logo displays at the bottom of the Title and Tagline.
7 Bey Luen 03.17.09 at 12:09 pm
@John,
There are some tricks to do this. I have emaili you the code. Please let me know if you have issue.
Hello , Thanks for all your mods .
I have added logo to my website successfully . Now i want to add my website’s tagline below the logo image just as your website’s Tagline !
Help me
Hi,
Thanks for the tutorial, by the way,
how to add the RSS, email, tweets stuff with all those links like yours in header??
if found your header is very eye-catchy and all the good stuff like social networking goes first before the content, nice idea!
John 03.17.09 at 10:53 am
How do you maintain the the Title and Tagline on the left and place the logo on the right side at the same level of the Title and Tagline.
hi..regarding your reply as above>>
can you send me the same thing that you sent to him??
i found your header is so brilliant!
Thank you
Thanks, finally its done. But there are few important concern, where your help will be apreciated:
- How to remove the white space surrounding the logo
- How you put tagline below the logo
- How to put twitter and subcribe button on the right in the same level of logo
- Is it possible to put category navbar below logo
You can check the page www dot equitycalling dot com where I am doing it
Hi,
I am completely new to Thesis, and no nothing about html.
I followed your instructions on how to add a logo in thesis theme header.
There appears a box with an x on my website, so i think the settings for a logo are there but somehow it does not link to my actual logo.
With an FTP program I uploaded my picture to this file: /public_html/wordpress/wp-content/uploads, the name of my logo is citizenwinesupply.png, and citizenwinesupply.png i put into custom.functions.php.
I hope you can help me
This is the full code I have in custom.functions.php
<a href=”"><img src=”" alt=”" title=”"/>
<a rel=”nofollow” href=”http://delicious.com/save?url=&title=” onclick=”window.open(‘http://delicious.com/save?v=5&noui&jump=close&url=&title=’, ‘delicious’, ‘toolbar=no,width=550,height=550′); return false;” title=”Bookmark this post on del.icio.us”>Bookmark this article on Delicious
<?php
}
This helped, but the highlighting has got to go…
Thanks for the info. ~J
Thanks for this. This helped me out in fixing my thesis theme. Logos are vitally important for me.