1. says

    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…

    • says

      @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!

  2. RozaniGhani says

    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.

    • says

      @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 :D

  3. says

    i’ve Already added a logo to my personal blog.. :D

    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.. :D

    thank you Kimi, nice blog anyway.. :)

    • says

      @spydeeyk, hello there. Yeah, that sounds weird that it didn’t work.

      But i am glad you found another way, thumbs up!

  4. Peter says

    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 :-)

    • says

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

      • says

        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!!!

  5. says

    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;
    clear: both;
    display: block;

      • says

        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,

        • says

          @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 website, and paste back to our theme file :)

          Thanks again for your great input, and have a fab day!

  6. Deepak G says

    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

    • says

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

  7. Deepak G says

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

  8. mike says

    Excellent tutorial, just what I needed and worked perfectly, Many Thanks and keep up the good work.

  9. says

    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?

    • says

      @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 :)

  10. Alan says

    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.

    • says

      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.


      • Alan says

        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.



        • says

          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:)

  11. Bradley says

    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:

    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,

    • says

      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.

      • Bradley says

        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:

        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?

        • says


          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!

      • Bradley says

        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,

  12. says

    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.

    • says

      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!

  13. says

    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

    • says

      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.

  14. says

    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

  15. Hiral Patel says

    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.

    • says

      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,


  16. Lee says

    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?

  17. George says

    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!

    • says

      Hi George,

      Replace the php code inside the <a href="" to your own link.

      Example your link:


      <a href="">

      I hope this helps..

  18. George says

    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!!

  19. says


    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!!



  20. says

    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!

  21. Vir-Cotto says

    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.

  22. says

    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.

    • says

      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.

      • says

        That didn’t show up for some reason…maybe it is evaluating it as code…but anyway just replace

        bloginfo (‘template_directory’)


        bloginfo (‘stylesheet_directory’)

  23. says

    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.

  24. says

    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.

  25. says

    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!

  26. says


    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!

  27. mike says

    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.

  28. Freshman says

    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. :-)

    • says

      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


  29. Nuwan says

    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.


  30. says

    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.

  31. Clara says

    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.

  32. Lanea says

    This tutorial and video was so extremely helpful! I will definitely be coming back to your site! Thank you!

  33. says

    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.


  34. james morgan says

    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.

  35. says

    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!!!