In my previous post I wrote about “how-to-Create Child Theme for Twenty Eleven WordPress theme”? And in this post for Twenty Eleven Theme Customization I started with “How to Add logo in twenty eleven theme” because?Logo helps your blog to?strengthen your branding , Recognition and Authority.
Note: Before going forward you should first create child theme so that you’r theme will not loose any customization on updation.
Well by default You can only add header to your theme of Dimensions 1000 / 288 Px which looks?unprofessional. So If we can add logo to our theme then we can enhance it looks and make it professional too.
Before starting steps to add logo First Add your custom made logo to your WordPress main directory which you can add by Going to File Manager of your Web hosting or by FTP.
For Eg: If I upload a logo.gif file to main wordpress directory ?then my blog url will look like this -?www.myblogname.com/logo.gif
1:Steps to Add Logo to Twenty Eleven WordPress Theme
1. Go to WordPress Dashboard > Appearance > Header > Click Remove Header Image
Now if you will go to your blog you will see Text instead of WordPress Header Image.
2. Now you have removed the header of your blog and you need to place a New Custom made logo. For this You need to edit 2 files
- Header.php
- Style.css
Important Note: You should edit above files in the Child theme. So first make sure that you have installed child theme for your blog.
3. To edit Header.php file Go to Appearance > Editor >
Now go to line number 73 and Replace with the below lines
<hgroup>
<h1 id=”site-title”><span><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><img src=”http://www.yourblogname.com/logo.gif” alt=”YourBlogName.com” width=”416″ height=”284″ padding: 0px 0px 0px 100px; /></a></span></h1>
</hgroup>
Thats’it Your Twenty Eleven WordPress theme logo is now Visible on your blog.
Note 1 – You should change the Width and Height according to the size of your blog Logo.
Note 2 – If you feel your blog Logo is streched then You can also define the image height and width of your blog logo in Style.css file.
For this?Go to Appearance > Editor > Style.css?edit to style.css file
then add the below lines to define the area for your logo. Here try to reduce height and width as compared to the original height of your logo.
/* for height of header image*/
#branding img {
height: 115px;
width: 416px;
margin-left: 10px;
margin-top: -35px;
}Tip: You can change the above numbers according to the size and requirement of your custom made logo which you have designed for Twenty Eleven WordPress Theme.
If you have any doubt then feel free to ask.
0 Comments