Content Anchor Links

Link to a Specific Part of a Page in WordPress (Full Guide)

/ Content, Wordpress Troubleshooting / By
Pin

Quick Menu – click to skip to sections

Being able to allow readers to jump to a certain part of the page on your WordPress site is a crucial feature and helps with the accessibility and readability of your content. Is there an easy way to create these content anchors?

There are actually several different ways to do this. The new Gutenberg version of WordPress has this feature built into it’s interface and so is super easy to do. If you still use the old Classic Editor because that is what you prefer, the process is still fairly easy and can be done without a plugin.

These page jumps are commonly known as content anchors and can be useful for a number of reasons. Most importantly, they allow readers to go through your content to get to the exact information they need, which can be helpful, especially for longer articles.

You can create a “section menu” at the top of these bigger posts and allow users to click down to the section they need. This makes for a better user experience and makes them more likely to stick around, especially for longer pillar content you have produced, if you have given them an easy way to navigate through the content.

It is possible to jump to both a specific part of the same page and also of a different page if you want. We will also go through the process of doing it both in the new and old versions of the WordPress editor to cover all the bases.

Using Content Anchors in the New Gutenberg WordPress

Inserting content anchors into the new Gutenberg WordPress is easy and part of the main menu of features along with linking and formatting text with bold, italics etc. See the video below from Alex at WP Eagle for a run down of the process; we have also listed the main steps below the video.

 

Here are the steps:

  • Click on the section or part of the page you want to add your clickable list of sections to.
  • Use the Add List feature of the Gutenberg Editor to add a menu list of all the sections in your article you want users to be able to scroll down to. You are going to set up anchor links off each of these to the relevant section on your page.
  • Click on a H3 subsection heading of your article you want to add an anchor link to, then click on Advanced on the right hand side menu.
  • In the HTML Anchor box at the top enter a unique ID you can identify the anchor by (eg. Nike Products, Asics Products etc). Note down each of the unique anchor IDs you set as you go as you will need to use them later.
  • Do this for each of the subsections you want to add anchor links to in your article.
  • Link each of these up to the menu you have created at the top by highlighting each anchor in your list. You can do this in Visual or Text Editor by highlighting the text you want add the anchor link to, clicking the Link button and adding the anchor ID in the form of #UniqueID, where unique ID is the specific tag you created for each section. The hashtag in front tells WordPress this is an anchor.
  • eg. #NikeProducts, #AsicsProducts #OtherProducts and so on for each of your subsections.
  • Save your post and test out the anchor links. They should work and readers can now skip straight down to the sections you listed at the top.
  • If you want more of a gradual scroll effect in the way the page moves to certains sections, see the video above for how to do this using the free Page Scroll To ID plugin.

Using Content Anchor Links in the Old WordPress (Classic Editor)

A lot of people still aren’t keen on the Gutenberg WordPress interface and prefer to use the old Classic Editor to build their pages and posts. If you like you can switch to the Gutenberg just to create the anchors, and then switch back to Classic Editor to carry on your content.

However, we have a guide below for creating the same content anchors entirely in the old Classic Editor of WordPress. We have specific guides for creating anchor links both on the same page and to a different page. See the video and the lists below.

Creating Content Anchors in Classic Editor on WordPress

Creating Content Anchors on the Same Page in Classic Editor

Here is how to create content anchor links on the same page. It requires inserting a little bit of HTML code using the text editor, but is really easy and no big deal.

You are only switching from the Visual to the Text editor on the top right of your page to enter the code and there is no risk of messing your site up.

  • Enter your quick scroll menu list again at the top of the page of all the sections you want users to be able to scroll down to eg. Samsung Products, Asus Products etc
  • Scroll down to the first section you want the user to be able to scroll down to and switch to the Text Editor.
  • On the line just above the section h2/h3 heading, enter <a name=YourID></a> where YourID is the unique tag you want to name this content anchor with eg. SamsungProducts. If you like you can simply copy and paste the bolded code above in everywhere you want anchors and just change the YourID bit to what you want to call each anchor.
  • This little piece of code creates an anchor point on that part of the page you can scroll down to later. If you switch back to the Visual Editor you can see it.
  • Do this for all the H3 subsection headings you want to add anchor links for. Insert the anchor links on the line just above each section heading in the Text Editor. Make a note of the unique ID/tags you make for each section as you go, pasting them into a notepad document if you prefer.
  • Connect these unique tags up to the quick scroll menu headings at the top by highlighting each item in the list, clicking on Link in the text editor, and then inserting #YourID where YourID is the unique tag you created for that anchor point. You need the hashtag in front to tell WordPress this is an anchor.
  • Save the page and test the anchor links. They should work, directing you to each specific part of the same page.
  • The anchor tag IDs you enter both need to be exactly identical. If the anchor links don’t work then the tags have probably been entered slightly differently at the anchor point and in the quick menu link at the top. Check for any differences, including any extra symbols like commas which can stop the code working.

Creating Content Anchor Links to a Different Page in Classic Editor

Here is how to do exactly the same thing, but to send the user to a specific part of a different page on your site, not the same page.

  • Follow exactly the same steps as above, skipping down to the point on the different page you need, switching to the Text Editor and inserting the anchor tag in the <a name=YourID></a> format, where YourID is the unique name you give to that anchor point.
  • Save/Update the page. This now creates the anchor point on the other page.
  • Copy the URL (link) of this page you want to be able to send the reader to.
  • Head back over to the page you are sending the reader from and find the piece of text you are wanting to link from.
  • Switch to Text Editor, highlight the text you want to link and paste in the URL link you just copied into the part of the code just before the #YourID bit.
  • The new code should look something like this: <a href= “http://mynichesite.com/products/#SamsungProducts”> – the page link you want to send them to, followed by a slash, hashtag and the unique tag ID you assigned to that part of the page.
  • In more general form, the link format is <a href= “PageURL/#AnchorID”>  where PageURL  is the full link of the page you are sending them to, and AnchorID is the specific name you gave to each anchor. If you like you can copy and paste that into your text editor link box and simply insert the actual URL and Anchor ID you are using.
  • Save the page and test the link. Make sure all IDs have been entered exactly the same at the anchor point and on the quick menu links. If the anchors don’t work this is usually the problem.

If you need to do this multiple times then it can help to have a system, whereby you create all the anchor IDs you need first, then paste in your first URL each time and just edit the hashtag code identifier at the end for each anchor.

Doing this can be especially useful if you have created Resource or product pages which have multiple categories of products on them, and you want to link users from other posts not just to the page, but to the specific section they need on that page (eg. the Water Storage Tanks section halfway down the page).

If you anticipate needing to link to parts of a certain page a lot in your content, it might be an idea to save all the anchor links for the different sections to a text file on your desktop so you can easily copy and paste them back into your content whenever you need them.

Pin