Please share

Adding page anchors in WordPress (or links within a page in WordPress) has always involved looking at the html view of the editor to add your anchor tags. With the Gutenberg editor, this has now become a lot easier to do, and one of the many reasons I personally enjoy writing blog posts with Gutenberg.

Improve SEO - Add Page Anchors in WordPress Gutenberg

In this how-to post, I’m going to show you how easy it is to add page anchors in WordPress Gutenberg, and how to link to them. I’m also going to show you an alternative way of doing them if your theme uses a sticky menu header. The issue with sticky menu headers is the anchor point you link to is usually hidden under the sticky header. It’s a bit more work, and not an ideal way to add page anchors in WordPress Gutenberg, but it works.

Table of Contents

  1. Why You Should Add Page Anchors in WordPress
  2. Option A: Add Page Anchors in WordPress
  3. Option B: Adding Page Anchors in Themes with Fixed Headers
 

Why You Should Add Page Anchors in Your Posts

There’s really two main reasons you would want to add anchors on your posts in WordPress, especially for long form posts – I’m talking about 1,000 word and longer posts here. Firstly, it makes it easier for your blog or site visitors to understand the sections included in your post, and it makes it easier for them to navigate to the sections they’re looking for.

Secondly, when writing long form posts (which Google loves, by the way), the content structure is important and Google even wrote about using named anchors to section your posts as they will index and deep link to those anchors . So ultimately, adding anchors in your long form posts are also good for SEO. Google says to make sure the sections are well structured and broken down into distinct and logical sections, use descriptive anchor names – not just “section_a”, for example, and use a table of contents which links to your anchors.

There you go – straight from Google!

 

Option A: Add Anchors in WordPress Gutenberg

Let’s start! I’m going to show you how to add the page anchors, and how to link to them from a Table of Contents. Note: while this will work great on any WordPress site, and be good for SEO, if your theme uses a sticky header (your menu stays at the top of the page even if you’re scrolling down the page), you may want to check out the next section for a workaround to how to resolve the issue of your anchor points getting blocked by your sticky header.

WordPress Gutenberg now includes a convenient and easy way to add anchor points when you’re using the Header Block. Simply click on your header block, and in the settings on the right of the page, under Advanced, type in your anchor point:

add page anchors in wordpress gutenberg - 6

Yes, it’s that easy to add HTML anchors in Gutenberg! What’s great too, as you type the anchor point, any spaces you type will be replaced by dashes, so type naturally and don’t worry about adding the dashes.A

 

Link to Your HTML Anchors

The next step in adding page anchors to your posts is to link to them from a suitable table of contents. For this example I’m going to use a list block, and then add the links from each point to the appropriate anchor.

Insert a list by clicking on the “+” symbol that appears on the block you want to insert the list before. The “+” symbol will appear when you mouse over the block.

add page anchors in wordpress gutenberg - 1

If you see the List block, click on it to add it. If you don’t see the block, start typing in list to search for it, then click on it to insert it.

add page anchors in wordpress gutenberg - 7

Fill out your list or table of contents (you could also use a regular Paragraph block).

When you’ve got those added, highlight one item, and click on the link icon to add a new hyperlink.

add page anchors in wordpress gutenberg - 9

Now type in your HTML anchor you used previously – it should be exactly the same, but precede it with the # symbol. So in this case it would be:

#how-to-add-page-anchors

Then click on the Apply button – that’s it! Repeat this for all of your other anchors.

add page anchors in wordpress gutenberg - 10

When your post is published, clicking on that link will take you to that section of the page or post. You can also copy that link and refer to it from any other page, post, or anywhere else. Your sites URL and the post or pages slug/permalink will automatically be included, so using it even if you’re not on that page, will take you to the post or page and to the that section.

 

Option B: Add Page Anchors in Gutenberg with Fixed Headers

This section provides one workaround if your site uses fixed headers and the anchor ends up behind the fixed or “sticky” header. This site for example, currently uses a fixed header, so when you scroll, the menu “sticks” to the top, which creates an issue when using anchor links. Sticky or fixed headers work by overlaying the header over your content on the page. So when an anchor is linked to, it actually ends up behind the header and not visible.

This is a major problem with no one unique solution that works on all browsers. Credit to Calvin Spealman for his CSS tips on fixed headers for the following solution. This is the one currently used on this site, but it’s by no means ideal. I’m going to show how to add page anchors with fixed headers anyways, it should work with most themes, but your mileage may vary.

 

Inserting Page Anchors for Fixed Headers

The general process involves adding the anchor before the heading, wrapping the ID and the title in a div class, then adding some css code to correctly perform line up the jump point.

First, add a new HTML block just before your heading:

add page anchors in wordpress gutenberg - 4

Now copy and paste this code into the HTML block:

<div id="anchor"><a id="my-anchor-text"></a>

Make sure to change the my-anchor-text to whatever you want to name your anchor ID. Again, this should be descriptive and match or be related to the header you’re linking to.

add page anchors in wordpress gutenberg - 4

Now we close out the div. Insert another HTML block after the heading and insert the following in the HTML block:

</div>

It should now look like this:

add page anchors in wordpress gutenberg - 3

Now go ahead and add your links to your anchors as described above.

 

Add CSS Code for Page Anchors with Fixed Headers

Now we need to add some css code to help the page anchors work properly. Note: You only need to do add this code if you’re using fixed headers. In your Customizer, or where ever your theme lets you add additional CSS code, copy and paste the following code:

/* Blogger2wp.com - adjust anchor landing for fixed header */
#anchor a {
  position: absolute;
  left: 0px;
  top: -100px;
}
#anchor {
  position: relative;
}

Make sure to click on Publish to save your changes. Your code should look like this:

add page anchors in wordpress gutenberg - 2

Now, depending on the size of your fixed header – ie the total height in pixels – you may need to adjust the line top: -100px; to suit your theme. Change the -100px to whatever you need, for example -200px, -160px, etc.

And that’s it!