Last Updated on
We use anchor links too frequently on our WordPress websites but get confused when someone asks about that. Anchor links can be considered as shortcuts within site.
Table of contents gives your users a basic idea about what to expect from the content. We are going to have a detailed discussion on anchor links, table of content in WordPress and how you can create anchor links and table of content in WordPress
Table of Content
Anchor links are sometimes known as jump links. When you are reading an article, sometimes few lines come in blue color, and those take you to a different page. Those are hyperlinked that take you to some other page. Anchor links are similar, but they take you to a specific area of your article or your page.
The primary purpose of using anchor link is to provide the better user experience. For example, some articles are of more than 2000 words and may contain words or terms unknown to readers. It will be helpful if the readers get to know those terms instantly. Scrolling down every time to the footer may be exhausting. Anchor links can bring them immediately to the area the information is stored. Hyperlinks surely give the reader a better experience, right?
You can create an anchor list in different ways. Such as you can do it with page builder or if you are tech savvy then you can do it with custom code. Now, we must admit page builder is a better option for those who come from a non-tech background.
One of the ways to create anchor links in WordPress is to do it manually. You have to have preliminary knowledge on HTML as you will be editing HTML in each of your posts. Let us create one anchor link so that you can understand how they work.
Create the text for your link and add a hyperlink on it as you would usually for any other link
Instead of linking it to a new URL, post, or page; you have to assign an anchor name. An anchor name could be any name you would like, but you will have to add a “#” character before the name. You can name this anything you want, although we would recommend keeping the names short and relevant.
The HTML code would look like something like this
<a href="#creating_anchor">other link</a>
Next, you will have to add an ID where you want your jump links would take you to. People would be taken to the section where the ID was written. To do this you’ll have to switch to the text view (HTML) in the WordPress editor.
Suppose, I want to move to “Step 3” of this post above whenever someone clicks “other link” text we created beforehand.
There are many plugins which support creating anchor links with plugins.
WP Anchor Header automatically adds anchored headings (H1-H6), creating a heading like this:
<h2 id="the-heading"> The Heading<a class="anchorlink dashicons-before" href="#the-heading"></a> </h2>
If you want to speed up the process of adding anchors (in this case, adding a table of content) then you may want to automate the whole process. Adding a table of contents plugin in WordPress does not increase your loading time much.
The plugin handles the whole process and outputs a beautiful table of content with proper anchors to each of the heading.
Fortunately, there is just a right plugin for that. You can take advantage of a table of contents plugin to achieve that. We are recommending Easy Table of Contents for this purpose.
Easy Table of Contents is completely free and automatically generates anchor links for your headers and lets you insert your table of contents anywhere in your post with a simple shortcode. Table of Contents plugin has more than 40,000 active installs with a 4.5 out of 5-star rating.
Installing and Configuring Easy Table of Contents Plugin
If you do not know how to install a WordPress plugin, please check out our WordPress plugin installation article. After installing and activating Easy Table of Contents, you can configure it as your preference.
You can configure different settings for the plugin. It’s pretty straightforward to configure the plugin.
The table of contents is produced from the headers found on a page. The headers are the
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>.You can choose the level of headings from the configuration menu.
- For example, if you want only the headings till H3 to show up in the table of content, you can configure the plugin.
- If you want, you can use the
[ez-toc]shortcode to manually use the table of content.
There are a lot of different ways one can add anchor links in WordPress articles. For example, we added the id in headings, some people add the ID in <a id=”tag”></a> tag. If you are publishing a lot of articles, then we would suggest using a plugin for that because you need not waste time on making the table of contents when plugins can do that automatically.
We also have to seem seen anchor links getting “jump to menus” in Google Search which helps to boost your SEO. Fast loading websites are critical in Search Engine Optimization. Check our tutorial about 10 ways to speed up your WordPress website
If you are looking to secure your WordPress website, then check our WordPress Security Guide.