An Introduction To Anchors In WordPress

Last Update: July 15, 2022

A Brief Overview Of Anchors

OK… not the most exciting title or subject… but if you don’t know your way around Anchors in WordPress you might be missing out.

The WordPress block editor contains many useful features. Here is just one.

Most WordPress users quickly become well-practised in setting up links from their websites to other, external sites, by adding a "link", somewhere on their site that connects to the URL of the other site. These are normally referred to as external links.

Here at Wealthy Affiliate I often see new and more experienced members, unfamiliar with the WordPress block editor, asking how to create internal links.

Internal links, by definition, when clicked, take the clicker to a specific position within the same website where the link resides.

Internal links are a good thing. Google loves them almost as much as good backlinks because they help Google and visitors to the site navigate their way around.

For any kind of link to work, there needs to be an "anchor" set up, positioned at the place you want someone to be sent when they click a link.

URLs for sites, pages or posts, are automatically recognised like "anchors", and take a user to the top of a designated page or post (of whatever type) within a site.

In addition, site owners can set up as many internal anchors as they wish. Internal anchors can be placed for linking to any of the contents of any page or post.

Although, as I’ve already said, by definition internal links are links that, when clicked, are used to take the clicker to a specific position within the same website where the link resides, the anchors for such links can also be published externally for visitors to be able to go directly from wherever they happen to be at the time, to a specific position within a page or post, such as on your site.

So, anchors can be created almost anywhere within a page or post and used for three main purposes:

  1. For links within a single page or post;
  2. For linking from one page or post on a site to a specific position within another page or post on the same site;
  3. For providing a link to someone externally for them to jump to a specific position on a page or post on our site.

The WordPress Block Editor

The design of the Block Editor helps us create internal anchors and link to them, very easily.

You can add your own anchors to any blocks thereby making it easy to link from elsewhere to any block within any page or post.

Also, if you use a Table Of Contents block in your post, it works by creating anchors for all the Header positions in your page or post and automatically creates links to them.

(Here’s a link to some training for setting up a Table Of Contents).

How To Add And Use Anchors & Links

How To Add Anchors

  1. Go to a page or post on your site with some content to which you want to add an anchor and…
  2. Click the block to which you want to add the anchor... (personally I think Header blocks are best)...
  3. Locate the Block settings column on the right. (If it’s not showing, first, click the gear icon towards the right in the top menu).
  4. At the bottom of the Block settings column, you'll find "Advanced" where you can click the down arrow to open (it's not very advanced... go on... try it)...
  5. You'll find a text box where you can add an HTML-ready version of your header content. This is simpler than it sounds...
    For example, if your header contains a title of:
    "Here Is A Header Anchor", then it's best if the HTML-ready version is set up as:
    "here-is-a-header-anchor"… lower case, no spaces, normally with dashes between the words (and without the quotes).

(Note: the HTML-ready link can be called anything you like... but for it to make the most sense, it's best to use words that are directly relevant to the point that the Anchor is being set up for).

How To Link To The Anchor...

1. From a point on the same page or post...
Now, let's assume you've written a long post with many section titles in Header blocks and you want to add a link near the top of the post for people to skip some of the content if they wish...

… you've written a few paragraphs a long way down in the post, under the title of "Here Is The Really Interesting Stuff". The title is in a Header block.

When you go to the Advanced section for that Header block you'll add the HTML-ready version as:
"here-is-the-really-interesting-stuff " (all lower case text and no spaces although dashes are often used).

To add this to your chosen linked position somewhere towards the top of your post, you create a link in the usual way… but...

instead of inserting a URL in the link, you add a hashtag (#), followed by the anchor name (do not forget the #).

So you'd copy the anchor name and insert it in the link after the # as follows:
"#here-is-the-really-interesting-stuff " (with no quotes of course)… and save the link!

Remember to update the page or post as well!

When someone clicks the link, the system knows from the # that the anchor point is on the same page or post as the link.

2. From a different post or page on the same site
The same rules apply as for option 1 with the addition that you need to prefix the hash-tagged link with the URL of the page or post on which the anchor resides.

For example:
Let's say you want to link from the top of "Post 1" to an anchor that you've set up on “Post 2” on the...
perhapsthisisuseful.com “ website.

So the standard post URL for "Post 2" would be:
https://perhapsthisisuseful.com/post-2 “ (no quotes of course).

Then to link from "Post 1" to the anchor in "Post 2" the link would show as:
https://perhapsthisisuseful.com/post-2#here-is-the-really-interesting stuff/... “

3. Fro
m somewhere else on the internet
perhaps in an email or from a comment…
… the necessary link for this is exactly the same as in option 2.

    That's It For Anchors And Links

    That's all for now folks... if you have any complaints or questions, just add them in the comments! As Phil always says... have fun...
    :-)
    Richard

    Join the Discussion
    Write something…
    Recent messages
    PMindra Premium
    Hi, Richard.
    Nice to hear from you.
    This is a good topic.

    I am not up to speed with the "Block Editor."

    You can also create "Anchors" anywhere using a bit of HTML.

    You go into "Text" in your WordPress editor and place the following where you want the anchor to be:



    Where there is a space between "a and name.:
    Where in between the brackets is what you want to call your anchor. eg TOC for a table of contents.

    Now to access this anchor no matter where you are on your sites, you simply have to highlight and connect by using the following:

    #TOC

    I suggest opening a new window with the link.

    It is quite fun actually.

    The Block Editor still scares me. I am not very advanced.

    Thank you for your post.

    Most "Table Of Contents" that I have seen in the form of "Plugins" can actually hurt and not help.

    Google my name "Paul Mindra" and check out how I have used anchors to connect various sites and internal links.

    Any suggestions for improvement would be appreciated, Richard.

    Remain awesome as always.

    Paul from Canada.
    Reply
    JeffreyBrown Premium Plus
    This is an awesome resource, Richard! Book marked for almost immediate use!

    Jeff
    Reply
    richardgb Premium
    Thank you for the accolade, Jeff!
    :-)
    Richard
    Reply
    JeffreyBrown Premium Plus
    You're welcome, Richard! I will have to read this a few times to further digest it, but it will be useful in the further development of my book promtion website!

    Jeff
    Reply
    Pedrone Premium
    Thank you, Richard,
    for this very useful and detailed tutorial/post
    on WordPress Block editor

    Pietro
    Reply
    richardgb Premium
    Thank you Pietro!
    :-)
    Richard
    Reply
    Pedrone Premium
    Welcome!
    :o)
    Pietro
    Reply
    bjdluna Premium Plus
    Hi Richard,

    This is a really great and detailed tutorial! Thanks very much for explaining all of this!

    Barbara
    Reply
    richardgb Premium
    Thank you Barbara. You're an inspiration.
    :-)
    Richard
    Reply
    west2000 Premium
    Richard, this was fantastic to learn about! I'm still learning my way around Blocks and was wondering if it was possible to anchor to specific points on a page. Thanks so much for sharing this. I'll be bookmarking it :-)

    Susan
    Reply
    richardgb Premium
    Thank you Susan. You've made my day!
    :-)
    Richard
    Reply
    Top