Many publishers have seen jump links or anchor links in action that take them to a specific heading, section, or a spot on the same page after a click — and have wondered how to emulate the same for their WordPress site.
The good news is that inserting jump links inside a WP blog post or page does not require web development or technical background and in fact, is quite an easy feat. Further, there isn’t any need for a plugin — although it may be a massive time-saver in some cases.
Adding Jump Links in WordPress
Adding jump links in WordPress requires doing two things (detailed instructions to follow):
- Adding an
idattribute to the section, text, heading, paragraph, what have you. In other words, the spot where you want your users to go to, you assign a name. It could be anything, such as this-is-an-anchor
- Next, select the text like you would for inserting a regular hyperlink. Except, in this case, instead of a URL, the link destination would be the anchor name/
idattribute you picked out in step one — prefixed by the hash sign #. For example, the code could look something like below to create an anchor link with the id name in step one.
<a href="#this-is-an-anchor"> this link is an anchor </a>
Note that you wouldn’t need to code this in; the example above merely shows how the HTML is.
Step-by-Step Instructions on Inserting Jump Links in WordPress
Now that we’ve covered the ground on the two prerequisites for incorporating jump links let’s go into the details on how to execute so.
Step 1: Designate an Id to the Spot Where You Want Your Users To Go – Via the Jump Link
In WordPress, blocks such as Headings and paragraphs have an “Advanced” option inside their block-specific settings — designed to append an HTML anchor to it/a.k.a. give it an
id. This option may go unnoticed by most of us as it’s usually hidden via a dropdown arrow.
As an example (and a visual screenshot will follow for more context), say we want to input an
id name to step 1’s heading. For that, all we have to do is select that block, divert our eyes to its settings, expand the “advanced” menu, and enter the name. Take a look at the image below to understand what that entails.
Step 2: Hyperlink Using the HTML Anchor Name of the Section You Want To Navigate To
This next and final step should feel slightly familiar, as the process is the same as inserting a hyperlink, except, as covered, instead of pushing in a regular URL, you’d be linking to an HTML anchor.
For example, say we want to use the words “Step one” to jump users to step 1’s heading — using its allotted HTML anchor name. In that case, we select the text, click the link/chain icon from the popup, and add the anchor name prefixed with a hash symbol (#) instead of an URL. In this instance, it would be #h-step-1-designate-an-id-to-the-spot-where-you-want-your-users-to-go-via-the-jump-link. For reference, check out the example image below.
You May Also Want to Check Out:
- How to Fix the “Could Not Fully Remove the Plugin” Error
- How to Change Link Color in WordPress
- How to Change the WordPress Excerpt Ellipsis to Read More (or Similar)
- How to Add Cloudflare to GoDaddy Managed WordPress
- How to Upload Google Search Console HTML File for a WordPress Site
- Installing Google Tag Manager [GTM] on WordPress (Without a Plugin)
- What Is APO by Cloudflare and How To Confirm It’s Working?
- GoDaddy Managed WP Plan: Creating & Accessing a Staging WordPress Site
- How To Remove Dates From WordPress Posts (Without a Plugin)
- How to Change Headings and Paragraphs Font Sizes in WordPress
Generating Anchor or Jump Links in WordPress Is Not Limited to Text Links Only
What we saw in this post demonstrated an example of propagating anchor links via the regular text hyperlinks. However, in WordPress, these aren’t limited to just that. You can also populate anchor links to buttons/CTA buttons, images, or any other blocks or elements that you may be able to add a link to.
The process of accomplishing that would exactly be the same. That is:
- Coming up with an
idor an HTML anchor name
- Utilizing the same name to link — prefixed with #.