How to add an ID to a header in WordPress

You might need to add an ID to a header in WordPress for many reasons, whether you want to make your own table of contents or link to that heading within the same or another article. After reading, you will know how to add the ID to the heading.

Adding ID to the header using Classic editor

To add the ID to the header using the classic editor:

  1. Click on the Text tab (see screenshot). You should see your header there, something like <h1>Your header</h1> (you might see h2, h3, h4, etc, it's the same process).

  2. Add id="write-an-id-here" in between the first h1 and >, like so <h1 id="random-id">Your Header</h1>.

    Write any "id" you want.

    Screenshot of adding header to classic editor in Wordpress

Adding ID to the header using Block editor (Gutenberg)

To add the ID to the header using the block editor:

  1. Click on the heading block and then on the 3 vertical dots.

  2. Select "Edit as HTML". You should see your header as HTML code, something like <h1>Your header</h1>.

    Screenshot of adding header to block editor in Wordpress. part 1

  3. Add id="write-an-id-here" in between the h1 and >, like so <h1 id="random-id">Your Header</h1>.

    Write any "id" you want.

    Screenshot of adding header to block editor in Wordpress. part 2

Now that you have your ID, let's say you named the ID random-id. We can link to it in the same page like so <a href="#random-id">Random Id</a>. You can do this via the HTML code or by creating a link like you normally do in WordPress (see screenshot). Thanks to adding the ID, we can reference it with the hashtag symbol.

Screenshot of adding a link in WordPress Block editor

As an example, I added the ID random-id to my header, so this link (using #random-id) will take me there.

If you want to link to it from another page, add #random-id to the end of the URL. Example: https://uhded.com/add-id-header-wordpress#random-id. So this link (using the entire URL) will also take me there.

Want to learn how to code and make money online? Check out CodingPhase (referral link)