When you are writing in your WordPress blog, sometimes you want to link to a section inside the same post. This is called an internal link, and the process for creating it is the same for blog posts and website pages.
How do you create a link to a section in the same post or page?
A good example of when you want to create internal links is when you create a Frequently Asked Questions (FAQs) page. So, let’s use that as our example.
Step 1 – Create a list of the Questions
- How do you create a link to a section in the same post or page in your blog?
- How do you create a link to a page within your own blog post?
- How do you create a link to a page in someone else’s blog?
Step 2 – Write the answers
For each question, I create an answer section. Each section is a block container that holds a heading tag and a paragraph .The heading tag (h3) repeats the question, and the paragraph contains the full answer to the question.
Once you enter the heading and the answer, select the container. Check to make sure that you have the complete section selected (both the header and paragraph appear inside a box outline of the container). For containers, I tend to use Advanced Columns. You might use Columns or a Layout section block or some custom WordPress block.
With the container selected, look to the area on your screen where the Page and Block management menus are located. On my screen, it is a scrollable area on the right that takes up about 20% of the editing screen.
Make sure that Block is selected. On my screen it is underlined when selected.
Scroll to the bottom area of that menu section, looking for Advanced, and click the pull-down menu.
Enter a unique name in the HTML Anchor box.
How to name the link anchor text
Use hyphens (dashes -) not underscores (_) and no spaces to connect multiple words. You can also make a string of letters by squishing words together without punctuation.
Make sure that the string you create is unique to the WEBSITE, not just unique to this post/page. For our example case, let’s say that I used myuniquestring as my anchor text.
Avoid using reserved words, special characters, and punctuation.
Step 3 – Create the live link to this section in your page.
Select the string you entered in the HTML Anchor box and copy it.
Scroll back to your list of questions.
Highlight the question to which this answer section is related.
Click the link icon. In the link box, enter # (the number sign (hashtag)), then paste in the HTML Anchor that you just created below. Leave no space between the hashtag and the letters (#myuniquestring). Do not check any of the link options below. Click the curly arrow to save the link.
Save your work and test. If it works fine, then repeat this process for all your questions.
Troubleshooting Internal Links
In 2023, the most common issue with this process of creating internal links is NOT that the links don’t work, it is that when the screen scrolls to the area, some of the content (usually the heading) is not visible. It is hidden by the scrolling menu that floats down the page creating easy access to other pages for visitors.
There are number of ways to fix this.
The least-technical way to fix the header menu overlap on internal links is to 1) add space above the answer section using the Spacer block, 2) then cut and paste the HTML anchor that you originally wrote in the answer section into the HTML anchor box of the Spacer block. The caution here is to make sure that you have only one anchor text with that unique text string.
Since you already connected your question to the HTML anchor text, there is no need to go back and repeat that part. Just save your work and look at it again. The beauty of using the Space block is that you can drag it to expand and contract to the exact space that you need.
As a technician, I use CSS to fix the header menu overlaying the linked-to areas. You may be familiar with the Advanced CSS area found via the WordPress Dashboard by clicking Appearance, Customize, Advanced CSS. This is where you would add the scroll-padding-top CSS property. You would assign it to the answer section’s “class”.
The height of the padding is expressed in pixels, percentage, and ems. So, you might write something like this:
.myquestiontopic-answer { scroll-padding-top: 100px; }
If I were adding a class to the answer section for the first question above, I’d use a name like “link-inside-post”. Then I’d add this in the CSS:
.link-inside-post { scroll-padding-top: 100px; }
How to add a class to a section on your WordPress blog post or page
Just like in step 2, you select the container of the section and go to the HTML Anchor area. Next, below the HTML Anchor box, enter a unique string of text in the Additional CSS Classes box. Use the same guidelines for the string of text you put in the Additional CSS Classes box as described above for the HTML Anchor.
Note: It is more common with classes to use hyphens to connect words and not either of the other options mentioned above. c
See detailed info about the scroll-padding-top property here. It sounds odd, but, the height of the padding is expressed as length for this property. Look at examples.
NOTE: In Preview mode, the link might not work because WordPress adds code at the end of the URL in the browser’s address bar. In that case, click in the address bar, and delete the extra info until you see just the blog address and the page name. At the end of the page name add a slash (/), then the number sign (#), then the name of your link “myuniquestring“, then click the carriage return.
P.S. This post was originally published June 11, 2011. It was totally updated to reflect the new WordPress way of doing things; the new editor that uses blocks, February 11, 2023.