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">
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</<?php echo $heading_tag; ?>>
Replace it with:
<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');?>" />
</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:
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!