Using Anchors in WordPress

WordPress code

Anchors are a very handy way of locating a specific part of a page. They are commonly used on FAQ pages, where a list of questions appears at the top of the page and then clicking on each link will deliver you to the response lower down the page.

I had struggled for a while with trying to figure out how to use them in WordPress, but when it came down to it, it was merely a case of adding a little HTML. Here’s how to do it:

First of all, create all the text on your page, including where you will be linking from (a list of FAQs, for example) and where you will be linking to (the anchor – a set of answers for example). Bear in mind that you can use anchors to link to another page altogether, so the link does not need to be on the same page as the anchor.

Create the anchor

Once you have created all your text, go to the place that you want to place the anchor. This is most likely some text, but can just as easily be an image or any other part of your WordPress post. Making sure that you are in the HTML editing part of your WYSIWYG editor and put your cursor before the text/image/code. Once there, you will need to “mark” the text, so that the place of the anchor is specified. You should do this by putting the following code ahead of the text/code, changing the word label for any string you choose (this could be descriptive, or simply sequential numbering):

Repeat this process for every part of the page that you want anchors, using a different label for each one.

Create the link

Now that your anchor is in place, you are ready to create the link to it. This is done by using the href HTML tag. As such, use can use relative or absolute links accordingly. The href tag syntax is made up like this:

Therefore, in this case, you will create a link such as this, replacing the appropriate parts so that it suits your application:

If the link and the anchor are on the same page however, you can use a relative URL, which involves deleting everything between the first quotation marks (“) and the hash symbol (#), leaving a much simpler href:

Now by way of example, you can go to the top of this post using this anchor link. Let me know if you have any problems or suggestions, but even more so, let me know if this helped you out.

4 thoughts on “Using Anchors in WordPress”

  1. YAY, now i know how to use anchors. i am creating free wordpress themes and this has helped me truly.

    1. Dave says:

      Oh really? Have you released a theme yet? I haven’t really ventured down that road yet – just modifying existing themes.

  2. labyrintista says:

    I used anchors all the time in a different CMS and love them. I was disappointed to find that they aren’t in my WordPress rich text editor. Thanks for sharing the code. Now I can make those long pages of text more reader friendly.

  3. Cory says:

    pretty sure you dont want to have a “/” before “#anchor” in your link. it still works from what I’ve seen but its not recommended.

Leave a Reply