Adding id attributes to H2 tags in WordPress to use as anchor tag

We occasionally receive emails from our visitors with a specific question that we can refer to an article or section of a page on our website. However, with our lengthy articles, often times we find it frustrating to direct the user to a page with few lines of instructions. This is where anchor tags come in for the help. We decided to manipulate the content and add anchor tags to all our H2 tags.

Here is a feature that we thought is missing in WordPress

Add this code in your functions.php file and all your H2 tags will get an id attributes. Here we use WordPress’s built in sanitize_title_with_dashes function that’s used for creating permalinks when you type in your new post title.

// This function adds nice anchor with id attribute to our h2 tags for reference
// @link: http://www.w3.org/TR/html4/struct/links.html#h-12.2.3

function anchor_content_h2($content) {

    // Pattern that we want to match
    $pattern = '/<h2>(.*?)</h2>/';

    // now run the pattern and callback function on content
    // and process it through a function that replaces the title with an id 
    $content = preg_replace_callback($pattern, function ($matches) {
                $title = $matches[1];
                $slug = sanitize_title_with_dashes($title);
                return '<h2 id="' . $slug . '">' . $title . '</h2>';
            }, $content);
    return $content;
}

add_filter('the_content', 'anchor_content_h2');

And there we have our anchor tags. Now we can link to specific sections of our website like How to overwrite a CSS rule. Add some smooth scrolling if you desire, and you will have an impressive and user friendly website.

Why this feature is not a default in WordPress you ask?

Well, according to W3C Recommentatin for anchor tags, you can not have id attributes declare the same name twice in the same document. And since these elements are coming from the content editor generated by the user, there is no way to produce a valid markup if users use the same sub headings in the same post.

4 thoughts on “Adding id attributes to H2 tags in WordPress to use as anchor tag”

  1. Thank you for your article, I was missing such a feature in WordPress. Smart implementation, though I’m a bit skeptic about using pattern matching here.

    However, you could still improve your article by pointing out, how you create the anchor icon next to each caption that can be used to link to the specific section. I figured out by myself already (via your GitHub repo), would be a great addition to the article, though.

  2. In case the `h2` has any class or attribute such as “ then this would do the trick:

    function anchor_content_h2($content) {

    // Pattern that we want to match
    $pattern = ‘/(.*?)/’;

    // now run the pattern and callback function on content
    // and process it through a function that replaces the title with an id
    $content = preg_replace_callback($pattern, function ($matches) {
    $title = $matches[2];
    $slug = sanitize_title_with_dashes($title);
    return ” . $title . ”;
    }, $content);
    return $content;
    }

Leave a Reply

Your email address will not be published. Required fields are marked *