Erluvi - Web Design » Blog Archive » Don?t Get Rid of Your Home Link: How to Add a Home Link

22 Mar

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 WordPress.com 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.

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/" title="Another Blog">Another Blog Link</a></li>

<li><a href="http://example.com/a-blog-post" 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.

You 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 WordPress Codex article, Designing Headers in the WordPress Lessons, online tutorials section.