How to Make Anchor Links in WordPress (Guides in Details)

How to Make Anchor Links in WordPress posts and page is a common question that ask many beginners. And, of course, I think creating anchor links in long WordPress posts or pages is a good practice for a better user experience. If your post or content is made lengthy, then the readers will not be able to comprehend it without browsing over it. On the other hand, if you mention important subheadings in the first part of your post or page, then the readers may guess some clues about your content without spending much time. It saves time and accrues eagerness in the mind of the visitors. That is why some anchor links. Being a link it has also significance in Search Engine Optimisation(SEO). Anchor links are generally enlisted and put inside a paragraph box containing a heading which is called Table of Contents or Page of Contents. Table of Contents(TOC) is simply placed at the end of the last para of the H1 heading and before the first H2 heading.

Table of Contents:

• What Is Anchor Link?
• Where to Place Anchor Links?
• How to Make Anchor Links Manually for Post or Page?
• Writhe H1 Heading as Usual
• Write the Subsequent Subheadings
• Choose a Particular Block
• Go to the Advanced Tab and Locate the HTML Anchor
• HTML Anchor as Heading Attribute
• Features of HTML Anchor
• Make HTML Anchor( Anchor Tag)
• Add Anchors to Make Anchor links
• How to Add Anchor Links Automatically to a Post’s Subheadings?

What Is Anchor Link?

An anchor link is a specific text that contains a link attached to a specific block or section of content. An anchor link contains a particular and unique identifier (anchor) that when clicked leads to the particular section to which it is linked. These are generally grouped in a table that is generally called a Table of Contents( TOC). Anchor links are also called page jump tags. It helps the visitors reach the desired section of the post or page without searching the whole content. A tabulated page of content contains many anchor tags which provide a lot of information both to the readers and to the search engines. It improves on-page SEO.

Where to Place Anchor Links?

You can place the set of anchor links anywhere in the post or page of your content. But most bloggers like to place it( the set of anchor links) at the end of the content of the H1 heading and before the beginning of the H2 heading. But before placing the set of anchor tags you should choose a block( as shown below).

Choose a block like a Paragraph or List.

So, first of all, write the H1 heading or the title of the post or page you are going to write now. Write some words as an introduction to your post conveying important information regarding your content. After the completion of this para, you can prepare a Table of Contents(TOC). Here the TOC contains linked texts interlinked to h2,h3,h4,h5 and h6 subheadings within the post. You can create a Table of Contents either at first or at last—-no matter whatever you like. But as per my choice, first of all, write the post or content of your page completely, then write the Page of Contents(POC). It will be more convenient and user-friendly for you as you can directly copy the subheadings and paste them into the Table of Contents. No need to write. It will save your time and labour. Furthermore, you can put these linkable texts as per your choice. If you do not like this, then you can create a Table of Content last.

How to Make Anchor Links Manually for Post or Page?

You can create anchor links for WordPress posts, pages or contents as per your choice. Some years ago when plugins were not available, people used to make anchor links manually. Even now, too, you can make anchor links manually though there are many plugins to make a table of contents by inserting anchor links automatically. In order to create anchor tags, you have to follow some steps that I have pointed out below in detail. No need to worry. You, too, can make jump tags for your post. So, just follow the instructions.

Writhe H1 Heading as Usual

As usual, the method, write the H1 heading that is called the post title. It conveys important ideas about your post. By looking at this the readers can guess about your contents at a glance. The anchor links have no relation to the post title. So, write whatever title you want. However, choose a proper title so that it becomes appealing, meaningful and consistent with your post.

Now write some content below the H1 heading. This content may serve as an introduction to your post. So, write some important sentences and leave blank the space below or add a paragraph there and leave it blank where you can put a Table of Contents that contains certain anchor links attached to some particular subheadings serving as destinations of linked texts.

Write the Subsequent Subheadings

Now write the subsequent subheadings by choosing a block and add contents as you like. In order to choose a particular block click on the

add block icon located on the horizontal bar of your Block Editor on your windows. Now choose the heading block as encircled below in the picture. Write a subheading in a block and add contents to it.

Keep in mind that if your post title begins with the H1 heading, then the subsequent heading will be in H2. Similarly, write as many blocks as you need, write contents thereto and also add other subsequent blocks like h3, h4, h5 or h6 if you feel required.

Choose a Particular Block

In order to create anchor links, you should choose a particular block containing a subheading like h2, h3……….h6 etc. Suppose you have written 7 subheadings in h2 format. Here you ought to choose each block one by one to make anchor tags. So, first of all, put your cursor on the subheading or the block on which the subheading is located. Now go to the upper right corner of your Block Editor and you will see the Settings Icon as given below:

After clicking on the settings icon you can see various editing options such as Typography, Colour Settings, Text Settings, Advanced tab etc. Look at the following screenshot for more clarification.

If you could not see the Advanced option, then check whether the other editing options are open or closed. If the other options like typography, text settings, drop cap or colour settings are open, then close these and scroll down along the scroll bar until you reach the Advanced tab.

If you are working with a mobile device, the picture may appear like this. Generally, on the mobile device, you will not be able to see the Advanced option at the first chance if the Typography option remains open or expanded. So, in order to find out this option close the Typography as shown below and you will be able to locate the Advanced tab.

Go to the Advanced Tab and Locate the HTML Anchor

So far, you have reached the Settings menu and looked at the various editing tabs under it. Now you need to go to the Advanced tab. So, come down until you reach the Advanced tab. Now click on it to expand the tab.

After expanding the tab it will look like this. The blank white box is a given space called the HTML Anchor Field where you can make HTML Anchors or Anchor tags for inserting the id attribute to a particular block heading or a section.

HTML Anchor as Heading Attribute

HTML Anchor works for different sections, headings or paragraphs. But in most cases, anchor tags are created to link to a heading of a section or a block. An anchor tag serves as a heading attribute or as a unique id to a particular heading to which it is created and needs to be attached to. Owing to this unique feature when someone clicks on an anchor text properly hyperlinked leads the user to that section to which it has been interlinked. That’s why you must add a particular anchor ( also called HTML Anchor) as a unique id to a Block or Heading for which it has been created.

Features of HTML Anchor

The HTML Anchor possesses some unique features that you should know while you are going to create anchor tags. So, read the following features attributed to HTML Anchor:

• HTML Anchor must be unique within a post.
• It is case-sensitive, namely, you have to maintain lower case and upper case both in the Advanced tab’s HTML Anchor Field

• and in the Popup to insert the Anchor link that is opened by clicking on the Add link button. Look at the picture for more clarification.

• Write the same case of alphabets—- in both places as illustrated above.
• HTML Anchor may include hyphen(-), colon(:), period(.) and underscore(_). It will not include space. So, don’t give space while creating anchors in the anchor field.
• HTML Anchor must start in the alphabet.
• Some links do not work if the colon is included in the anchor link.
• Try to reduce the length of the anchor to one or two words.
• Write the keywords only and no articles.
• Do not make the anchor’s length too long.
• Do not include the hash mark or pound symbol(#) before an HTML Anchor.

Make HTML Anchor( Anchor Tag)

Now let’s make Anchors for various sections. In order to make an HTML Anchor for a particular block, first of all, I chose that block, went to settings and thereafter I went to the Advanced tab and expanded it to write the following anchors.

Now you can see that each HTML Anchor is unique within this post. In another word, each section, block or block heading will be given a unique Anchor and the same Anchor should not be used for more than one block as it works as a heading attribute or unique id.

Add Anchors to Make Anchor links

You have seen that so far I have succeeded to make Anchor tags( or anchor text) against each block heading within this post and also made a table for your convenience. Now, I have to prepare texts and add links thereto by inserting the previous Anchor tags so that they become hyperlinked. If you do not attach an Anchor tag to a text it will not be linked. So, you need to make a text or copy the block heading, paste it back where you like and insert the unique Anchor tag so that browsers can find it. Follow these steps to make an Anchor link:

• Write the text where to insert the link that when clicked takes the user to the block or section to which there has been made the anchor and is now linked to.
• Select the written text.
• Inset the link therein with the Add link button from the editing toolbar.
• When you click on the Add link button it will show you a popup for inserting the link.
• Now in the provided popup, first of all, write the hash mark# and then write the HTML Anchor in the same format as written in the Advanced tab.
• Press or click Enter to save it.
• Now link has been created that you can see from the preview.

Suppose you want to insert an anchor tag to the first subheading” What is anchor link?” So, I wrote the linkable text as follows:

What is an anchor link?

Now I have to insert an anchor link in the text. So, I selected the text( shown in the picture):

Now, insert a link in the selected text. So, click on the Add link button and it will show you a Popup as follows:

In the popup, first of all, write the hash mark# and then write the unique HTML Anchor that was written in the Advanced tab. It will look as follows:

Now press the ‘Enter’ to save the link and the expected Anchor link has been made with the success that you can check from the preview option. Also, the linked text will show different colours and the linked button too will appear deep black and interweaving as shown below:

How to Add Anchor Links Automatically to a Post’s Subheadings?

Some readers asked me, “How to add anchor links automatically to a post’s subheadings? ” Indeed! it is a good question that deserves a due answer. You can add anchor links automatically to block subheadings that work as subtitles. In order to generate anchor links automatically as block subheadings, you can install and activate a plugin like Easy Table of Contents from the WordPress Plugin Directory. This is a free plugin you can use without spending money. Upon installation and activation, you can prepare anchor links automatically for your post or page.

The plugin is, by default, enabled for pages that can prepare anchor links only for pages automatically unless you make it enabled for posts too. No worry. You can make it enabled for posts too. In order to make anchor links for posts, too, check the posts option( General>>Enable Support>>Posts) as I have marked up on the Screenshot.

Now scroll down a little along the scroll bar and locate the position where you want to display the Table of Contents.

Generally, the Table of Contents(TOC) is set to be displayed before the first heading and you can see above that it has been set as default. Also, you can choose another option if you like from the alternative choices such as after the first heading, top, bottom etc.

The show when the option has many alternatives( 1,2,3,4,5,6,7,8,9,10 etc.) and you can choose any one according to your choice though it has selected 4 by default.

In the Header Label, you can write the heading for the table that contains anchor links. So, write the heading as Page of Contents or Table of Contents.

Now check the buttons Toggle View, Show Hierarchy, Counter, Smooth Scroll etc. The counter option has many options like decimal, roman, numerical or none. You choose anyone.

Besides, you can customize other options like appearance( font colour, font weight, font size), background colour, link colour, border colour, theme etc. If you do not alter the settings, then it will use the default settings automatically.

It also provides an Advanced option. Normally check all the headings as it will show hierarchy in the Table of Contents if you write subsequent headings in a hierarchical way. Also if you do not want the automatic insert of a Table of Contents for an individual post or page, then check the disable button just above the Advanced option below your post or page.

Do not check the h1 heading as it is generally left unchecked for a better look. After properly configuring the various settings click on the Save Changes button to save your work and let the plugin work as you customized.