Add anchor links to all headlines in the_content.

[Hans Schuijff]

When I visit github, or websites like css-tricks.com, I see that every heading shows an anchor sign (sometimes on hover) that links directly to that header. It seems to become more popular, since I have come across it more in the last year.

My question is: how is it created, considering that I don't think the links are manually added to the content. I could probably do it with js, but I rather do something server side using php.

The resulting html should be something like this:

<h3 id="article-header-id-0" class="has-header-link">
	<a class="article-headline-link" href="#article-header-id-0">#</a>
	This is a headline of the third level
</h3>

I've searched for it but couldn't find any 'how to' article on the subject, so I'm asking... can any of you offer (or point to) a code example, that creates something like the above html using php starting with a normal headline wrapped in heading tags?

Thanks,

Hans

[Brad Dalton]

1. You can do this manually using HTML in the editor https://www.w3schools.com/html/html_links_bookmarks.asp

2. or use jQuery to target heading tags within the content area.

---

Tutorials for StudioPress Themes & WooCommerce.

[Hans Schuijff]

Hallo Brad,

Thanks for the suggestions. I could probably do it with jquery, but I wanted some automation on server side, so not to violate amp rules or be dependent on user entry. I knew it should probably entail some regular expression, but didn't want to invent the wheel for something that is already out there.

One of the websites that uses it (CSS-tricks) has responded that they use a plugin and I found a plugin in the registry called "Add anchor links" that seems to do the job nicely and looks well coded. So I'm mostly happy with it.

Thanks again for offering your help.

Hans

[Author]

Posts