Create a Link to Jump Down a Page in WordPress

Sometimes you have a long post with several sections and want to give your visitors the opportunity to directly visit the section they like. This is essentially what “Table of Contents” do. When you visit a Wikipedia page for example, you can see how the structure of the article is laid out up front, allowing visitors to jump to various topics. This has a side benefit since Google’s spiders can pick up this structure and show the links below the main search result. It gives your site more visibility and looks very professional.

This tutorial will show you how to create “in page links” that allow a visitor to jump down a page (or up!) to a specific section. If you’re planning to do this on a regular basis and multiple times per page, it’ll probably be better to utilize a full fledged table of contents plugin. But there’s nothing stopping you from doing it manually. Here’s how.

Tagging the Target Section

Creating a link requires two endpoints – a source and target. You can create either one first and once you understand the process, it’ll be easier to do whichever comes first. But for purposes of this tutorial, I’m going to start with the target to make it easier to follow.

In the screenshot below, I have a long post with a lot of text.

In this, I want to create a link that jumps directly to the third paragraph. So I’ve created a heading in bold above it for easy visibility. When the user clicks on our final custom link, they will know that they have been redirected here. For this example, I’ve chosen to “bold” the heading. But you need not restrict yourself to that tag. You can use headings, or italics, or whatever formatting you wish.

Once you’ve identified and clearly marked the section you need to jump to, press the “Text” tab in the WordPress editor. This will take you to an HTML view of your content. When you navigate down to your target section, you will see the HTML rendered as something like this:

<strong>Target - Jump Down Here</strong>

The <strong> tag is for bold content. You might see an <h2> or <h3> tag if you chose to use a heading. What we’re going to do here is add an “id” to the tag. We place it within the opening tag itself like this:

<strong id="third-paragraph">Target - Jump Down Here</strong>

In this example, I’ve used “third-paragraph”. But it can be anything you want. Whatever it is, be sure to make a note of it because we’re going to use it for creating the main link itself.

In case your content doesn’t have any tags and is just plain text, you need to wrap it inside a tag of some sort. The easiest is the paragraph <p> tag. So if you want to jump to this text:

There's a lady who's sure all that glitters is gold

Make it this instead:

<p id="third-paragraph"> There's a lady who's sure all that glitters is gold</p>

Again, replace “third paragraph” with whatever you want.

Creating the Link

The next step is creating the origin link itself. To do this, just create a regular text link and in the “URL destination” field, type in your “id” name preceded by a “#” symbol. In the updated WordPress editor for the latest version, here’s what it will look like:

When you switch to the HTML view, the link tag will look like this:

You can see that the “href” parameter holds the chosen id with a “#” in front of it. To check whether or not your link is correct, preview the page and when you hover over it with your mouse pointer, the URL in the status bar should be the same as the main page with the chosen ID appended and separated with the # symbol. Like this:

If all goes well and you click on the link, it will take you directly to your target as shown here:

<

p style=”text-align: center;”>

And that’s how you manually create a link to jump down the page in a WordPress blog post!