Add IDs to all headings on a page in WordPress

See how to set the ID attribute for a heading, based on the heading content.

September 2, 2023 wordpress php gutenberg

Add a ID attribute for all heading

<?php
add_filter('the_content', 'add_id_attribute_to_headings');


function add_id_attribute_to_headings($content): string {
  return preg_replace_callback('#<(h[1-6])(.*?)>(.*?)</(h[1-6])>#', 'add_id_attribute_to_heading_callback', $content);
}


function add_id_attribute_to_heading_callback($match): string {
  [$full, $el_start, $attributes, $content, $el_end] = $match;


  if (str_contains($full, ' id="')) {
    return $full;
  }


  $id = sanitize_title_with_dashes($content);
  return '<{$el_start} id="{$id}" {$attributes}>{$content}</{$el_end}>';
}

Do you like the content?

Your support helps me continue my work. Please consider making a donation.

Buy Me A Coffee

Donations are accepted through PayPal or Stripe. You do not need a account to donate. All major credit cards are accepted.

Portrait of the author

About me

On a daily basis, I work as a Front-End Developer with a primary focus on JavaScript. I feel most comfortable with Angular and NestJS, but I’m always eager to venture beyond a single tech stack. I effectively leverage AI tools in my workflow, which allows me to quickly onboard into new technologies and write code in other languages or frameworks whenever needed.

After hours, I bring my passion for tech into the physical world. I run my own homelab, where I experiment with server management and build home automation and monitoring powered by Home Assistant.

Leave a comment