How to Add Auto Anchor to WordPress Headings

These days the search engine can understand the meaning of the headings within an article. Whether you add a table of content, anchor text etc or not, they may show the links on the search engine result page. This happens with the content of our site. If there is step 1, step 2, and step 3 headings; Google search engine adds links on the search engine result page. However, adding links to the headers in an automated way can help the search engines more.

The result after following this article will be a visible anchor icon on hover beside the headings with an addressable URL. That is why we commonly see in GitHub readme files or documents of Microsoft. It is easy to link a particular header, apart from being good for SEO.

Manually adding anchors to heading or what WordPress refers to as page jumps are already has a document for the newer WordPress versions and not difficult to use by the users who depend on block editors. However, not everyone uses WordPress in the same way. Particularly the websites in development prefer to use the classic editor and write in text/HTML format. For such users, there are two ways to add an auto anchor to WordPress headings.

Option 1: Use a WordPress Plugin

Probably the first plugin was created by Benedikt Bergmann, named Auto Anchor.

There is a similar plugin named Add Anchor Links. Simply activate it, on the settings page, and select posts as the target. You’ll hardly adjust its CSS. It is extremely easy and does the job nicely.

Both of the developers are reputed and you can rely on any of them. As the thing is around the posts, avoid testing any other bloated plugin on your production site.

Option 2: Use PHP Snippet and CSS

You can directly use a PHP snippet to find the headers and add the links with icons. The rest of the work CSS will do, such as adding the hover effect. The above plugin’s this file will show you the logic of how the automatic thing is happening:

The above-mentioned developer Benedikt Bergmann already has a great article on it and a PHP snippet on his GitHub repo. Below is his written code, you have to add this on your theme’s functions.php file or you can use it with our plugin for adding PHP snippets:

Here is his CSS file: