Creating Anchors in the WordPress editor

Sometimes, you may find yourself in the need of anchoring to a certain area of your page. Luckily, WordPress has that option solved (albeit through the standard HTML anchor settings).

What are anchors?

In the simplest form, anchors are what allow you to jump to different sections of a page. We’ve experienced this with the FAQ’s that are often on websites, or the table contents we see on Wikipedia pages or elsewhere. But these links are fairly easy to create.

Creating an anchor in WordPress.

To create an anchor in WordPress is actually rather painless. All you have to do is add a little bit if information using the text tab. htmleditor-01

Once you’ve clicked that you’ll find the text that you want to make the anchor, say for example….

This bold text

When you initially look in the editor it’ll look something like this: <strong>This bold text</strong>

To add a link to it, you will be adding the <a> tag to it. In html, the <a> tag is always used for referencing hyperlinks, and in this case we will be using it to make a hyperlink on our page.

Adding the tag will now make the text look like this: <a name="mylink"><strong>This bold text</strong></a>. When done correctly, you’ll notice a little anchor next to your text like this:

anchoreditor-01

Once this anchor is added, we can use it and reference it anywhere we want to!

Using the anchor

WordPress makes it fairly easy to reference an anchor within a page. Just click Insert/edit link button, and add #mylink to your text, and you’ll see it come to life!

To use your anchor through an external page, you will just add #mylink at the end of the hyperlink. So for this page, it would be https://kevinpudlo.com/creating-anchors-in-the-wordpress-editor#mylink.

This is it, you’re done and ready to use anchors!

Customizing the anchor tag

Whatever you call the link within the name="" is what your link will be. So to make an anchor called top, you’d  type it as <a name="top"> and call it by using the #top at the end of your hyperlink. If you want to make one called <a name="cheesecake"> then you’d call it by using #cheesecake.

Making the most of the anchors

How you use anchors is completely up to you. You can make a table of contents, you can add a top button throughout an article, or link to specific areas on help pages!