Skip navigation

Don’t Get Rid of Your Home Link: How to Add a Home Link

I’m finding a new trend in web page design which removes the “home” link or button. Here is an example of how frustrating it is.

I’ve found a delightful blog post. I’m thrilled with the content and want to learn more about what else is on the blog and who is blogging this prize example brilliant wit and wisdom. Unfortunately, they don’t have much of a sidebar with links to recent or related posts, nor to their About Page or other bio or contact information clearly in evidence. So I click on the title of their blog up in the header to go to their “home” page to see if there are links there that will provide more information.

Nothing happens.

I move my mouse around the top of the page and nothing turns into a link over the name of their blog or pretty graphic. Nothing. I check the sidebar again for something that says “home” in a link. Nothing. I scroll down to the bottom of the page to the footer. There must be a home link there! Nothing.

I’m forced to edit the blog URL to remove the post link info to get to the root in order to get to the front page of the blog.

This stinks.

If you do not provide a “home link” in the sidebar or footer of your blog, please, make your blog header clickable.

There are many ways to do this.

Making Your Blog Header Clickable

To make the title of your blog header clickable, make the heading a link:

<h1>
<a href="http://www.example.com/" title="My Blog Title">My Blog Title</a>
</h1>

In WordPress Themes, you can put the link around a template tag which automatically generates the title of the blog in the header.php template file:

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

To make the entire header clickable, including the title text and graphics, there are a variety of techniques.

You can make the whole thing clickable by putting the link around all of the code, as found in many WordPress Themes:

<div id="header">
 <a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo('name'); ?>">
   <div id="headerimg">
     <h1><?php bloginfo('name'); ?></h1>
<div class="description">
   <?php bloginfo('description'); ?>
</div>
    </div>
  </a>
</div>

You can use a little script inside of the DIV tag to make it clickable, though I don’t believe this works in every browser.

<div id="header" onclick="location.href='http://example.com/';" style="cursor: pointer;">

Many of today’s blogs don’t use text in the title. They use a graphic to represent the “title” of the blog. You can replace the text with a graphic, such as:

<div id="header">
  <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>">
     <img src="headergraphic.gif" alt=" " />
  </a>
</div>

You might want to keep the blog title and/or description, so it is visible for those who don’t use CSS and read your blog with a web page reader for the visually impaired or disabled, but not visible for your web page design. You can make these be present but not "visible" by using the CSS style: display:none, and/or a few other CSS tricks.

On this blog, I’m using the Sandbox WordPress Theme. I have no editing access to the Theme’s template files. I can only control the look of the blog through the CSS styles. I needed to make the blog title and description “disappear” while making the header area represented by a graphic (the “Lorelle on WordPress” logo) in the background, which I explain in more detail in Creating a Clickable Header in Your WordPress Theme. Below is a summary of the technique.

When you put an image into the background of an HTML container, it has no shape in your browser. The shape and size is controlled by the stylesheet and the size of the container it resides within. There is no physical image to wrap a link around. I needed to change the CSS styles to create a space for the link to reside.

The HTML code is similar to the code shown above:

<div id="header">
   <h1 id="blog-title">
<a href="<?php echo get_settings('home'); ?>/" title="<?php bloginfo('name') ?>">
   <?php bloginfo('name') ?>
</a></h1>
   <div id="blog-description">
      <?php bloginfo('description'); ?>
   </div>
</div>

In the stylesheet code below, using display:none, I made the blog description "disappear". To make the blog title invisible, I made the color of the blog title link match the background color of the background area, and set the H1 tag aligned to the right and only 1pt high, which is very tiny. It’s there, readable by the visually impaired and search engines which ignore stylesheets.

The logo is buried in the background of the body tag. To create the “space” for the link to my home page, I had to shape and size the “link” in the header area with CSS, setting the height and width of the link in the header area.

body {
     background-image:url('/files/2006/08/headerart.jpg');
     background-position:top left;
     background-repeat:no-repeat;
     background-color:#005771;...}
#header { height:150px; }
h1 { font-size:1pt; 
     text-align:right; }
#blog-description { display:none; }
#blog-title, #blog-title a { color:#005771;
     background-color:transparent; }
#blog-title a { position:absolute;
     left:15px;
     top:6px;
     width:800px;
     height:150px; }

The height and width of the link in the blog-title anchor (link) sets the size of the link area, relative to the 150px height of the header DIV. When you move your mouse over the header on this blog, the area where it recognizes the link fits within the anchor height and width, even though, theoretically, there isn’t anything there.

Adding a Home Link

If your WordPress Theme is lacking a “home” link, a link that will take the visitor back to the front page of your blog, then you need to add one.

Home links can be added to your blog header, sidebar, or footer, though the most common place tends to be in the WordPress Theme sidebar. To add a Home link to your sidebar, edit your sidebar.php template file.

Here is an example that includes a variety of links you can mix and match for your blog (with or without permalinks), including:

  • A link to your home page (index.php).
  • A link to a specific category of posts you might want to feature.
  • A link to an external blog, such as another blog of yours or a favorite blog you recommend.
  • A link to a specific post (or Page) you may want to feature.
  • A list of links to your blog Pages (like About, Contact, etc.) which does not include category IDs for 2, 6 and 4, nor subPages. The list of Pages is in ID menu order and does not feature the description in the title nor a title for the list.

<ul id="pageslist">
<li><a href="/index.php" title="Home Page">Home</a></li>
<li><a href="/index.php?cat=7" title="Category Something">Specific Category Link</a></li>
<li><a href="http://example2.com/&#034; title="Another Blog">Another Blog Link</a></li>
<li><a href="http://example.com/a-blog-post&#034; title="A specific post on your blog">A Blog Post Title</a></li>
<?php wp_list_pages('exclude=2, 6, 4&depth=1&use_desc_for_title=0&sort_column=menu_order&title_li='); ?>
</ul>


To display the list in your header or footer in a single row rather than a bulleted list, you can use the following CS styles in your stylesheet, adjusting the padding and margins to your preference:

#pageslist ul {list-style-type: none;
	list-style-image:none;
	margin:0; }
#pageslist li { display: inline; 
	padding: 0px 5px;}

Your Home link can be added to a drop down or dynamic menu or anywhere on your blog. The look of the link is styled through the stylesheet, so it can easily be incorporated where you need it.

home linkYou might want to turn your Home link into a clickable button featured somewhere on your blog’s web page design such as in the header, sidebar or footer. To do so, create the button with a graphics program, or through one of the different button or badges online tools listed in Buttons, Bows and Badges for Your Blog. Save the graphic in your WordPress Theme folder on your blog. Use the graphic in your link and add it to the appropriate template file such as header.php or footer.php or in the sidebar template file.

It might look like this:

<a href="/index.php" title="Home Page">
<img src="homelink.gif" alt="Click for Home Page" />
</a>

Offering visitors a chance to visit your home page not only takes them to your most recent posts, but gets them to a starting point. If your WordPress Theme doesn’t feature a sidebar, make sure they can get “home” through your clickable header. Give them a place to start, and who knows what they might find when they start to look around on your blog.

For more information on headers, header art, and clickable headers, see the article, Designing Headers in the , online tutorials section.

Related Articles


Site Search Tags: , , , , , , , , , , , , , , , , , , , ,
Copyright Lorelle VanFossen, member of the 9Rules Network Feed on Lorelle on WordPress Subscribe

Member of the 9Rules Blogging Network

32 Comments

  1. Posted March 22, 2007 at 9:04 am | Permalink

    Great point indeed Lorelle. I haven’t noticed it myself as I make it a point to include a Home link or make the site header clickable.

  2. Posted March 23, 2007 at 4:38 am | Permalink

    Thanks for putting this up. There is nothing more frustrating than wandering around a site and then realising that there is no way to get back to the beginning. Or, as I did last night, hitting a 404 page which says “stick around and look at our other content”, but gives you no way to get off the page.

    I have, on a number of occasions, refused to keep browsing and simply closed the page. I do that when I hit a front page written in Flash, too. I need to lie down now.

  3. Posted March 25, 2007 at 10:16 pm | Permalink

    I never did figure out why people remove the home link. How do they expect you to get back to the top?

  4. Posted March 27, 2007 at 3:02 am | Permalink

    I’ve never figured out why anyone would want to make their site even less accessible. This is just a common sense thing, I’d think, but its more common than one thinks. I’ve noticed that sites which have sub-sites sometimes do this too, cutting you off from the rest (like a town site). Why???

  5. Peter Lurie
    Posted May 16, 2007 at 7:50 am | Permalink

    Hi Lorelle!
    Thanks for your incredible site!

    How does this article apply if one is using Widgets? As I understand, if you use a Widget, then it overrides the sidebar.php file. I want to have a Home or Start Link in my Meta Widget. How does one add this?

    Thanks
    Peter

  6. Posted June 6, 2007 at 2:27 am | Permalink

    Peter, I’m having the same problem as you. How can I get the “Pages” widget that comes default with WordPress Widgets to include a “Home” link? By default, it does not have one, and I’m not sure where the code is to change it.

  7. Posted August 5, 2007 at 11:05 am | Permalink

    Thank you so much for this, I was ripping my hair out trying to work out how to add a home link to my navigation menu.

    Andy

  8. xiaozhuli
    Posted September 16, 2007 at 7:57 pm | Permalink

    I’m a bit lost here… I’m trying to make my header clickable but I can’t figure which method I’m supposed to use.

    I’m using a theme I heavily modified and I hid the original text (display: none) to put my own header graphic. I don’t wanna bother you and paste the whole header.php here (I’m not that bad ! ;-) though !

  9. Posted September 16, 2007 at 10:26 pm | Permalink

    Use the one that works. I know that sounds snide, but that’s the answer. If you are hiding the text, then make the link wrap around whatever you are using to replace the header text, be it graphic or whatever. One of these methods may help, though I will soon be posting another method you might try. Stay tuned.

  10. Posted September 29, 2007 at 10:46 pm | Permalink

    Nope, I’m still at it… Can’t seem to find a way which works for me. I must admit I’m a total newbie with php and it doesn’t help !

  11. Posted September 29, 2007 at 11:16 pm | Permalink

    I’m not sure I understand your question or issue, but for those who have been waiting, check out:

    Creating a Clickable Header in Your WordPress Theme

  12. Posted September 30, 2007 at 12:29 pm | Permalink

    Sorry, I’m not clear !

    Okay, here the code I think is relevant :

    <link rel=”stylesheet” …. <a title=”Correr Es Mi Destino – My New Life In Canada Under The Snow” href=”/”>

    I think my main problem comes from the fact I’m using a modified template. Originally, there were some text in the header which was clackable. But I removed it in the CSS (display: none;) and since then, everytime I try to make my header (basically the whole graphic) clickable, the text comes over the header again and is clickable.

    I’m so sorry to bother you with that but it really drives me crazy ! If you know what I mean and have a fix, I would really appreciate.

    Thanks

  13. Posted September 30, 2007 at 11:37 pm | Permalink

    It should drive you crazy. The code you posted (edited due to privacy issues and your protection) is in the head not the header of the template file. Think MC Hammer: Can’t touch this.

    Don’t touch that area unless you know what you are doing.

    Reread the instructions, step by step, and work in the header section and you might fix it the way you want it.

  14. Posted December 3, 2007 at 4:19 pm | Permalink

    I am such an amateur. About an hour ago this site linked to my blog. I went there and it’s bad news. At first it tried to open all this crapware saying I was infected with spyware. So I did a Alt/Ctl/Delete and got rid of that. It’s gone. But how do I get rid of that link to my blog? I haven’t had a malicious link before and don’t really know how to deal with it. I got rid of all the comments that were questionable last week. But this is a different challenge.

  15. Posted December 3, 2007 at 5:14 pm | Permalink

    @davidlind:

    How do you get rid of a link? Do you mean a trackback with a link in it? Or a comment with a link in it? Just delete either, if you are using WordPress, from your comments panel. It’s done. It’s not a different challenge. It’s the same. Comments and trackbacks are content. You control them. Delete it.

  16. Posted December 3, 2007 at 8:38 pm | Permalink

    Im sorry. I should have said incoming link. It’s on my stat page on my wordpress.org blog. I right click it and get nothing that would help me delete it. How do u delete one of these things?

  17. Posted December 3, 2007 at 10:51 pm | Permalink

    @davidlind:

    If it is on the statistics page of your WordPress blog, it means that it is incoming through the automatically feed information from Google Blog Search. You cannot “delete” things from your WordPress Dashboard panel like that. Just ignore it. It will soon be replaced as other links come in. You are the only one who sees this, unless you have a Plugin which displays this information on your blog.

    I would, however, report it to Google Spam Report as a malicious site/link.

  18. Posted December 4, 2007 at 6:15 pm | Permalink

    Thanks so much for your response.

  19. Posted December 6, 2007 at 12:45 pm | Permalink

    I might be a candidate for blogger’s depression now :) I talked with my contact at HostIcan and he says my wordpress.org blog was hacked. And many others could be but he doesn’t know yet. I have never experienced this before. Do these things generally get fixed pretty fast? I have just put up some cheerful holiday photos and am having a great time manufacturing keywords for the first time with wordtracker. And now I can’t post!! I’ll just try to read about the UN and political satire and forgetaboutit.

  20. Posted December 6, 2007 at 1:01 pm | Permalink

    @davidlind:

    Yikes. I’ve let the PTB know about this, but in the meantime, I recommend you follow the instructions in this post on WordPress being hacked to help you clean it up yourself. The problem is probably in the Theme, but chastise your web host for not upgrading WordPress when these security vulnerabilities were announced. This might have prevented the hacking of your Theme.

  21. Posted December 7, 2007 at 6:29 am | Permalink

    As it turns out it wasn’t a hack. I got a message from Hostican this morning telling me it was Bad Behavior exhibiting some very bad behavior.

    Bad Plugin!

    Go to your room!

  22. Posted March 6, 2009 at 7:40 am | Permalink

    Wouldn’t it be better to use the blog’s URL as the home page link?

    I was using the /index.php method and when I implemented permalinks it would not work…

    Perhaps I’m doing something wrong, but using the URL ALWAYS works.

    • Posted March 6, 2009 at 5:05 pm | Permalink

      Did I say that you shouldn’t use your blog’s URL as the home page link? I think I did. :D As for using index.php in your URl, that’s really useless and ugly. Might want to consider removing that from the permalink structure.

  23. Steven
    Posted December 12, 2009 at 8:02 pm | Permalink

    you are the awesome! now my header is dandy and clicky!

  24. Posted March 4, 2010 at 8:58 pm | Permalink

    I found a little hack that will add a link in your pages menu using a simple redirect plugin.

    It’s great because you don’t need to dig through any code to get it up and running.

  25. me
    Posted July 4, 2010 at 1:56 am | Permalink

    Hey Lorelle – this is a great point, and I came to it looking for something similar, but different. The WP blog I am working on at the moment is a client’s, and I need to change the current in header “home” link () to actually be a link to the main company site. I thought this would be super easy, but then I realized it’s in PHP… thoughts? Is this an easy fix or will I need to hire a PHP person to do it for me?
    Thanks!
    Colleen

    • Posted July 6, 2010 at 8:15 pm | Permalink

      Actually, I’ve changed my opinion on this and forgot I’d even wrote this. I no longer recommend a “home” link other than for breadcrumb navigation. I now recommend the standard of having the header clickable and making it the link to the “home” page.

  26. Posted August 3, 2010 at 8:23 am | Permalink

    Hi Lorelle,

    Good advice, I haven’t seen this page for ages, but came across it again when researching how to add a home link to the new menu functionality in wordpress 3 – WP3 doesn’t have a simple option for this, and because the wp_nav_menu function draws the as well it’s not easy to stick your own s in first.

    If you or your readers are interested, I eventually found a way to do this via the filter hooks.

  27. Posted October 13, 2011 at 6:11 am | Permalink

    Hi Lorelle, I know you wrote this a long time ago, but it remains a useful post. I *want* to have a home link and HAD one until I moved my blog – after testing it – to its permanent URL. I have managed to resolve all the URL ‘issues’ except the most important one – HOME…

    It still point to the ‘old’ test site rather than the new permanent HOME url

    I’ve gone thru the theme (IMBALANCE) forum, posted there, scoured the web and cannot find how to change this URL. Your post helped and I looked in all my php (sidebar, header, and also style.css) but maybe I was nt searching for the right thing (I searched , , looking for the ‘old’ url. Probably so simple (I am a learner-blogger) but it has defeated me so far!

    Any advice as to how I can change the URL that is ‘pointed to’?

    thanks

    Jane

  28. Posted May 30, 2013 at 6:54 pm | Permalink

    I just couldn’t depart your site before suggesting that I actually loved the standard information an individual supply on your guests? Is going to be again regularly to check out new posts


10 Trackbacks/Pingbacks

  1. More on clickable headers

    Lorelle wrote an article on headers and homelinks yesterday Don’t Get Rid of Your Home Link: How to Add a Home Link that amongst other things tells about how you can use a banner instead of plain text.
    Her approach to it might be better/ easier for y…

  2. [...] Don’t Get Rid Of You HOME Link: How To Add a HOME Link [...]

  3. [...] at Lorelle on WordPress on having a home link on your blog. This is something I have always understood, but there are [...]

  4. [...] kacrut bgt deh.. emang dasar oon.. cuma begitu doang aja gue kaga ngerti!! berkat bantuan dari website ini dan sedikit customized, berhasil deh… cuma nambahin tag href=”/index.php” [...]

  5. [...] you’ve used WordPress for any time at all and you don’t know who Lorelle on WordPress is, you need to have yourself checked out. She’s another new addition to my feed reader. [...]

  6. [...] There’s not much out there covering the issue besides a few forum posts at WordPress.org. But it’s an issue, nevertheless. I understand that the blog’s heading is supposed to link to you home page, but [...]

  7. [...] http://lorelle.wordpress.com/2007/03/22/dont-get-rid-of-your-home-link-how-to-add-a-home-link/  Ähnliche Beiträge in Vorbereitungen und Ideen am AnfangWordpress – schreiben von Beiträgen im Blog ist sehr einfachWordpress – Blogfeuer – Konzept und Gestaltung der HomepageBlog oder Homepage – Impressum – Home-Button – Kontaktformular – Sitemap – was mussWordPress Kategorien – warum keine Tags am Beginn des BlogsAdSense und Contaxe Werbung in WordPress Blogs im Einsatz [...]

  8. […] Don’t Get Rid of Your Home Link: How to Add a Home Link […]

  9. […] Don’t Get Rid of Your Home Link: How to Add a Home Link […]

  10. […] Don’t Get Rid of Your Home Link: How to Add a Home Link […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,973 other followers

%d bloggers like this: