How to Create Anchor Links in WordPress

A hyperlink on the web is a reference to an object on the Internet. It can be an image, a static/dynamic page, a movie file or even another website domain. We use the HTML tag <a>, called the anchor element to generate links. If you don’t want to read the theory, you can skip to the example directly.

Adding a link to an HTML page is quite simple and the syntax for that is,

<a href="url">Link text</a>

Now, this code will cause the browser to go to the ‘url’ upon clicking the Link Text. The ‘href’ attribute is used to designate the target address of the link.

What Are Anchor Links

Anchor links are an extremely useful tool for easy navigation on extremely large posts and pages. These links, also called internal links or page jumps are used to navigate inside the page from one place to another. You might have seen links like ‘Go To Top’ or, footnotes which again allow jumping back to the last position. These are called Anchor Links. It’s very easy to create Anchor links in a page with a couple of lines of coding.

Creating Anchor Links

To create simple Anchor links in wordpress posts, first switch to the HTML editor mode. Inside that mode, suppose you want to create a link to go to a specific part of the page like the example anchor at the top, you can do so by adding this simple code.

Example Code

What we have done in this page is, I have set an anchor to this heading. The code reads as,

<h3 id="Example">Example Code</h3>

At the top of the post, you can see a link called example. When you click on that link, the page will jump to this heading. The hyperlink created at the top of the post has a code similar to this,

<a href="#Example">example</a>

So, whenever you click on the example link at the top, it will search for an element named Top in the page (as the link is relative). When it finds an object with the specified name, browser jumps to that location. Here, the current heading is named Example and the link at the top jumps to an object named Example so, when you click on that link, the browser jumps to this heading.

It’s pretty simple actually, in even more simple words, a named anchor is created like this,

<a name="anchor">Named Anchor</a>

And a link to that named anchor, within the same page is created like this,

<a href="#anchor">Jump to the Named Anchor</a>

If you want a link to jump to a specific location in a different page then you will have to provide the full path of the link. (along with the URL and the path). Return to the Top.