One of the most frequent questions we receive on the support forum of our WordPress themes is how to add a home page to the navigation menu.
Because at least you have selected a static page as home page, you will find in the WordPress editor menu no option to add an item “Home” to your blog.
The solution is very simple, rather than search for the item in the section “Pages” or “Posts” we need to add a custom item. We select “Custom Link” and fill the choices as follows:
URL: the link of our home. It must be the root domain of our website. If you have your own domain, it will be something like http://www.midominio.com. In our case, the link is https://www.silocreativo.com. If your blog is hosted on WordPress.com (you can check what version you use here, in Spanish) it will be similar to code>http://miblog.wordpress.com
Link text: the text you want to display on your menu. You can use “Home” or any other option to tell your users that by clicking this link they will be back to the home page.
Now we just have to click on the “add menu” and locate the new item in the order you want by dragging and dropping the new box created.
An icon to return to the home
Alternatively, you can add an icon to replace the text “Home,” whenever your WordPress theme allows you. For example, in our Paulie template, which has the Font-awesome icons, we can add an icon of a house as a link to the homepage. So we occupy less, we reserve space for the other pages and add a distinctive element to our website.
To add an icon we must repeat the steps above, but instead of adding text in the “Text link” section, we add the necessary HTML for that icon. In our case, we will use the icon of the house, but it can be performed with any icon included in the subject.
Fontawesome website gives us the code for the icon of the house.
<i class="fa fa-home" aria-hidden="true"></i>And we add to the menu the new item created.
Highlight the item Home of the WordPress menu
Additionally we can have the need to highlight the new item “Home” created. To do this you can follow this tutorial to highlight the background or colour thereof by CSS.
In our case we will change the colour of the text to the new icon created. To do this following the tutorial we activate the option to add classes to the menu, and add the highlighted-menu class to the menu item we have created merging it into our home.
We can only add the CSS using the correct way to add CSS a WordPress:
.destacado-menu a {
color: #FF9800 !important;
}With this we will highlight our icon to call attention to our visitors if they want to return to the home page.
I hope these tips are helpful!
