How to replace WordPress 3.0 Twenty Ten theme title text by adding a logo image in your header and by editing header.php file, as well as the css style.
Twenty Ten is really cool default theme, but I am sure some of you want to add your own logo to your WordPress blog’s appearance. This can be done by replacing the title text with a logo image. So get your logo ready and follow the tutorial.
Here are the step by step guide.
1. First of all, create a child theme you can follow the steps in this post. Then prepare your logo. In this tutorial, I use my web6 logo which is in .png file, dimension 316×71 px, and mine is called logo.png. Save it in your desktop.
2. Next, we will upload this logo image, you can use ftp, but I use cPanel upload in this tutorial.
3. Login to your cPanel, navigate to “wp-content” folder, “themes”, “twentyten-child”, and then “images”.
Inside this “images” folder, upload your logo by clicking “upload” button in the left top. Browse to your desktop and find logo.png, click “open”.
4. Once it is uploaded to your server, we are ready to go.
5. Next step is we will view page source to understand the code, it can be done by right click anywhere in your window, and if you use firefox, choose “view page source”.
6. Now, navigate to the header.php inside the parent theme, which is “twenty ten” folder and copy it to the child theme folder, “twentyten-child”.
7. Then open header.php and copy paste the content to html editor (notepad or notepad++).
8. Look for this code on line 49 until line 52, and delete it.
<<?php echo $heading_tag; ?> id="site-title">
<span>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</span>
</<?php echo $heading_tag; ?>>
Replace it with:
<h1 id="site-title">
<span>
<a href="<?php bloginfo ('home');?>" rel="home" title="<?php bloginfo('name');?>">
<img src="<?php echo bloginfo ('template_directory');?>/images/logo.png" alt="<?php bloginfo ('name');?>" />
</a>
</span>
</h1><!--end of h1 site-title-->
8. Paste all the code back to header.php, click “update file” and refresh your blog. Logo should be displayed but it has border.
9. Next is Login to your WordPress dashboard, go to Appearance — Editor, on the drop down menu of themes, make sure it is your Twenty Ten Child folder and find style.css. Open it with notepad++, find line 32.
Delete these two lines of code:
border-top: 4px solid #000;
border-bottom: 1px solid #000;
Replace it with:
border:none;
your code should be look like in the following image.
10. Paste the code to style.css back again, “update file”. Refresh your page, and the logo should be displayed.
That’s how if you want to replace the title or add logo to twenty ten wordpress 3.0. I hope you like it!
Video tutorial:
Twenty Ten is one of the best free WordPress theme at this moment and thanks for sharing this useful information… Since all who will be installing WordPress might be sticking to Twenty ten theme…
@Harsh Agrawal, Hello 🙂
Yes, i love Twenty Ten as well, easy to customize, and it has a heck lots of new features 🙂
I notice lots of people using Twenty Ten at the moment, some of them got it cool modified.
Have a nice day Harsh!
I think you have deleted the border of image header of 940px. You should revise this tutorial. By the way, great tutorial! Thank you very much.
@RozaniGhani, Thanks for your comment!
I prefer the header without border if i have my logo on, by the way, thanks for this great input 😀
Thanks so much for taking the time to create this tutorial. Just what I needed!
@Beth, You are very welcome! I am glad that it was what you needed, thanks for commenting as well.
i’ve Already added a logo to my personal blog.. 😀
i don’t know why twentyten can’t show up the logo when i try using bloginfo(‘template_directory’); like your tutorial , so i just upload the logo via media dashboard, and give the full image url link for the logo.. 😀
thank you Kimi, nice blog anyway.. 🙂
@spydeeyk, hello there. Yeah, that sounds weird that it didn’t work.
But i am glad you found another way, thumbs up!
Thank you 🙂
@xXNelXx, You are welcome 😀
Hi thanks for the tip just what I was looking for.
Further to Rozani’s comment, I was wondering how I can add the 4px border back to the top of the header image, whilst maintaining border-none on the logo?
Thanks 🙂
@Peter, Hi there,
Adding the border to the header image back can’t be applied with the code above, because the logo and the header images are one. Changing attribute to one of them will affect the other with this code.
If we make the code above different, then it is possible, but i havent tried it yet.
Sorry for this.
Oh wow this is exactly what I need! But I do need to to add that 4px back to the top of my header and not to the logo. When you get the chance can you show us how to do that or how to add a logo without affecting the header? Thank you sooo much for your help!!!
Yes, if i have time, thanks for visiting!
Great post! Thanks!
I too would rather sacrifice the border around the header image. However, if you are unsure, just add the border:none; below the other border styles. CSS will read last style and ignore previous.
border-top: 4px solid #000;
border-bottom: 1px solid #000;
border:none;
clear: both;
display: block;
@Todd S. Jones, Hi there,
Well i added border:none above (written in the post) 😉 in the style.css file.
@Kimi,
I’m sorry, I did see that.
I was just noting that there is no need to delete the other border style code.
Just add border:none; below the other border styles. CSS follows the last instruction.
That way if someone wanted to revert back to the original style, they could just delete border:none;
Thanks again,
Todd
@Todd S. Jones, Thanks for the good idea! that or comment the css code.
Another alternative of reverting back to the previous theme files is copy the original file, which we can download from wordpress.org website, and paste back to our theme file 🙂
Thanks again for your great input, and have a fab day!
I did the same thing.. but its not working… i can see logo.png path in ‘view soure’ but logo i not displaying..please help
@Deepak G, Not sure how to help since i can’t check your url site. But do you use any cache plugins? if yes, you might want to wait a while until you see the changes.
If you follow the video or the tutorial it should work..
Now..everything is working perfectly.. can you please tell –
1.How to Increase Sidebar Spacing?
2.How to add Horizontal line in between post on Homepage?
3.How to create a box (about author box) in sidebar (Like labnol.org)..?
4.How to Highlight Post Titles in between two lines or boxes.??
I know, question are more..but you are the only one who is trying to give answers honestly..
@Deepak G,
1. What do you mean by sidebar spacing? the font? or the spacing between the content and sidebar? vertically spacing?
2,4. I have to try it first, and then i may want to make tutorial of it.
3. You can use text widget to do this, see one of my post to create about me widget with text widget.
https://www.wpvidz.com/about-me-or-about-author-in-sidebar/
Excellent tutorial, just what I needed and worked perfectly, Many Thanks and keep up the good work.
@mike, So glad it worked, yes, i checked your site:)
Good luck with your blog Mike!
Really good post, thank you. One thing I wondered about was changing the style.css file. Would it better to create a child theme and create a style sheet in there and then change the code. This way when the parent theme is updated is doesn’t affect your own changes?
@Tim, hello there,
I am just creating how to copy the theme tutorial how to copy the default theme so that we are save, incase twentyten updates.
I will publish today, afternoon time.
Thank you for the great input Tim 🙂
Dear Kimi,
thank you very much for the tutorial.
It was really very simple and helpful.
thanks again
Dear Nikhil,
You’re most welcome, i am really happy if the post can be really helpful.
Regards.
Hi Kimi
I really like your blog and the tips are fantastic and easy to understand especially as I’m a beginner to all this. I am creating my first WP site and saw your video on changing the background and adding a border, but I can’t see any post about changing the colour of the Menu bar from black and moving it as you have done above…do you have a tutorial on this?
I’m a web marketing guy and not at all technical so bless you for helping – Keep up the good work, I’m learning loads of good stuff.
Hi Alan,
No, i have no tutorial about changing color of the menu bar from black, but i might create it sometime soon, i am a little busy at the moment.
what do you mean by “moving it as you have done above..”?
Thank you for stopping by and leaving nice encouraging words.
Regards.
Hi Kimi
I was referring to your header on this site……….The menu bar on this site is displaying a lightblue background and is displaying above your header and not below as in the default Twenty Ten.
Cheers
Alan
Oh, ok 🙂
Yes, i modified neoclassical theme, i am not using twenty ten theme, but i guess i will find away to put the menu above the header.
Stay informed Alan:)
Nice little tutorial. Thanks, Leigh
Thanks!
if you work on child-theme and update the theme you lose the changes made!
Hey mic3000, you’re absolutely right.
This is why i recommend to at least make a cope before making any change, quick link: https://www.wpvidz.com/make-copy-before-modifying-twenty-ten/
Thanks for the great input!
Thanks, that’s a star tut, saved my neck! 🙂
You’re welcome, Pedro!
Thanks buddy. You are a legend!!
Thank you Kimi for your site…you have helped me alot. I was hoping you could help me a little more though.
I followed your instructions to add a logo to my twenty-ten themed wordpress website: westminsterchapelpca.ca
It looks great in IE8 and in Chrome, but I just noticed that in Firefox the image is pushed off to the site. Can you tell me how to fix that?
Thanks alot,
Brad
Hello Brad,
I have checked your site’s page source, you did it incorrect. Please watch the video again, and check the lines in header.php, you will be able to fix it.
If it does not help, let me know.
Thank you for the quick reply. I followed the tutorial again, and then double-checked what I had done and I believe I have followed it exactly. (I even reverted some changes I had made to the syle-sheet to change the padding around the logo & description).
I am afraid the issue in Firefox still exists: westminsterchapelpca.ca
Thanks for taking the time to help me…as I said, it looks great in IE8 and in Chrome…why would firefox have an issue?
Bradley,
I have checked again, and it is not in header.php file but in style.css file.
Look for this line:
#branding img {border: none;
Notice after “none” text, it should be followed by semicolon “;”
I hope this helps!
Thank you so much! It works great now. I really can’t express how much I appreciate your willingness not only to share these great tutorials and tips, but even to respond to people like me and personally help others out.
God bless you,
Brad
Bradley,
I am happy to hear! Thanks for your nice words, actually by helping others i am learning too.
Do not forget to copy twenty ten folder, in case twenty ten theme has updates, your modification will be gone, unless you do copy it.
Quick link: https://www.wpvidz.com/make-copy-before-modifying-twenty-ten/
Thanks.
Thanks you Kimi. I followed the instructions as shown in your blog. Exactly what I needed! I am glad for visiting your site. Thanks en regards from Holland.
Hello Harry,
Just checked your blog, simple but very nice logo you have!
I am glad the tutorial was helpful.
Good luck with your new blog and thanks for the nice comment, Harry!
Hi!
I just put my logo in twenty ten instead of text, but how can I remove empty space of that big header image. (as you see I want my old site inplement in wordpress, and it have to look something like this,my new wordpress is still on local comp)
thanks a lot
regards Dario
Hi Dario!
There are many ways, by putting width=”0″ and height=”0″ for the header image, but i don’t recommend it as it will slow down the site, if you don’t need the image, and it still needs time to load.
You can try it by removing this line from the header.php:
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt=""/>Hope this helps.
Hi Kimi!
It works,thanks a lot for answering
Dario
Croatia
Dario,
Awesome, happy to hear!
Kimi,
Germany.
Hi Kimi!
comunication with You is great, so I have one more question for You. In few words please tel me is it good to make child theme ( or this is whasteing of time ) for wordpress and do You know any good clear step by step tutorial of how to make it
regards
Dario
Hi Dario,
No, it does not waste your time to make twenty ten child, i am going to make tutorial anytime soon too based on this official guide from wordpress.org:
http://codex.wordpress.org/Child_Themes
However i did create a video tutorial how to copy your twenty ten folder as it will go back to default if this theme has an update. By copying twenty ten folder, you will still have your modification.
https://www.wpvidz.com/make-copy-before-modifying-twenty-ten/
I hope this helps,
Talk to you soon!
Kimi.
Excellent work.
Your each and every post are very useful.
Thanks a ton !!
Hiral Patel,
Thanks for your nice comment!
Most welcome,
Kind regards,
Kimi.
Hi Kimi,
Sorry to disturb you but i have one question.
Actually for one of my wordpress blog i used vibrant theme now what i want to do is, i want to create a webinar list and whenever user want to download that webinar it should ask for login or registration and when user will login it should redirect to the same page or else that login page should open on the same page.
now user will be created by me only.
kindly reply asap.
Thanks & Regards,
Hiral Patel.
Hi Hiral,
I honestly do not have experience in membership wordpress website. You can look for a free plugin membership or try wp membership premium plugin.
Kind regards,
Kimi.
Hi Kimi,
Thanks for your reply i will try with wp membership premium plugin.
Thanks & Regards,
Hiral Patel.
Most welcome!
I hope you will find what you are looking for, Hiral.
Kimi.
Nice post .Also have a look at this also
anewtab.com/add-logo-to-twentyten-wordpress-theme
Thanks so much! You info was very helpful and to the point. Keep up the great work!
You’re almost welcome!
Thanks for the nice comments!
Hi Kimi
I have followed your suggestion in this page to add a logo and remove the 940px picture.
Everything works fine but today I viewed through Safari and I still get the box where the head picture was with and broken pic link in the middle.
Can you help?
I have checked your site, it seems to be fine 🙂
Thanks for the help. You’r instructions are amazingly clear and easy to use.
Thanks, Joe!
By the way, I have just checked your blog, and it seems it is incorrect.
Follow the tutorial once again..I notice your header image is somehow float to the right..
Can you help me with that. I use safari and it works fine in it but with firefox it goes to the right.
Hi Joe,
Yes, I can and will, but at the moment I don’t have time..
Hi Kimi,
Thanks for what you do!!! Just ran across your site. My question is how can I hyperlink the added image to another site?
Thanks so much!
Hi George,
Replace the php code inside the
<a href=""to your own link.Example your link: myothersitelink.com
Implement:
<a href="http://myothersitelink.com">
I hope this helps..
Hi Kimi
Thanks for your quick reply. I failed to mention that I’m a total newbie. You are an amazing resource. I’m telling everyone I know about your site. THANK YOU, THANK YOU, THANK YOU!!
George!
Thanks for your kindess about telling everyone.
THANK YOU TOO!
Hi!
I’ve already changed the logo in several sites following your tutorial, thank you very much!!
Now, I’d like to do the exact same thing about the site description, in the upper right part.
It would be awesome if you could point me in the right direction in order to do that, and if not, thank you anyway, you helped me a lot!!
Pablo
Thanks!!
Hey Pablo,
I have posted video on:
https://www.wpvidz.com/twenty-ten-favicon-add-favicon-ico-in-twenty-ten-theme/
Perhaps you can implement by changing the site description with anything you like 🙂
Thanks.
Hi Kimi,
I really don’t see how this “how to change favicon” tutorial is related to how to replace the site description with a picture. I’m not very good about all this wordpress stuff 🙂
Thank you anyway, you tried to help!
Pablo
Most welcome, Pablo!
Thanks that was very helpful and easy one Keep up the good work
Thanks! This was very helpful!
It kinda works, but when you have a subpage to a mainpage that for e.g. appears in the drop-dwon navigation menu, it doesnt work for that sub-layers. No logo is displayed, its just blank. I dont know why. It should be in the loop.
Hi Kimi,
I am trying out WP as an alternative to my normal (Drupal) just to see what it is like. I have a problem that is likely a noob one that you might be able to help with.
I am applying this tutorial to a child theme, a basic one with just the style.css and header.php files copied over. Everything else is stock. I apply the changes and it looks like it is calling the header.php file from the child directory (I renamed the original in the parent directory, just to clear up any chance of confusion) but it is trying to call the image from the parent/image directory, not the child. Any thoughts? Again, this might be a noob question and maybe there is something else I have to do here. Thanks in advance if you can help.
Ok, I figured this out myself. For the benefit of anyone who may follow…
You need to point to the child directory and bloginfo (‘template_directory’) points to the parent. To point to the child replace that line with this one:
<img src="/images/logo.png” alt=”” />
Then you should be all set.
That didn’t show up for some reason…maybe it is evaluating it as code…but anyway just replace
bloginfo (‘template_directory’)
with
bloginfo (‘stylesheet_directory’)
Perfect, just what I’m looking for, thanks!
Muchas gracias, estos comentarios ayudan mucho!
Multumesc! Nu stiu cum de nu am dat mai repede de asta! 🙂
Thanks for the easy to follow tutorial. Had this working in minutes. A few people have mentioned that this method removes the border from the header image too. There’s a quick way to fix this which I haven’t seen mentioned here.
Since both the logo and the header image are in the same div you can style the the logo alone by using a first-child selector. The code below (added above the existing #branding div styles) will remove the border on the logo but leave the header image border styles intact.
#branding img:first-child
{
border: none;
}
Hope that’s helpful.
Do you know how to change the green panel in theme 687 so that I can use my business logo instead?
Hello!
Thanks for posting, it’s what I needed. I didn’t like the lines around the header pic, so I’m just glad they’re gone.
Heino
I followed your instructions to the letter and the result was such a big relief knowing that I accomplished something new and good!
Thanks so much for your generosity – my site now looks much better with a logo!
Hi,
I found great your video, helps me a lot!
I only have one question, how can I adjust the size of my logo, I just unploaded in different sizes but the only one looks fine is the 316×71 px but the logo it is huge! how can I make it smaller?
Thanks for your help!
Pablo
Mexico
hello,
all this worked well, changed banner with flash, added logo
Now I would like to have two pictures that go over the header/flash
like in jeweltreefoundation dot org
there is a diamond on top and a lotus in the right corner
can I do this in twenty ten?
I really like the original site, but I just want to use the friendly wp interface.
Hello, thanks for the tutorial. I am french and I can put a logo with looking your instruction.
Thank you!
Thank you. You really helped me a lot. Great tutorial, really nice step-by-step guidance. You even took the time to make a video. After a couple of words I recognized you must be Indonesian or Malay. 🙂
Hi there,
Glad it was a help, I really like to do it, although at the moment, I don’t really have enough time to create more updated videos.
I am an Indonesian 🙂 forever Indonesian LOL though I am currently living in Europe.
Kind regards
Kimi.
works great, thank you!
Thanks, Finally found a great tutorial. I did small change I put the direct but it didn’t show the logo.. After that uploaded logo to the Wp media gallery and used that link.
Thanks.
Thanks for this Kimi, I was trying to figure out how to do this for a while, but I followed your instructions and it worked like a charm.
I think it’s easier to use a WP theme generator that allows you to add a logo to your layout- Lubith for example. You can add an image, background color, borders, round corners, set opacity.
I Really Appreciate, It’s Very Usefull Tutorial.
Thank You.
This tutorial and video was so extremely helpful! I will definitely be coming back to your site! Thank you!
Your information was the most useful I found, thank you! I am a novice at setting up a website and never used PHP HTML CSS or any other web programming. I am from the era of DOS, Cobol and Fortran but that was a LONG time ago even before floppy disks!
Anyway, after looking at a lot of information, I figured out that most people who post tutorials forget to mention some things new users need to know:
How to find the location of the cpanel! It may seem obvious to experienced users but I was looking all over WordPress and searched WordPress forums to discover how to find cpanel.
When you said, on the web host site to navigate to wp-content, it took me over an hour to find out it was in File Manager under the files category.
Also, it also took me a long time to figure out how to find the Header.php It was confusing because my host site showed a header.php which I could open but I could not find a way to save the changes. I did a support forum search and found out it is located in a right-side menu under appearance, edit.
I don’t have a separate html editor so I saved what I cut to a Notepad, added your suggested changes, and kept my fingers crossed.
My new logo was HUGE. Again, after another search, I found out I should save the image in a smaller size.
After four hours, once I followed all the steps and hit View Page, it worked!
Thanks again – if I wasn’t for your instructions I was totally lost.
Kari
Thanks for the solution! with the help of google and you I now have my logo on my blog instead of the boring text. Why doesnt the template give you the option to replace the text with a logo….who would want just the boring text.
I followed the instructions and watched the video tutorial,
but I still cannot get my website
http://www.cpowertools.com.au to show my intended logo, instead it displays an error picture
Cheers,
Calvin
Hey Calvin,
I can see your logo..
Kimi
Thanx KIMI…got it…
Beautifull!!!…….thank you so much
Thanks alot Mate! Very nice tutorial.
OMG!!! Thank you SOOOooooo much for this!!! I spent FOREVER, as a newbie, trying to figure out how to change the site title to my logo, and this was the only thing that helped. EXCELLENT!! You are the only instructionist out there, it seems, who writes in a way that novices can understand. Everybody else’s instructions on all things webby are written with lingo that only pros understand. If you were a guy, I’d marry you! Thank you. Thank you. Thank you!!!
thanks for the article..its really awesum..now i got it…!!
thanks for the article…!!This tutorial and video was so extremely helpful! I will definitely be coming back to your site! Thank you!