TextformatterAutoAnchor by martinmuzatko

Adds an id attribute to every heading with a slug of the text. Intended for easily creating linkable sections

TextformatterAutoAnchor

ProcessWire Module: Automatically add anchors and IDs to Headings

What is it doing?


This Textformatter adds an id attribute to every heading with a slug of the text. Intended for easily creating linkable sections.

Preview

Before Before After Before

Configurable Variables


Heading Selector

Determine which headings you want to have the ID + anchor Use a regex-like range or list, e.g.: 2-6 or 346.

Anchor Class

Your css classes that are attached to the anchor link.

Anchor Content

The text for your anchor. If you prefer an icon, you could also use HTML for example.

What are the Alternatives?


There are existing tools like Anchorific JS but its dependency is jQuery. I love to have an alternative that is PHP only.

Known issues


  • Anchors are placed in front of the text. This could be a future configurable setting.
  • The slug is also not configurable yet, currently it is lowercased and space is replaced with hyphens/dashes

Install and use modules at your own risk. Always have a site and database backup before installing new modules.

“We were really happy to build our new portfolio website on ProcessWire! We wanted something that gave us plenty of control on the back-end, without any bloat on the front end - just a nice, easy to access API for all our content that left us free to design and build however we liked.” —Castus, web design agency in Sheffield, UK