Ever struggled with creating easy navigation within your long WordPress posts? Or wished you could link directly to specific sections of your content? Creating WordPress heading anchors automatically can dramatically improve your content’s navigation. In this guide, I’ll show you how to transform your WordPress headings into clickable link targets, making it easier for readers to navigate through your posts and share specific sections.
How to enable WordPress heading anchors generation?
The easiest way to enable this functionality would be the theme’s functions.php. Simply head to your WordPress backend:
- In the sidebar, hover on ‘Tools’
- Click on ‘Theme File Editor’
- In the file explorer, click on
functions.php - Paste the code
add_filter( 'block_editor_settings_all', function( $editor_settings, $editor_context ) {
$editor_settings['generateAnchors'] = true;
return $editor_settings;
}, 10, 2 );The theme’s functions.php is overwritten after theme updates so it is ill-advised to add code there.
To ensure your custom code survives theme updates, you should create a child theme . A child theme inherits all the features of your main theme while allowing you to make safe customizations.
Alternatively, you can create a simple site-specific plugin – just create a new PHP file in the wp-content/plugins directory with the following code:
<?php
/*
Plugin Name: Auto Heading Anchors
Description: Enable automatic heading anchors in the block editor
Version: 1.0
*/
add_filter( 'block_editor_settings_all', function( $editor_settings, $editor_context ) {
$editor_settings['generateAnchors'] = true;
return $editor_settings;
}, 10, 2 );Both methods will preserve your code during theme updates. If you already have a custom plugin for your site’s functionality, that’s the perfect place to add this code.
How does anchor generation work?
The feature to make automatic anchor generation opt-in was introduced in this pull request after WordPress 5.9. I find this feature super useful and would have wanted it to be opt-out or at least wish that there was a UI to enable/disable this.
The core/heading block is where the magic happens. In the autogenerate-anchors.js file. The heading edit function detects content but no anchor, It calls generateAnchor(clientId, content) which uses getSlug() to transform the content:
- Removes accents
- Replaces non-alphanumeric chars with hyphens
- Converts to lowercase
- Trims leading/trailing hyphens
The anchor becomes the slug unless there’s a duplicate, in which case it would add -1, -2, etc.
Results
After enabling autogenerated anchors, you can observe that WordPress automatically adds an ID to the headings. This can be used for various purposes.
You can link to your heading anywhere in your content by using the anchor feature of blocks like paragraph, heading, and button.
You can create also create table of contents for long posts.
If you’re interested in learning more about the WordPress Block Editor, I shared some helpful tips at WordPress Meetup Saarland recently. Feel free to check out my notes from the talk here!
