Running a website is a big responsibility and knowing how to create anchor links in WordPress will be an important skill as you create content your visitors love to read. Anchor links will help you direct your readers to the exact place they need to be on your website. Using anchor links can also improve user experience and even give you a slight SEO advantage.
In this article, we’ll show you how to easily create anchor links in WordPress and in what situations you might want to use them.
Here’s what we’ll cover:
What Are Anchor Links?
Technically speaking, an anchor link is a link (or hyperlink). In fact, in HTML, the anchor element (represented as the a tag) is common for all links that make the web as we know it possible. That said, the term “anchor link” is commonly synonymous with the term “jump link”, a link that jumps to a specific element on a page. So the main difference between anchor links (or jump links) and regular links is the destination. Traditional hyperlinks send users to a page while anchor links send users to a specific section of a page. Anchor links can link to a section on the same page or to a section of a different page. But it seems the former is more prevalent.
Anchor links are often useful for long-form articles. But, they can also be used for single-page navigation menus or for creating a table of contents on posts or pages.
The Anatomy of an Anchor Link
Image Elements by Vector Stock Pro and Paul Craft / shutterstock.com
Similiar to any hyperlink in HTML, there are two major components that make an anchor link work.
- An element with a specific anchor ID (the anchor). This is the element you wish to jump to on the page.
- A Link to the element with the corresponding anchor ID (the anchor link). This link will “jump” to the anchor element wherever it is on the page.
To link to a specific piece of content (the anchor), you’re going to have to give that anchor element a unique ID so that the anchor link has a location to jump to.
This is an example HTML snippet for a heading (h2 element) with an anchor ID that we can use for an anchor link (ID in blue):
<h2 id="your-anchor-link-id">Example Heading</h2>
With this, we can create an anchor link that jumps to this heading element. The key to an anchor link is the unique href attribute value. Instead of a normal URL, you must include a pound sign “#” before the corresponding anchor ID. In HTML, that would look like this:
<a href="#your-anchor-link-id">Click Here to Jump to Heading</a>
Notice that when linking to the anchor ID you are must include a “#” at the beginning. But when naming the anchor element with an anchor ID you do not include
[…]
This article was written by Christopher Morris and originally published on Elegant Themes Blog.