How to add WordPress anchor links ?

What actually are anchor links in WordPress?  Have you been in a situation when you found something on the website but you had to scroll the page down very long to find the necessary heading? For example, Google offered you a page because it contains the information on your search requests but the necessary segment is at the bottom. We’re pretty sure you do not like to read the whole article just for several paragraphs.

At the same time, there are a lot of pages with a table of contents at the top. You are able to click on the necessary heading and drop down to the required section. It’s because of WordPress anchor links which allow setting a link for a specific paragraph or text fragment.

If you are a website owner, you will definitely try to avoid long texts without a table of contents. Unless you risk losing some of your visitors. Not the best contemplation, isn’t it?

In the article, we will tell you more about WordPress anchor links and why it’s better to use them on your website. Also, we will provide a detailed guide on how to install anchor links on your WordPress website. You can also buy a VPS WordPress Hosting on WPoven at Just $66.63, also get free premium themes and plugins.

Using Classic Editor

If you still use a Classic Editor on your WordPress website, the only way to use anchor links is to use an HTML editor. Despite it is a bit more difficult than with visual editor, there are some advantages:

  • the HTML code is cleaner as a visual composer often adds a lot of unnecessary code:
  • you are able to use any third-party code editor like Visual Studio Code, Atom, Sublime Text which is much more convenient than built-in WordPress code editor, and then just copy and paste the code;
  • own HTML code will let implement the custom design.

So, how can you build an anchor link manually with HTML code? It is possible using an HTML code mode of the Classic Editor. To switch to Text mode, just click the button in the top right corner.

Classic editor dashboard for anchor links

Let’s assume that we have a second-level header <h2>What is anchor link?</h2> and for quick access to this header, we need to put an anchor at the beginning of the article. For this purpose, to the given heading, we need to create an identifier (id). How will it look like?

Here, header1 is an anchor identifier (invisible for you), What is anchor link? is the text of the header (visible part). Next, at the beginning of the text or anywhere where it is reasonable, create the link to this anchor. How will it look like?

 

Classic editor for anchor links

Now, when you click on this link, you will jump right to this header. Theoretically, you are able to add unlimited amount of anchor links. However, be reasonable. In some cases, it is much better to divide the text into several pages rather than post a huge longread.

At the same time, if you prefer visual editor, you can do it in a few clicks using both Gutenberg Editor. Let’s see how you can do that.

Using Gutenberg Editor

This is a new default text editor in WordPress begin from version 5. It has a bit unusual user interface, so a lot of users cannot use it comfortably yet. Anyways, it’s great and provides powerful formatting capabilities. Now, let’s see how you can add an anchor link using Gutenberg editor.

Step 1 : Open the Gutenberg editor and select the header you want to use as an anchor link. Click the Advanced button on the right-side panel and write the name of this section in the HTML Anchor field. This is the destination anchor.

Using Classic Editor

Step 2 : Go back to the Gutenberg editor and create a table of contents or a summary of the sections you want to link.

Classic editor dashboard

Step 3 : Then highlight one after another, click on the link button in the editor menu and insert the anchor name with # in the beginning. For example, #header. Don’t forget to apply changes.

Add Anchor Link on WordPress Manually

What about WordPress link to anchor on another page? It is not a problem. You also have to highlight text fragment and add a link. But instead of adding just the anchor ID, add the full address. For example, https://website.com#anchor.

TinyMCE Advanced

Anchor Links using plugins

Pricing: Free.

Download: https://wordpress.org/plugins/tinymce-advanced/ 

Rating: 4.5 / 5

One of the most popular WordPress plugins for text formatting and anchor links. It includes advanced features and a lot of additional plugins in TinyMCE, a visual editor in WordPress, so it’s much more than just an anchor link plugin.

The TinyMCE Advanced plugin will extend the standard features that are available in the WordPress visual editor. You will be able to add, remove or organize buttons on the toolbar. Up to four lines of buttons are available. Among the new features, you will be available to change the font family and size, text color, background color, adding and editing tables — this is not yet a complete list of features of this plugin.

The plugin itself consists of fifteen plugins, depending on the buttons selected, they are automatically enabled/blocked. This plugin can also add some parameters, saving paragraph tags in the editor and importing CSS classes in the style.css editor.

TinyMCE Advanced dashboard

Some other features:

  • With the plugin, you can create and edit tables directly in the editor.
  • Insert different types of lists.
  • Search and replace function without leaving the editor.
  • Custom installation of fonts as well as font sizes.

How to add an anchor using TinyMCE Advanced WordPress Plugin?

Step 1 : Select the text or header to link, click the Insert button on the visual editor toolbar, and create an ID. If your website uses Gutenberg, add Classic Paragraph to be able to use TinyMCE Advanced.

TinyMCE wordpress plugin

Step 2 : In the top of the page or any convenient section, create a table of contents or a summary of the sections you want to link.

Step 3 : Highlight one after another, click on the link button in the editor menu and insert the anchor name with # in the beginning. For example, #header. Don’t forget to apply changes.

TinyMCE Advanced header

Easy Table of Contents

Easy Table of Contents

Pricing: free.

Download: https://wordpress.org/plugins/easy-table-of-contents/

Rating: 4.5/5

A convenient, user-friendly plugin that allows you to insert a table of contents into your messages, pages and customizable message types in automatic mode. We highly recommend it.

Easy Table of Contents WordPress plugin dashboard

Features

After installing the plugin, it is available for configuration. In the settings, you can:

  • Automatically create a table of contents for your messages, pages, and custom message types by analyzing its contents for headers.
  • Enable pages and/or messages. Custom message types are supported as long as their contents are displayed with the_content() template tag.
  • Automatically add a table of contents to the pages of the site if you configure it accordingly.
  • Provides a variety of convenient and clear settings for when and where to insert the table of contents.
  • There are many options to customize the design of the inserted table of contents: different themes, changing font sizes, the location of the table of contents. It is possible to create your own themes by selecting your own colors.
  • Multiple formats of the list’s markers: no markers, decimal, Roman and other.
  • In the settings, you can choose whether or not to display the table of contents in a tree-like hierarchical structure.
  • You can disable the table of contents on the selected headings.
  • The plugin supports smooth scrolling.
  • Selectively enable or disable the table of contents in a message by mail.
  • You can filter the header types (h1-h6) that will be shown in the table of contents.

Thus, in just a few clicks, you’ll have links in a place where and how you want. In addition, you can customize more details, such as header label, table position, switching type, and more.

CM Table of Contents

CM table of content

Pricing: very limited free version, $29 for 2 sites, $59 for 5 sites.

Download: https://wordpress.org/plugins/cm-table-of-content/

Rating: 3.5/5

This WordPress table of contents plugin allows users to create a table of contents that can be added to any page or post on your WordPress website. The plug-in allows you to create a multi-level customizable table of contents, only in a paid version. In the free version, the settings are extremely limited and simplified to a minimum.

CM tables of content

In the settings you can:

  • Include a table of contents only in articles and pages, excluding archives and the main page of the site.
  • Change the header of the content module.
  • Set the tags to be shown in the table of contents: h1-h6, set their CSS classes and unique IDs.
  • Specify the size of headings in the table of contents.

This plugin allows creating the table of contents automatically.

Summary

There are several possible ways to create anchor links on your WordPress website. You can both do it manually or install easy-to-use plugins.

If you have used any plugin that we might have missed, or have any other method to add Anchor links to WordPress sites, please feel free to share it with us below in the comments.

2 Replies to “How to add WordPress anchor links ?”

  1. Pingback: Your guide to adding WordPress anchor links | World of WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *