An Introduction To Anchors In WordPress

blog cover image
24
1.8K followers
Updated

What Are Anchors And Why Use Them?

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 outgoing external links. In reality, the URL that is being linked to is an Anchor for the link.

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.

So why are Internal Links important?

Well, Internal links are a good thing. Google loves them almost as much as good backlinks (backlinks are incoming external links from other sites to yours).

Internal Links:

  • Help visitors move around your site in a natural way, They're set up, so that when a user clicks the link (usually from somewhere in an article) they get taken to somewhere else on your site that is relevant to their interests.
  • Just as importantly, Internal Links help Google to figure out connections between different points on a page, and even more importantly, from one page to another.

So from an SEO point of view, internal links provide both a direct SEO benefit when followed by Google and an indirect SEO benefit because they are useful to the reader.

Where Are Anchors Used?

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 to when they click a link.

URLs for sites, pages or posts, are automatically recognised like "anchors", and links to such URLs 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.

Sorry now for this long sentence... Although, as I’ve already said, by definition internal links, when clicked, take the clicker to a specific position ( or anchor) within the same website where the link resides, the thing is that the same anchors can also be published on external sites 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, 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.

So, to clarify... if you want to create a link to the beginning of any page or post, you don't need to set up an anchor, because the URL for that post or page is, in effect an automatically created anchor.

If you want to add links to specific points within a post or page, than you need to set up an Anchor at that point, before setting up the link.

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, in effect, 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 Anchors

As usual, this takes far longer to read than to actually do!

  1. Go to the page or post on your site in the WP editor with some content to which you want to add an anchor and…
  2. Click the block to which you want to add the anchor... (often Header blocks are best but not always)...
  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).
  6. Remember to save the change.

(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 add the HTML-ready anchor name as:
"here-is-the-really-interesting-stuff " (no quotes, all lower case text and no spaces, although dashes are often used to separate words).

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 full 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 automatically 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

    Login
    Create Your Free Wealthy Affiliate Account Today!
    icon
    4-Steps to Success Class
    icon
    One Profit Ready Website
    icon
    Market Research & Analysis Tools
    icon
    Millionaire Mentorship
    icon
    Core “Business Start Up” Training

    Recent Comments

    30

    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.

    This is an awesome resource, Richard! Book marked for almost immediate use!

    Jeff

    Thank you for the accolade, Jeff!
    :-)
    Richard

    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

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

    Pietro

    Thank you Pietro!
    :-)
    Richard

    Welcome!
    :o)
    Pietro

    Hi Richard,

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

    Barbara

    Thank you Barbara. You're an inspiration.
    :-)
    Richard

    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

    Thank you Susan. You've made my day!
    :-)
    Richard

    See more comments

    Login
    Create Your Free Wealthy Affiliate Account Today!
    icon
    4-Steps to Success Class
    icon
    One Profit Ready Website
    icon
    Market Research & Analysis Tools
    icon
    Millionaire Mentorship
    icon
    Core “Business Start Up” Training