How to Create Jump link or Anchor link in WordPress

Each webpage has a definite URL. We usually create link from one page to another. When clicked, a link sends you to the destination page. But In which part of that page?

Actually usual link doesn’t send us to a specific part but to default top location of a page from where we scroll down to get to different part until the end.

But what if we can create link in a page that will redirect us to a definite part of the same page or different page.

Yes, such link is Jump Link or Anchor Link. In this tutorial, we’re going to create this Jump link in the context of WordPress in reference to using CSS that can be applied freely in any site as well.

Why Jump link?

This can be essential in case of a big post with many sections. We often see sites that pose a Table of Contents at the beginning of a big post where each content (topic) covers a link to the associated section of the post (see screenshot below).

Jump link or Anchor link

This way you can let readers jump to a definite section skipping others. There are readers who enter your page in search of a definite point of the post-subject. Might be, first several sections are already known to him/her. In this case, such jump link might be helpful to keep that readers engaged in the site. Otherwise, he/she might leave the site instantly which will cause negative impact in SEO (bounce rate).

Another probable reason is that, suppose, your site is about healthcare. From a post, you want to redirect readers to the information regarding ‘sources of vitamin A‘. But you don’t have a separate post on the same subject. But this content lies in a section of a post titled ‘Health values of Vitamins’. In this case, you can directly send the readers to that section of the titled post by creating an Anchor link.

Now let’s proceed to how-to:

CSS context in creating Jump link?

First let’s go to clarify the basic.

In CSS, we use a tag to create a link. Look at the code-

<a href="page url here">Displayable Text or Anchor text here</a>

If you create a link this way, clicking this link will send a user to the default top area of the page we defined url for.

But if you want to send users to a specific location of the page, it is good practice to send near sub-heading of the content. However, that section must be structured with any html tag like Heading (h), Paragraph (p), Div (div) etc. Now your function is to connect the URL with that tag by using id attribute. See HOW?

First put any name of the id attribute just after # sign with the page url as shown below-

<a href="page url here#attribute-name">Displayable Text or Anchor text here</a>

Next, define the attribute with the html tag (suppose h5 tag here) according to CSS rule just as shown below. Note, attribute name must be unique.

<h5 id="attribute-name">Here is a sub-heading</h5>

All are done. Now if anybody clicks this attributed link, he/she will be sent to the subheading and read the content below easily.

This is the formula, this is the theory and basic structure of creating a Jump link or Anchor link. If attributed url is of the same page where you’re creating the link, users will be redirected in the section of the same page. And if the url is of different page, it will send users in relevant section of that page. It will depend on just URL. This way you can create Anchor Link on any website or HTML environment.

Create Jump link in WordPress

In this stage, let’s proceed with reference to the previous example.

Suppose, you have a WordPress blog named Healthcare whose URL is healthcare.com. You wrote a long post titled ‘Health values of Vitamins’ whose Permalink is health-values-of-vitamins. So the full URL of this page is http://www.healthcare.com/health-values-of-vitamins/.

In this page, you included 15 sections of contents followed by 15 subheadings. Among them the 11th section is about Vitamin A and you titled it ‘Sources of Vitamin A‘. At the beginning of the post, you added a 15-item Title-list of the sub-topics with links each pointing to the relevant section.

Now, for example, let’s see the process how to create 11th link. For id attribute, we’ll use the name SourceV-A.

Creating 11th link on the 15-item list

Here is the code for link-

<a href="http://www.healthcare.com/health-values-of-vitamins#SourceV-A">Sources of Vitamin A</a>

In Gutenberg Editor of WordPress, take an HTML block and insert the above code. In Classic Editor, open Text mode and insert the code in desired place.

If you use the code in the 15-item list, it will look like-

Code
<ol>
 	<li>Subheading-1</li>
        <li>Subheading-2</li>
        <li>Subheading-3</li>
        <li>Subheading-4</li>
        <li>Subheading-5</li>
        <li>Subheading-6</li>
        <li>Subheading-7</li>
        <li>Subheading-8</li>
        <li>Subheading-9</li>
        <li>Subheading-10</li>
        <li><a href="http://www.healthcare.com/health-values-of-vitamins#SourceV-A">Sources of Vitamin A</a></li>
        <li>Subheading-12</li>
        <li>Subheading-13</li> 
        <li>Subheading-14</li>
        <li>Subheading-15</li>
</ol>
Output
  1. Subheading-1
  2. Subheading-2
  3. Subheading-3
  4. Subheading-4
  5. Subheading-5
  6. Subheading-6
  7. Subheading-7
  8. Subheading-8
  9. Subheading-9
  10. Subheading-10
  11. Sources of Vitamin A
  12. Subheading-12
  13. Subheading-13
  14. Subheading-14
  15. Subheading-15
Creating 11th subheading (h5) located in the same page

Here is the code for subheading-

<h5 id="SourceV-A">Source of Vitamin A</h5>

In Gutenberg, take an HTML block and In Classic, start the Text mode to insert the code. You can do the same by taking a Heading block in Gutenburg.

Now if anybody clicks the text ‘Sources of Vitamin A‘ from the list created on top of the page, he/she’ll jump to the 11th section of the post titled ‘Sources of Vitamin A‘ skipping first 10 sections.

Hope you got clarified with the process how to create a Jump link or Anchor link.

Facing any difficulty in applying? Comment!

Leave a Reply

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