tomasg.lt

How to link within a page in WordPress

You probably noticed that most of the long articles in blogs have shortcuts that link to different sections of the article without reloading the page. It eliminates the need to scroll and search the whole article for specific information. Like this example how to link within a page.

These links are called anchor links (or just anchors). Today I’ll show you how to create anchors in your WordPress blog so you could have this kind of links in your blog too.

How anchor links are created

Every internal link has two elements:

  1. An element you want to link to. That element needs to have a unique attribute id=”someuniqueid_here“.

  2. Link that points to the element. For example <a href=”#someuniqueid_here“>go to ID</a>.

It may look complicated if you’re not used to looking at plain HTML elements. But the idea is simple. If you want to link to, for example, specific paragraph, you need to add a unique ID for it, and then create a link which points to that ID.

You can have any number of IDs in a page as long as they’re unique for that page. You can not have two or more elements with id=”green” – link would not “know” which “green” you want to link to.

ID name cannot start with a number, can’t have spaces or symbols like * or # in it. So id=”2 ways to create a link” would be invalid – you should use id=”two-ways-to-create-a-link”, or id=”twowaystocreatea_link”.

It’s great to know the basics how anchor links work but you don’t need to enter any custom HTML to create links within a page in WordPress – all the tools are built-in in Gutenberg editor. Here’s how you do it.

Link within a page in WordPress pages or posts

Adding links within a page or post in WordPress does not require any coding skills. Almost any Gutenberg editor block has HTML anchor field where you can enter unique ID. For example if you enter page_link to HTML anchor field WordPress automatically adds id=”page_link” to that block.

html anchor in wordpressNow everything what’s left is to add a link to that block. Select any text you want in the post, and add a link #page_link.

wordpress anchor links in gutenberg editorThat’s it – you’ll have a shortcut that links within a page in your WordPress post or page.