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 (in red) 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 red code is the spaces between the links 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.
Customize WordPress WordPress Guide WordPress themeIf you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
Tagged with Customize WordPress, WordPress Guide, WordPress theme
Related Posts
