- act as a page jump pointing to a specific place within the page content
- are used 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
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
- 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 id to the anchor
- Click insert
- 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
Add a back to top jump by typing #top in the link url field. If the link doesn’t work, open your header.php file and add <a id=”top”></a> right after the <body> or <body <?php body_class(); ?>> line.
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.
[cross posted on the LearnWP blog]