Search

Add a Custom Title or Image Logo to your WordPress Theme

Listen to this article

Custom Site Logo and TitleNow 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.

Changing Theme Appearance Settings

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:

Custom Logo and Title

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.

Omkar Bhagat

Omkar Bhagat

5 Responses

  1. Omkar,

    I only have a css editor available in my Appearance menu (before installing Jetpack I had none). Is that the editor I am to use? If so I do not see the header.php file…where do I find it? Thank you.

    1. Hi Jeanne,

      In Appearance there should be an ‘Editor’ menu using which you will be able to edit the header.php file. Go to Appearance>Editor> (select theme you want to edit)> Header

  2. I have tried and tried to make your code work but all I end up with where I want the image is a little rectangular box with a black square inside with a white x inside of it. I successfully commented out the original title and description with (it took 2 hyphens to keep the closing one from displaying. I have tried swapping image types, png for jpg and the various sizes of the image that are on our remote server. I am probably missing something but I cannot figure out what. Thanks in advance for any ideas.

  3. Hi Jeanne,

    Go to the Admin Dashboard (wp-admin) and click on Appearance. And then click on Editor. Then you can find a list of files on the right hand side. One of those files will be header.php. I hope this helps 🙂

    – Omkar

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads

    WordPress Tips & Tricks
    Ketan Vyawahare

    How to Make Responsive Tables using CSS without Tag Read More »