How to Use Anchors in WordPress CMS

If you have a long page of content, for example, the FAQs or a detailed explanation of a subject, anchors are a very handy way of locating a specific part of a page. These appear as links, which navigate you to the exact location of the content. In WordPress development anchors are commonly used by most developers to make the page easily readable to the visitors. It also adds to the SEO score of the website as the anchor text is usually related to the content of the landing page. Using anchors in WordPress involves a little tweaking of the HTML code.

Steps To Integrate Anchors in WordPress Development

Set Content

First and foremost thing is set all the content in order in the page, including the place from where the linking will be done. However, there isn’t any hard-and-fast rule that the link has to be on the same page as the anchor. It can be a different page altogether if you prefer to do it that way.

Create Anchor

In the next step, go to the place where you would like to place your anchor. In most of the websites, this is some text, but you can also use an image or a multimedia element as the anchor. Go to the HTML code in your WYSIWYG editor and put the cursor before the text or the image that will be the anchor. Use the following code – <a name=”label”>Text and/or code here…</a> ahead of the text. You should replace the ‘label’ with the string that you choose. This string can be in the form or a descriptive text or simple numbering. In most cases of WordPress development, you will have to repeat this process, if there are multiple anchors in the page.

Create Link

Once you are done with this and the anchor is in place, you will need to create the link where it will navigate to. This can be easily done using the href HTML tag. There can be two possibilities, while creating the link. In the first case, you might link the anchor text to a different page altogether and the tag would read <a href=”URL you are linking to”>Text that will link to URL</a> where the texts can be replaced to suit the demands of your website. In the other case, we consider the anchor and the text to be in the same page and the HTML tag should read <a href=”#label”>Text linking to anchor</a> where you delete everything between the first quotation marks (“) and the hash symbol (#).

Use No Follow

In all these anchors you can use a Rel = “Nofollow” link if you choose to, but there is a raging debate on the pros and cons of using ‘no follow’ in the anchor text with some saying, it hurts SEO score of a website. If you use No Follow, the link would appear as

< a rel=”nofollow” onclick= “javascript:_gaq.push ([‘_trackPageview’, ‘/outgoing/article_exit_link/3248097’]);”  href=”URL you are linking to”>Text that will link to URL< /a>

Test Anchor

Once the anchors have been created, they should be tested on the browser. Open the webpage’s, where you have inserted the anchor links and click on all the links individually to ensure that they take you to the right location. In very long pages like FAQs, you might find some errors and they need to address using the same technique as mentioned above.

Anchoring should be done carefully in WordPress development, and you need to ensure that it is done only by the experts. Even though this looks like a simple process, it does involve its own complexities and only the best of developers can anchor a page, well especially when it involves large number anchors in a page. For your custom WordPress development, don’t compromise with the quality of WordPress developers you hire, as this will translate into benefits in the long run.


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s