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):

<a name="label">Text and/or code here...</a>

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:

<a href="URL you are linking to">Text that will link to URL</a>

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

<a href="http://www.yourdomain.com/faqs/#label">Text linking to anchor</a>

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:

<a href="#label">Text linking to anchor</a>

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.

Related posts:

1. Post your Facebook Status Updates to Twitter automatically
2. How to Post Links to Tweetie Quickly and Simply From Your iPhone
3. 10 WordPress plugins that every website needs… and others that may come in handy
4. Automate WordPress Database Backups for Care-Free Protection
5. Watching the BBC iPlayer outside of the UK, safely and reliably