Anchor Link

How to Create an Anchor Link in Your WordPress Content

When you think of hyperlinks you probably think of linking two separate webpages together.

However, did you know that you can actually hyperlink to content on the same webpage?

Check it out by clicking here.

This technique is called creating an anchor link, or jump link, and can be useful for many different types of website content:

  • Linking to a specific section of an article. Let’s say there is a topic that will be explained in further detail later on in an article but your reader wants to know now what is going on before reading any further. Providing a jump link to that particular section so you reader can get a heads up can be helpful for further engagement and a better understanding of you content.
  • For blog posts that are separated into sections. Sometimes your content will be written in a way that separates specific topics. If your reader is interested in a particular section, say free WordPress themes as opposed to the premium ones you have listed first, by providing an anchor link for them to jump to you eliminate the need to scroll down to the wanted section of content.
  • In a glossary post. Perhaps you have created an extensive glossary post for your readers. By providing them a way to jump to specific terms they are interested in you again eliminate the time consuming (and quite annoying) action of scrolling through the alphabet to get to a particular glossary term.

Although creating an anchor link requires you to dip into the HTML view on your WordPress editor, it really does not take any coding knowledge to do it. In fact, it is super easy if you just follow my step-by-step instructions.

So, let’s check it out.

Creating an Anchor Link

Step 1: Set up the End Point

I will honestly say that the first couple of times I created an anchor link I was sort of confused at first because you need to start at the end point, or the section of your content you want readers to be able to zip down to, first. It seems kind of counter-intuitive, but once you accept it and just work “backwards” it is not that bad.

So, the first thing you will do is click into the Text section of your WordPress editor. You usually do most of your changes in the Visual section, but for creating an anchor link, you need to be in the HTML section.

Anchor Link - Text Editor

Next, scroll down to the section of content you want your readers to be able to jump to.

Here add a simple piece of code that will set the end point of your anchor link. It will look like like this:

<a name="anchor"></a>

You will notice that I have titled my end point “anchor”. This is just a reference name that will be used when setting up my starting anchor point. You can name your anchor anything you want. Should you wish to use more than one word for an anchor link title simply space each word with an underscore.

Here is what it looks like in the Text editor:

Anchor Link - Code

Step 2: Check Your Anchor Link End Point

Now that you have created your anchor link end point by adding the only required piece of code, check to make sure the anchor link was set correctly. To do this, switch back to the Visual editor and scroll to the section of content you want your viewers to be able to jump to.  If done right, you will notice a tiny anchor icon settled right above the area you designated as your anchor link end point:

Anchor Link - Anchor Icon

Step 3: Designate Anchor Link Text

The next step in creating a successful anchor link is to create the text that your site visitors will be able to click on to jump down to the anchor link end point you just created.

Go back to the top of your page (or wherever you want readers to be able to click to jump) and type in the text you want them to click on. This is all done in the Visual editor.

Highlight the section of text you want to hyperlink and then click on Insert/edit link. Now, rather than type in an entire URL like you typically would to hyperlink to another webpage, enter a hashtag and your anchor end point title (remember mine was titled “anchor”?).

It will look like this:

Anchor Link - Starting Point

Step 4: Check Your Anchor Link Starting Point

If you want to make sure your anchor’s hyperlink was done correctly all you have to do is switch back over to the Text editor and see that the act of hyperlinking the text added the correct code automatically.

Check it out:

Anchor Link - Starting Point Code

Now, your code may look slightly different (and possibly more simple) than mine because I designated a specific color to my hyperlink (I love pink!). That is why there is some style code added into my anchor link starting point.

Step 5: Test Your Anchor Link

Now that all of the steps have been completed, the last thing for you to do is test your anchor link. Go into the Preview section and click on the hyperlink you created as your starting point. If it was done properly, you will automatically jump to the section you designated as your anchor link end point.

Did it work?

Final Thoughts

So there you have it!

Creating an anchor link is an easy way to allow your readers to zip down to a specific section of content on the same webpage they are viewing. Whether it is used for a glossary page, a sectioned off blog post, or even just a lengthy piece of content with a little bit of information for everyone to enjoy, an anchor link is a great tool to take advantage of.

Have you ever used an anchor link in your WordPress content? Did you feel the process was fairly simple? Better yet, how do you think your readers feel about being able to jump to different sections of your content? I would love to hear all about it in the comments below!

Image courtesy of Freepik

Tags: , ,
Previous Post Next Post


Add Your Comment
    • Jason G.

    I use this method on my sites as well. In the past, I have used the ID attribute in the hyperlink. Though, I will start using the “name” instead if it is only to link to another section of the page. Thanks for sharing!

    1. Hi Jason G!

      Thank you so much for stopping by and checking out my article regarding anchors. They are fun once you get the hang of them and can be very helpful.

      I have seen the “ID” attribute in the hyperlink that you referred to as using in the past. I am not sure what the difference is (as I am not a coder by any means!)…however, I have seen the “name” attribute more so I figured it was more accepted. I will have to look into what the difference is and see if one way is better or not.

      Thanks again for stopping by!

      ~ Lindsay 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.