Add a Custom Title or Image Logo to your WordPress Theme

Now that you have installed WordPress on the web host, let’s activate the twenty twelve theme and start customizing it. Why twenty twelve? Because it’s plain, simple and easy to customize. To activate twenty twelve, go in the WordPress administrator dashboard (yoursite.com/wp-admin) and open appearance>themes. Click the activate button on the twenty twelve theme and the theme is activated.

Using this theme we are going to learn different customizations in the upcoming articles but for now let’s just change the logo of our website.

Doing it the easy way

Twenty twelve provides a customize button to change the title and description of the website. It’s right under Themes in Appearance tab.

Some themes allow us to upload an image logo to replace the title and description. Twenty Twelve doesn’t provide that option. Now if we wish to have an image logo then we’ll have to get our hands dirty by touching the theme files.

Note that, you should always create a child theme before messing up with the default theme. I’ll talk about child themes in the next post but for now I’ll just go ahead and edit the files in the default theme.

If you’re wondering why you should always use a child theme instead of a default WP theme then here’s a one liner answer for you – Whatever changes you make to the files present in the default WP theme will be undone and replaced by default files when WordPress is updated.

[space]

Getting our hands dirty

As I said above, use this method only after creating child theme or all your changes will be undone with a WordPress update.

First create a image logo and upload it to your server using WP dashboard > Media. Once you upload it there, get the link to your image file and proceed to the next step.

The link to the logo I’m going to use is given below:

http://thecuriousengineer.org/wlab/wp-content/uploads/2014/04/wlablogo.png

Go to WP dashboard > Appearance > Editor. Now that you’re in the editor, you’ll find all the theme files listed on the very right side of your screen. Open the header.php file by clicking on it. This file contains all the important information which runs almost every page on your WordPress website. Now we’ll try and add an image logo manually.

Find the site-title text in this document using CTRL+F and simply comment out the text inside <hgroup> markup tags as shown below:

[pre]<hgroup>
<!–
<h1><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a></h1>
<h2><?php bloginfo( ‘description’ ); ?></h2>
–>
</hgroup>[/pre]

Now go ahead and add an image tag just below the comment and just above the closing </hgroup> tag.

I’ll use the following code with the image link given above:

[pre]<img src=”http://thecuriousengineer.org/wlab/wp-content/uploads/2014/04/wlablogo.png” width=”500px” />[/pre]

And save the file. This will give the following results:

That’s all in this post. We’ll see some more customizations in the upcoming posts and also we’ll see how to create a child theme.