Links allow you to direct your website visitors to another web page easily, but they also can give you the ability to do more than that. In addition to other link tricks we’ve shared previously, did you know you can also use links to send people to a specific place in a web page? With these easy steps, learn how to create anchor links to do just that on a WordPress site.
How links work
In addition to a simple web address, links can contain three important elements that direct a browser on how to handle a link.
Protocol
A protocol is the very beginning of a web address. It ends in a colon and two forward slashes. The http protocol (http://) directs browsers to a standard website and https is used for secure sites, but several other protocols exist and direct the browser to handle the link differently. For example, the ftp protocol (FTP stands for file transfer protocol) is used for uploading and downloading files.
Form data
When a form uses the GET method, the data is transmitted as part of a link. Form data is shown in a link after a question mark. While secure data (names, addresses, credit card numbers, etc.) should not be passed with the GET method — and don’t worry, there’s another method called POST that transmits secure form data without this security risk — the GET method is handy for data that doesn’t need to be secure because you can bookmark and link to form results. For example, Google search results use the GET method and they’re therefore visible in links. A link like https://www.google.com/search?q=MPWR+Design can send a user straight to search results.
Anchor
An anchor is a link to a specific point in a page. They’re designated in a link with the pound sign. Anything after the pound sign is an anchor link (unless, of course, there’s a question mark after that, as seen above). If you’ve ever wondered why links use the <a> HTML tag, it’s because the A stands for anchor.
How to set anchor tags
Unfortunately, WordPress doesn’t offer an easy option to create anchor tags in the front-end editor. Thankfully, though, creating anchor tags only requires one simple line of code.
In HTML, the <a> tag is used for links with the href element, but it’s also used to create anchor tags with the id element. Therefore, setting an anchor tag in a page is as easy as using the following line of code. Switch from the visual editor to the text editor, find the location on the page where you want to add the anchor tag, and add this:
<a id="anchor-name"></a>
Of course, you can set the id to be anything you want instead of anchor-name. You can switch back to the visual editor once you’ve added the link.
To link to your newly created anchor, add #anchor-name (using the id you created, of course) as the target of your link. You can use the WordPress front-end editor for this part of the process as you would for any other link. You can also link to an anchor on a different page. To do so, simply place a pound sign at the end of the link and place the id after it, as so:
https://www.mpwrdesign.com/sample#anchor-name
