Add “logo” to Twenty Ten WordPress

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, 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 direct upload in this tutorial.

3. Login to your cPanel, navigate to “wp-content” folder, “themes”, “twentyten”, 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”.

images folder, and upload button

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

Right click, view page source.

6. Now, login to your wordpress blog admin “dahsboard”, “appearance”, and then “Editor”.

7. Look for 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. (i said 57 instead of 47 lol!)

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

This is how your code of header.php will look like.

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 go back to dashboard/appearance/editor, 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: