How to Turn Your WordPress Blog’s Logo into a Clickable Link

Here’s a fun game for you — pick a famous website, and then go to a page on that site that isn’t the home page. Next, click the company’s logo. You will probably have noticed two things — first, that the logo is located in the upper-left corner of the page. Secondly, that when you click the logo, you’re taken back to the home page. Because this functionality is so universal, users expect it. But some WordPress themes come with a logo that’s not clickable. If you have a theme like that, here’s how to fix it.

Go to the Theme Editor

First off, log in to your admin area and go to your theme editor by clicking “Appearance” then “Editor.”

Open the Header code

WordPress themes have separate files for different sections of your site, such as the sidebar, footer, and header. The file you’re looking for is “header.php” so look that up on the list to the right and click it.

The code for your header will appear in the central editing area. Before you make changes to your site, it’s always advisable to make a backup of your existing, working code. So copy all of this code and save it to a text file on your computer.

Find the Logo Code

Open up your website in a new tab, right-click your logo and then click “view image.” Then copy the file name for this image from the URL.

Go back to the theme editor and use CRTL+F to find this file name in the code. It will be inside an “img” tag, looking something like this:

<img src="<?php echo get_template_directory_uri() ?>/images/logo.jpg” alt="logo" />

Add the Opening Link Tag

In HTML, links are created with an “a” tag, which stands for “anchor.” You wrap whatever content you want to link with an opening and closing “a” tag. The opening tag looks like this:

<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>">

The “href” part means we want the link to point to your homepage. The “title” part is just an identifier for this tag.

Paste the above code directly before the img tag you previously located.

Add the Closing Tag

You need a closing “a” tag at the end of the img tag. This tells the browser that you just want the logo to be a link, and nothing else. It looks like this:

</a>

Paste this directly after the img tag.

Save your work

The final result should look something like this:

<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/logo.jpg” alt="logo" /></a>

If you’ve got it right, click “Update File” and check the results.

Check the results

Load up your blog in a new window and check the results. You should now be able to click your link to be taken back to your homepage. If this is not the case, or if things look terribly wrong, go back to the theme editor and check your code. A single quotation mark or bracket out of place will make the whole thing go wrong, so check carefully.

If things have gone wrong, just replace your backup and try again.

Consistency

One of the key principles of usability is consistency — users expect your logo to go back to your homepage. Now that it does, your website will be a friendlier, more familiar place for your visitors.

Leave a Reply