Categories
WordPress

A Straightforward Guide to Adding Jump Links in WordPress (No Plugin)

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 requires doing two things (detailed instructions to follow):

  1. Adding an id attribute 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
  2. 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/id attribute 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.

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.

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.

an example of inserting an HTML anchor in wordpress to a heading tag
An example of inserting an HTML anchor in WordPress — to a heading tag. Also, notice how WP is automatically allocating the HTML anchor name to headings to save you some time. But of course, you can update it to what you want.

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.

creating an anchor or jump link in WordPress
Creating an anchor or jump link in WordPress.

You May Also Want to Check Out:

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 id or an HTML anchor name
  • Utilizing the same name to link — prefixed with #.