How To 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 adding 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, anyway 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 a text widget, changing the “Blog Home” part to whatever anchor text you want.

https://gist.github.com/wpcount/a5df4667f829a1410c704390ce57c54b#file-1-php

Or you could experiment with it and paste it directly into the sidebar.php file. If you choose this option to make sure it is in an area above this code:

https://gist.github.com/wpcount/a5df4667f829a1410c704390ce57c54b#file-2-php

So your code will look like this:

https://gist.github.com/wpcount/a5df4667f829a1410c704390ce57c54b#file-3-php

You could add a background image using a simple table and specify 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 centre the “Home” link and image. Make sure you change the full image URL location so it will be visible:

https://gist.github.com/wpcount/a5df4667f829a1410c704390ce57c54b#file-4-php

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:

https://gist.github.com/wpcount/a5df4667f829a1410c704390ce57c54b#file-5-php

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 the 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:

https://gist.github.com/wpcount/a5df4667f829a1410c704390ce57c54b#file-6-php

The places to add this or other links to your WordPress blog are only limited by 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.