How to Create Anchor Links in WordPress
Now that your site is up and running, there might still be a few minor tweaks you need to make.
One of those tweaks are anchor links.
What are anchor links?
Anchor links are often table of contents sections that appear at the top of your page. When users click on an anchor link, it takes them to a specific part of your webpage, which makes it very easy to quickly find they information they’re looking for.
Anchor links also help with SEO for your website. It makes information easy to find — for both Google and your users. Great, right?
Often, anchor links are used for long posts or longer articles on a website. It means that readers don’t have to skim an entire page to find what they’re looking for and makes for much easier navigation.
This improves the user experience of your customers and makes them more likely to check out other pages on your site.
Why are anchor links important?
Anchor links capture the attention of your users, who do not have the time or patience to spend hours combing your site for the information they need.
Anchor links can also be used to create bookmark links to specific sections on your WordPress site. You can include these links in social media posts, newsletters, and email marketing campaigns so that when users click on the link, they are taken directly to the part of the post that you want them to see.
How to create an anchor link
Creating an anchor link isn’t as daunting as you might think.
There are two easy steps to follow.
Step #1: Create your anchor link
Select and highlight the text that you want to link (usually a title or heading). This is the text that appears at the beginning of an article, not the actual section of your webpage that has this information.
Then, click the insert link button when the WordPress taskbar pops up.
At this point, you would normally insert a URL to a different page. But to create your own anchor link type in # and then type in the name of the title or heading you want to create an anchor link for.
For example, if you want to create an anchor link for a section entitled “Fluffiest Dogs in Edmonton” type #fluffiest-dogs-in-edmonton into the link function.
Make sure to hyphenate the words in your anchor link, and you can capitalize them to make it easier to read. Don’t create an anchor link where the heading is very long or very complex.
Step #2: Add a link to the section of text
Now, scroll down your webpage to the section that you want users to be able to navigate to through the anchor link. This is usually a heading for that section.
Click on the block of text with the desired heading. Navigate to the block settings and click on the Advanced settings tab.
Under the HTML anchor section, input the same text that you used as an anchor link for the above heading. For example, the “Fluffiest Dogs in Edmonton” section would be inputted as “fluffiest-dogs-in-edmonton” under the HTML anchor section. No “#” should be inputted.
And that’s it! When you save your site, you can preview your brand new anchor link before making it public.
How do you link to a specific paragraph of text and not a heading?
Easy! Select the block you want to link and click on the three dot function in the toolbar. Then press edit as HTML.
Then select find the HTML tag for the paragraph you want to link to. For a paragraph, select <p>. For a table, select <table>.
Next, add in your anchor as the ID attribute to the tag.
It would look something like this: 1 | <p id=“fluffiest-dogs-in-edmonton”>
Then you will see a message that says the block contains unexpected or invalid content. Press the “convert to HTML” button to fix this.
Then you’re good to go.
Anchor links in Classic Editor
If you’re still using Classic Editor, the older version of WordPress, for your site, here’s how you add in anchor links there.
Step #1: Create your anchor link
Select the text you’d like to become an anchor link and click the “insert link” button. Type in your anchor link with a # sign in front and hyphenated words.
Step #2: Add a link to the section of text
Switch to the “text” mode in classic editor and scroll down to the section you want to link to.
Find the HTML tag you want to link tom whether that’s <h2>, <h3>, or <p>.
Add in your anchor link without the “#”. For example: 1| <h3 id=”fluffiest-dogs-in-edmonton”>
And you’re good to go! Remember to save your changes.
Now you’re ready to add anchor links to your WordPress site. If you have more questions, feel free to contact our web designers at Creative Coco’Nuts!
Visit our online portfolio today or contact us.
The expert designers of the Coco’Nuts’ studio are here to help!
Contact us by email at info@creativecoconuts.ca
Talk to you soon!
SOFTWARE WE LOVE
Adobe Creative Cloud*– For Graphic Design & Photo Editing
WEBSITE HOSTING COMPANIES WE LOVE
Host Armada – For Cloud and Dedicated Server Hosting