Sooner or later you will come to the conclusion that you need to design a logo for your Wordpress tech blog. Sure you could always create the logo and then rely on a home button in the navigation bar, but why not just make the logo file you’ve created clickable? In the following tutorial I [...]
’)
Sooner or later you will come to the conclusion that you need to design a logo for your Wordpress tech blog. Sure you could always create the logo and then rely on a home button in the navigation bar, but why not just make the logo file you’ve created clickable? In the following tutorial I will show you how to create a clickable header for your own Wordpress blog based on the setup I currently use on TechBlogStartup. There are two portions to this tutorial – the CSS and the HTML code. Let’s begin with the HTML code that I use in my wordpress header.php file:
<div id=”heddiez”>
<h1><a title=”Click here to go back to the front page” href=”/”>TechBlogStartup</a></h1>
<div class=”adright”>/*google adense 728×90 banner*/</div>
</div>
For TechBlogStartup I use a logo on the left side of the page and to the right I place a 728 x 90 pixel ad unit, which in this case is a Google AdSense Unit. You can use any ad unit you’d like in the place of /*google adense 728×90 banner*/ just make sure it fits the 728 x 90 size requirement. If you would like to leave the space to the right of the logo you’ve created blank or use a logo which fills the entire width of your page then simply ignore the <div class=”adright”>/*google adsense 728×90 banner*/</div>. Now let’s take a look at the corresponding CSS
.adright {float:right; width:728px;}
#heddiez {padding: 0; margin: 0; float:left; height:90px; width: 100%; background: #fbfbfb url(‘/techblogstartup.png’) no-repeat scroll center left; overflow:hidden; position:relative;}
#heddiez h1 {height:90px; width:270px; position:absolute; top:0; left:0; text-indent:-9999px;}
#heddiez h1 a {border: 0 none; display:block; height: 100%; width:100%;}
The logo file I use has been uploaded via FTP to the root directory (/techblogstartup.png) and it has dimensions of 270 x 90 px. Since the ad unit I am using to the right of the logo is 728px wide the total width of my header is 998 pixels – if you’re width is smaller I recommend dropping to a smaller banner unit and then adjusting the .adright to reflect this width (ex. if the banner you will be using is 486px wide you would edit .adright {float:right; width:486px;}. At this point you would have additional blank space between the banner and your logo file so you might want to increase the width of your logo along with changing the width listed in #heddiez h1 to reflect this change.
How Do I Use This HTML and CSS?
Now that I’ve shown you the code that I use it’s time to implement this on your own Wordpress Blog. For the purpose of this example I am going to assume that you have not created a logo for your website. You will need some sort of image/graphic editing software in order to do so — Adobe Photoshop, Adobe Illustrator or even MS Paint. Create a new image with the dimensions of 270px wide and 90px tall. If you do not have access to any of the programs I’ve listed you could always use the Cool Text: Logo and Graphics Generator here. Once you have your logo file created to the proper dimensions you will need to save the file (remember this file name). It’s time to upload the file to the root of your web space (http://www.techblogstartup/techblogstartup.png) in either the public_html or httpdocs folder.
Now you will need to open your header.php file and look for div id = header. In the default Wordpress theme you will replace the following code with the HTML code I’ve listed above:
<div id=”header” role=”banner”>
<div id=”headerimg”>
<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<div><?php bloginfo(‘description’); ?></div>
</div>
</div>
Make sure to update the HTML code I’ve listed above to reflect the name of your website by replacing “TechBlogStartup” with your blog name. Now it’s time to edit the .css file which in the default blog scenario is called style.css. Simply copy and paste the CSS I’ve listed above. Be sure to edit #heddiez to reflect the name/file type for the logo you’ve created. Save all changes to the header.php and style.css files and now take a look at your blog. If everything worked out as planned you should have a nice clean logo with an ad unit of your choice to the right. If you have any questions on this tutorial please feel free to leave a comment below, thanks!
