How to Create Page Jump Links – without code!

This post was originally published on November 26, 2012. The post has been rewritten to show you the new and much easier way to create anchor links in WordPress.

In the past, creating page jump links required diving into HTML code. In this updated post, you’ll learn a simple way to do it with a Heading Block.

What are Page Jump Links?

Page jumping also referred to as anchor links or HTML bookmarks, is where a site visitor clicks a link and is jumped to a specific place further down or up a long page. Normal links always point to the top of a page. Anchor links are particularly useful for creating an index at the top of long pages. Like this…

In this post, you’ll learn:

1. How to create an anchor link in a heading block
2. Tips for Naming Anchor Links
3. How to link to the anchor
4. How to link to an anchor point on a different page

To Create your HTML Anchor:

1. Click + to add a heading block in your page or post
2. Enter your heading text
3. On the right side under Block Settings, click on Advanced
4. Under HTML anchor enter a unique name. (number-1, for example)

Tips for Naming Anchors

• Each HTML anchor must be unique within a page or post
• No spaces between words in an HTML anchor
• Remember HTML Anchors are case-sensitive
• An HTML Anchor can include: hyphens (-), underscores (_), colons (:), periods (.)

Now, Link to the anchor

Once you have created your anchors, you can link to them. Here’s how:

1. Create a link, to go to the section in your page. The link can be made from a menu item, a button, an image or text.
2. Highlight your text, image or button
3. Select the link option from the block’s toolbar
4. Type in the HTML Anchor you created, starting with the hashtag (#) symbol. So, if you created an Anchor named “number-1” (like we did) you would type #number-1
5. Click enter

To link to a page section from your menu, open the menu in customize:

1. Click Add Item
2. Custom Link
3. Put in the Link https://yourwebsite/#anchorname/
4. Put in the Menu Label
5. Click Add to Menu
6. Publish

Link to an anchor point on a different page

You can also link to an anchor on a different page by changing the link url and adding an anchor on that page. The url of the link would look like this https://domain.ca/otherpage#anchor.

So much simpler!

Now with the block editor in WordPress, it’s easy to create anchors in your pages and posts. It is so much simpler now without the need to edit code.