How to use anchor bookmarks to help visitors navigate to specific text on a page
An anchor link or HTML bookmark refers to a special kind of link. Normal links always point to the top of a page.
HTML bookmarks are used to allow readers to jump to specific parts of a Web page and are useful to create an index at the top of the page for long pages.
In this post, we’ll look at
- how to add the anchor button to the WordPress Visual Editor,
- how to create a link anchor within the page that you will link to
- how to link to the anchor
- how to code this without using a plugin
- how to link to an anchor point on a different page
How to add an anchor button to the WordPress Visual Editor
The easiest way to create page link anchors with WordPress is to use a plugin. The TinyMCE Advanced Plugin will enhance the WordPress visual editor by adding an anchor link functionality.
- Install and activate the TinyMCE Advanced Plugin
- Navigate in the wp-admin to Settings -> TinyMCE Advanced
- From the list of inactive buttons click on the anchor button and drag and drop it to the active buttons at the top of the screen – I suggest that you position it beside the link icons
- Scroll down to the Advanced Options and tick the advanced link box. Unfortunately we currently need to replace the WordPress internal links feature
- Click to save changes
Create an anchor to link to
- Position your mouse within your text at the place you want the link to point
- Click on the anchor icon that you added to the editor
- Give a unique name to the anchor
- Click insert
Link to the anchor
- Highlight the text in your page that you want to link from
- Click on the link icon
- If you ticked the advanced link box you will see a insert window (like the screenshot below) that provides a field called “Anchors”
- Click on the dropdown to see all the anchors you have created on the page. Select the anchor and click insert
Anchor linking without a plugin
If you don’t want to use the plugin you can switch from visual to text view and assign id’s to the page elements you want to link to <h4 id=”myidname”> then just link to this id <a href=”#myidname”>Link</a>
Link to an anchor point on a different page
You can also link to an anchor on a different page by changing the link url and adding an anchor on that page. The url of the link would look like this http://domain.ca/otherpage#anchor.
Please add your comment below if you found this helpful or have any questions.