The Daily Grind

How to add a custom logo to the free Titan theme for WordPress

Customise your blog and save yourself some cash in the process.

NOTE: I NO LONGER USE THE TITAN THEME ON MY BLOG BUT THIS ARTICLE IS STILL CORRECT.

I decided that the default text heading on the free version of the Titan theme for my WordPress blog was too boring. So by putting my limited CSS knowledge to the test I succeeded in replacing it with a logo which I threw together in Photoshop.

Even if you don’t use the Titan theme some of this information may guide you in editing other WordPress themes as well.

The beauty of this method is that it still retains the heading tags <h1> and text in the source code which is good for SEO but hides it off screen so that it doesn’t interfere with your picture.

Below is the image that I used:

So sit tight and follow these six simple steps and you will be on your way to custom WordPress image logo goodness and save yourself $70 in the process. The creator’s of the Titan theme offer a Pro version of the theme on their website which includes a feature to upload your own logo image, but as mentioned earlier you will do yourself out of $70.00 for something that can quite easily be achieved for free in about 5 minutes.

Step One: Create and upload a logo image to WordPress

To begin obviously you will need to create a logo or image that you want to place at the top of your blog. I will leave this step up to you, I made mine in Photoshop.

You will need to upload the image on to the world wide internets, in my case I uploaded it into my Media library within WordPress. The direct link to the image is: http://daily-grind.net/wp-content/uploads/2010/08/DailyGrind.jpg.

Step Two: Open up your WordPress Editor

Inside the admin interface of your WordPress blog you will need to open up the Editor which you can find under the Appearance section in the left hand navigation column. (Pictured left)

Step Three: Open up the header.php file in the Editor

On the right hand side of the page under the Template section scan down and find the ‘Header (header.php)’ link and click on it. This will open the file up in the editor. You are now ready to start editing the code.

Step Four: Modify the header.php file

Now for the fun part. Scroll down through all the code in the header.php file until you find this section:

<?php if (is_home()) echo( ‘<h1 id=”title”>’); else echo( ‘<div id=”title”>’);?><a href=”<?php bloginfo( ‘url’); ?>”><?php bloginfo( ‘name’); ?></a><?php if (is_home()) echo( ‘</h1>’); else echo( ‘</div>’); ?></div>

You will find it about three quarters of the way down the page.

Step Five: Hide the default text and add your image

Once you have found the correct block of code you will need to modify it to look like the following. Note that the modifications I have highlighted in green text and the parts that you will need to change with your own details are in bold, the original code remains black.

<div class=”logo”>
<a href=”<?php bloginfo(‘url’);?>”>
<img src=”http://yourwebsite.com/linkto/logoimage.jpg” alt=”Your website name” /></a>
</div>

<div class=”indentTitle”>

<?php if (is_home()) echo( ‘<h1 id=”title”>’); else echo( ‘<div id=”title”>’);?><a href=”<?php bloginfo( ‘url’); ?>”><?php bloginfo( ‘name’); ?></a><?php if (is_home()) echo( ‘</h1>’); else echo( ‘</div>’); ?>

</div>

Once you have made these changes press the ‘Update File‘ button at the bottom.

Step Six: Modify the Cascading Style Sheet (CSS)

If you look at your blog now it will be a bit of a mess! The image will be sitting on the right side of the header and the original text will still be visible so you need to change the stylesheet. In the right hand column of the Editor under templates, scroll to the bottom and select the ‘Stylesheet (style.css)’ file. This part is relatively easy, you will be adding two lines of code.

Scroll down until you find this code:

.alignleft { float: left; }
.alignright { float: right; }

Underneath that code you need to add these two line:

.logo { float:left; }
.indentTitle { text-indent:-9999px; }

The final result should look like this: (Modifications in green)

.alignleft { float: left; }
.alignright { float: right; }
.logo { float:left; }
.indentTitle { text-indent:-9999px; }

Click on ‘Update File‘ button and you should be all done!

Reference Images

I have included two screenshots of my header.php and style.css files so you can see the whole picture.

I hope this has been some help and thanks for reading…

Thanks for reading and happy blogging!

Tags: banner, blogging, branding, custom, custom blog designs, customise, customise wordpress, designs, diy themes, gif, how to, image, jpg, logo, marketing, money, picture, png, pro, save money, theme, theme foundry, theme wp, titan, wordpress, wp, wp template