WordPress has made navigation easy; they have even included an option in the wordpress admin panel called menus. With navigation getting personalized it is pretty easy now for the wordpress user to browse the key areas of the site easily. However, this navigation is for the entire site – what if you want to navigate the post or reach a specific area of the post more easily and quickly?
This is something that I recently saw while searching for something specific. The post that came up on the search results contained too much information; however it also had a quick navigation option. I used that option to reach that part of the page that I was looking for. Problem solved, and a happy end user – but how to implement this for our own sites?
So, presenting the step-by-step guide to create a hash tag based quick navigation option to reach the specific areas in the current post. To do this, am going to use this article – Glamping, that I wrote some time back and applied the quick navigation coding to it.
WordPress Hash Tag Post Navigation
1) Write a well formatted long post using sub-headings – If your post is short and is not properly divided into sub-headings then making a quick navigation option for it is useless. So, try writing a longer post, rather than making a few posts on a similar topic, try adding those small posts and make it a one long guide which will be an authority resource on the niche.
2) Use h2 for headings – This way you can provide a separate sub heading for each different segment of the post. We will use these headings in the quick navigation panel so that your readers can reach these headings quickly.
3) Use a notepad – It is available in the start – all programs – accessories, in case you don’t use it much. Write down all the sub-headings – h2 tags, in the notepad. It will look like this:
What is Glamping?
What is glamping at a festival?
Glamping Vs. Camping
This text will be linked with Ids that will be connected to the h2 tags of the post. The hash tag links will look like this:
4) Open the post in the code option of wordpress. While editing and writing a post in wordpress, it gives two options. Visual and Html. Click on the html so that you can see the code. In the content where the h2 heading tags are, start adding an id to it. For example, where it says – h2 in code before What is Glamping? – Just make it – h2 id=”What-is-Glamping”.
This way, you have just given this h2 tag of the post an id. So, whenever the id=”What-is-Glamping” is called with a # hash tag link, it will take us to the part of the post where that specific heading belongs.
5) Now link the items in the quick navigation menu with hash tags. For example, the first item is – What is Glamping. Link it with #What-is-Glamping. And the active link will take us to the part of the post where the heading – “what is glamping” – is kept.
Note: The link should open on the same page. If the option of opening the link in a new window is selected, it won’t work.
That is all. Now to test this – we have one h2 on this page, and it is available just above the points – “WordPress Hash Tag Post Navigation”. Click on it now and see if it takes you to the top of the post.
This hash tag navigation menu is very much search engine friendly. In Google search results, these hash tag links are directly linked to the specific locations on the post, thus making the same post available for multiple search queries which improves traffic.