Customize WordPress Theme Add Home link To Your WordPress Blog
Adding a “Home” link on your WordPress blog can be as simple as pasting some HTML code into a text widget or a theme file. Or it can get as complex as adding a navigation bar to the header. Since I am too lazy to figure out an easy way to tell you how to code and add a navigation bar this WordPress guide will take the easy route to add a home link to your WordPress Blog.
There are any number of places you can add the Home link, and for some reason people like to have these “Home” links on their blog to keep their readers sticking around. My opinion is that most people are now smart enough to navigate a website without all this help but… well any way here you go. The first place we are going to add the link is on the sidebar, now this can be as simple as copying the code I’ve provided below and pasting it into text widget, changing the “Blog Home” part to what ever anchor text you want.
a <?php if (is_home()) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>">Blog Home</a> Or you could experiment with it and paste it directly into the sidebar.php file. If you choose this option make sure it is in an area above this code:
<?php if ( function_exists('dynamic_sidebar' && dynamic_sidebar(1) ) : else : ?>So your code will look like this:
<a <?php if (is_home()) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>">Blog Home</a>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?>You could add a background image using a simple table and specifying the location of the image. Make sure the image is always going to be available and live on the internet, I highly suggest using an image you are hosting or will upload to your website. Below is a simple table to center the “Home” link and image. Make sure you change the full image URL location so it will be visible:
<div align="center">
<center>
<table border="0 width="100" height="30″>
<tr>
<td background="http://www.ImageLocation.com/Full_Path_Of_Image" width="112">
<p align="center"><a <?php if (is_home()) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>">Blog Home</a></p>
</td>
</tr>
</table>
</center>
</div>
The code above specifies no border, to add a border change the 0 to a greater number, and the size of the image is 100×30 you can change those numbers to make it bigger or smaller. The td background is the full path of the background image, to find the full path of an image using your Firefox browser simply right click the image and choose View Image and the image will show in its own URL, copy the URL in the address bar. If using Internet Explorer there isn’t that option available so stop using IE and switch to Firefox!
Other places to add a home link is in the bottom navigation on a single post. This is a bit trickier and you will need to edit the theme to do this. Most themes use a single.php file to show a single post, and most have the navigation to the next and previous posts. Some themes may use the index.php file if you don’t have a single.php file. You can also add a link to the blogs home in this area too. Before editing any files make a backup of it if you are new to editing WordPress theme files. Open the file to edit and look for the navigation code. Below I added the home link between the Previous and Next posts:
div class="navigation">
<?php previous_post_link('« %link') ?>
<a <?php if (is_home()) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>"> Blog Home</a>
<?php next_post_link('%link »') ?>
</div>
If the links are too close to each other or the side of the page you can add some space using the bit of code shown to space it out, if you want to add a little space between the links at the bottom of the page add a few hard breaks at the end of the code as shown. So the code used to add a space between the left side of the page and between the three links with a few spaces between it and the bottom of the page would look like below. The funky looking code in front of the previous post link and Home link is providing the spaces between the links, you can use several of those for more room and two hard breaks creating the space at the bottom:
<div class="navigation">
<?php previous_post_link('« %link') ?>
<a <?php if (is_home()) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>"> Blog Home</a>
<?php next_post_link('%link »') ?>
<br /> <br />
</div>
<?php else: ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php _e('Not Found'); ?></h2>
</div>
The places to add this or other links to your WordPress blog are only limited to your imagination and the time it requires to research more about editing and customizing your WordPress theme.
Notice: If you copy the code from this post and it doesn’t work try retyping the quotes “, and apostrophes ‘. If that doesn’t work then retype all of the code in a plain text editor like Notepad or directly into your template. Web browsers and WordPress have a hard time displaying code. If you look closely you can see that the quotes in this sentence are curly while those shown in the code boxes are straight.
If you liked this post, feel free to leave a comment that is relevant to the post or subscribe to the feed and get future articles delivered to your feed reader.
Sorry but due to the spamming of a few all comments are moderated and will appear when approved and all drive-by comments will be deleted!
Comments
I have a good read, thanks for the information and insights you have so provided here. I will certainly bookmark your blog for future reads. Thanks Jeff!
Reply
You can also look for the “Breadcrumbs” plug-in. This will help users and search engines find their way around your blog.
example: Home > WordPress > Hacks > How to add a navigation bar on your wordpress theme
Nicholas
Reply
Adding a home link is vital. I always want to look at the homepage of a website after I read the article to see if I want to add the rss feed to my feed reader
Reply
This is really helpful – I am quite new to all this but it is posts like this that help me learn. Thanks for posting it.
Frank Polenose.
Reply
Your post is very informative.
I cant wait to apply on my own blog.
Tks a lot !
Reply
I can see that becoming a lot of work and messing it up somehow…i’m gonna try the breadcrumb plugin before i cange anything drastic. thanks though.
Reply
Its a long process and new users of wordpress can’t do this by them selves. If you have any thing else by which we can do post that. I want to use it for my
pc walkthrough blog.
Reply
Sure thing Ram I can create all the content you want for your blog!
Its bad enough people are so lazy that they scrape the web to fill their sites but now they have the balls to request what they want!
Here is a suggestion, how about researching something on your own and writing a coherent post about it.
Reply
Great tip. It is cetainly a good idea to make sure you have a home page link on your site. Nothing worse than visiting a site and having to struggle to find your way around – people soon lose interest.
Reply
Download Setup installation tool for generating installation package for your Windows program.
Reply
Many themes have optionally added this feature. But it’s useful for someone who wants to make his own theme
Reply
i think this is a useful one. Thanks for this.
Reply
the php code is not working
Reply
Jeff Replied:
February 26th, 2009 at 6:59 pm
Look at the notice I just put on the bottom of the post. The code is in the wrong format and the characters will all need to be changed to plain text in order for the code to work.
Reply
Ken the tech Replied:
February 26th, 2009 at 8:01 pm
Jeff you’re right. It’s ok now
By the way, to have the right display for code into the blog post put the code content between the code tags.
Will be like something this:
Tell me if it’s working.
Reply
Jeff Replied:
February 26th, 2009 at 8:04 pm
Yes I am well aware of the code tags but they don’t work well for php in a WordPress post. Its working probably because I just added a plugin to handle it! You can probably copy and use the code in the post now.
I completely agree with you.The code tags don’t work well for php in a WordPress post.Anyway I appreciate your help. I reckon this information will be useful for me. Thanks, keep up your work!
Reply
I think this is a good tutorial for beginner like me…thanks a lot
Reply
Thanks for the nice tutorial.
Reply
Leave a comment
Drive-By comments will be deleted! Like "Thanks for sharing", "Nice post", or any other text that doesn't contribute to the discussion. If you ask a very specific question about your particular WordPress theme's code, it will probably be deleted. I can fix your WordPress site but for a price. If you ask a question like "Why don't my blog work right", it will be deleted. If you ask a question about your WordPress site without a leaving a link to it, it will be deleted. The point is to ask questions and or comment on the the actual content of the post, and to please use some common sense. All comments are moderated. Thank you.