At this point I’m starting to write more and more blog posts. Every now and then I get a couple questions from people that I’ve covered in a blog post before and I will send them a link to that blog post. This works great, but can be a bit lacking if you want to specifically point to a section in that post.

HTML IDs

For those who are less familiar with HTML, you can assign an id to each HTML tag like this <h1 id='hello-world'>Hello World</h1>. When doing that, you can actually send someone a link like this; http://domain.com/post-url#hello-world (note the # in front of the ID). What will happen is that the user who will click on that link, will be directly taken to the section with that specific hello-world ID.

Adding a ID to each heading (or section) can be a big pain and you don’t want to do that, you want to write!

Automatically adding IDs

The solution here would to automatically add IDs to each heading in your post. To accomplish this, I’ve created a code snippet that can be used accomplish this. You can copy/paste the code below in your themes functions.php and it will automatically add the IDs. When you’ve already assigned an ID to the heading it will not do anything to it.

The ID that is assigned to the HTML tag is the title text, only then all lowercase, without HTML tags, and without spaces.

This code can be used by anyone, even if you don’t intent use it yourself, you will most likely make someone very happy that does want to use it! Visually there won’t change a thing so there is very little reason not to use it.

The result of the code above:

automatic-heading-ids

Adding anchors in front of the titles

If you want to take it a step further, you can also add anchor icons in front of your heading and link that to that specific section.

wordpress-auto-add-ids-anchor

 

This way you will make it almost too easy to share a section of your post, and people will love it!

In order to get this done you can use the modified code below. Do note that you do need a anchor icon somewhere. I’m using <i class="glyphicon glyphicon-link"></i> to display my icon, mine is a  Twitter Bootstrap icon (see what I did with that link, its a link to the icons section!).

This also needs a little bit of CSS:

Hiding the anchor icon

Ok, so I know some people will not dig the new icon next to their headings. It is also possible to hide the anchor until someone hovers over the heading. Only change would be a bit CSS change.

The result:

heading-show-anchor-on-hover

Final words

This is a very simple feature, but can be very powerful for your website visitors. Please leave a comment below if this was helpful for you, or if you ran into any challenges 🙂

  • Jeroen Sormani

    I'm a professional WordPress plugin developer on a mission to create the best plugins for my clients. I'm specialised in developing general WordPress, WooCommerce and Easy Digital Downloads plugins.

    Interested in talking about a WordPress project? Get in touch!

    Follow me on Twitter
  • 8 thoughts on “Automatically add IDs to your headings

    Anselm May 19, 2016 at 10:58 pm

    Thanks for the code snippet!

    Julien Vernet June 15, 2016 at 5:10 am

    Perfect for documentation pages 🙂 Thanks for sharing this, I rather use a code snippet than a plugin.

    Lauren Gray July 29, 2016 at 1:33 pm

    It’s 6 AM and I am perfectly happy that no brain power has been necessary so far, thanks to your generosity sharing this! Cheers, Lauren

    Simon August 3, 2016 at 2:20 pm

    Great post, thank you!

    Would it be possible to add a table of contents at the beginning of the post?

    Rodolfo August 3, 2016 at 7:05 pm

    Awesome post Jeroen! Just implemented the above on the blog and it’s so much easier to link to a subsection of each post 🙂

    Buzz December 6, 2016 at 3:54 pm

    Bless you! Thank you! Exactly what I was looking for. Great work! 🙂

    francis March 10, 2017 at 6:20 pm

    Hi Jeroen,
    Great code snippet, that helps us with tocbot (https://tscanlin.github.io/tocbot/) implementation.

    We noticed the function works great on single site but not when added to functions.php in a child theme on multi-site.
    Any ideas?

    Thanks
    Francis

    Jeroen March 11, 2017 at 3:32 pm

    Hi Francis,

    I haven’t tested the code on a MS, but I don’t see any reason in the code why it shouldn’t work.

    Might need some further debugging in that case 😉

    Cheers,
    Jeroen

    Leave a Reply