If you’ve been blogging for some time and are ready to take WordPress to the next level, you can do so by converting your blog into a website that’s functional, easy to use, and attractive.
We’ve published articles about how to establish a successful WordPress blog in 2021 and what to address before you launch your WordPress site, but we haven’t quite tackled the transition between the blog and the website.
Create anchor text links using text, images, or a button and link to a specific section on a page to minimize scrolling
Anchor links, also called jump links or in-page links, are links that lead to another part of the page. If someone clicks on an anchor link, they don’t get redirected to a new page but are instead taken to another part of the same page.
This is a user-friendly web page element that’s most suitable for pages that are long or text-heavy. With these links, visitors can jump to a specific part of the page without having to scroll as much.
CONS OF ANCHOR LINKS:
While we think the pros definitely outweigh the cons, here are a few setbacks you might want to consider before adding anchor links everywhere on your page:
-
Anchor links or a table of contents could decrease the average time on site per visitor. Why? Because they are skipping right to the content they want instead of reading your entire article. However, if you make your visitor happy right off the bat, this could result in them signing up for your newsletter or researching more into what you’re selling. So this could be seen as a pro or a con.
-
Directly related to the issue above, anchor links could possibly impact your ad revenue. Visitors skipping straight to a certain section could decrease impressions and clicks. Sites that rely heavily on advertising might want to A/B test using anchor links and table of contents.
-
If you’re changing domains or needing to add 301 redirects it’s important to note that the fragment identifier (#) is never sent to the server. This can complicate things if your changing things around down the road with your anchor links. There are ways to get around this with JavaScript, but this is by no means an easy task.
Check out more pros and cons of anchor links here.
METHOD 1 – a) CREATE A PAGE JUMP b) LINK TO YOUR PAGE JUMP:
-
Use the Plus Icon to add a new block.
-
Select Heading as the block type, or start typing /heading as a shortcut to the heading block.
-
Enter your heading text.
-
On the right side under Block Settings, click on Advanced.
-
Type a word that will become your link into the HTML Anchor field.
Make sure you have no spaces in your IDs, since that can cause problems in older browsers. Also, be sure to use a different ID for each target that you create.
-
Type some text, or add an image or button that will become what you want your visitors to click on to go to another section.
-
Highlight the text or image/button, and select the link option from the block’s toolbar.
-
Page Jump – Create Link
-
Type in the HTML Anchor you created, starting with the pound (#) symbol. For example, if you created an Anchor named create-a-page-jump you would link to #create-a-page-jump.
Now, when visitors click on the link you created, they will go to the header you added the HTML Anchor to when you created a page jump (click here to jump back to that section!)
For more information on splitting content on a page, click here.
HOW TO ADD AN ANCHOR TO A HEADING:
Compete Themes gives us a nice rundown of how to add an anchor to a heading.
-
Start by selecting a heading block in the editor. You’ll see an Advanced section in the right sidebar that is collapsed by default.
-
Open up the Advanced section, and the first thing you’ll see is the HTML anchor option.
-
Inside the HTML anchor field, give the heading a short and descriptive name. It cannot have any spaces, but you can use hyphens to separate words. For example, a section on diet in an article about caring for a dog could have an anchor like “diet” or “dog-diet.”
-
Once you’ve added the anchor, you’re ready to link to it.
HOW TO MANUALLY ADD ANCHOR LINKS IN HTML:
If you are used to writing in the Text mode of the old Classic Editor in WordPress, then here is how you would manually create an anchor link in HTML.
-
First, you need to create the anchor link with a # prefix using the usual <a href=””> tag, like this:
-
1 <a href=”#best-coffee-shops-manhattan”>Best Coffee Shops in Manhattan</a>
-
-
Next, you need to scroll down to the section that you want to show when users click on the link. Usually, this section is a heading (h2, h3, h4, etc.), but it could be any other HTML element or even a simple paragraph <p> tag.
-
You need to add the ID attribute to the HTML tag, and then add the anchor link slug without the # prefix.
-
1 <h2 id=”best-coffee-shops-manhattan”>Best Coffee Shops in Manhattan</h4>
-
You can now save your changes and preview your website to test the anchor link.
This article provides a comprehensive explanation of the different ways you can add an anchor link to your page.
HOW TO LINK TO ANCHOR LINK FROM ANOTHER PAGE:
To link to the anchor from another page you just need to add #your-anchor-name at the end of your post URL (given that you’ve set up an anchor on your post). Here is how Punch Salad explains to do it step by step:
-
Grab the post URL
-
Open a new browser’s window
-
At the end of the URL add the anchor (with hashtag). For example: #anchor-link-info.
-
Hit enter and the page opens in the right section.
IN CONCLUSION:
Anchor links are simple in principle, but there are a few things from WP Engine that you’ll want to keep in mind when using them on your own website.
Tips for Adding Anchor Links:
-
Transitions. Unless you specify a transition effect, anchor links will quickly jump the reader down to the appropriate part of the page. This can have an unpleasant result if the page moves too quickly. It’s easy to add a transition effect using a WordPress plugin such as Page Scroll to ID, or by adjusting your jump links’ CSS.
-
‘Return to top’ links. Once a user has jumped down to the location indicated by the anchor text, they’ll have to scroll all the way back up to the top if they want to visit another section. Therefore, it’s smart to include a ‘return to top’ link at the end of each section for easy navigation.
-
Using anchor links appropriately. Anchor links aren’t always necessary. For example, if you’re writing a long article with multiple chapters, it may be better to break it into separate pages (using a table of contents plugin) than to use anchor links on an endless scroll.
Overall, creating anchor links isn’t the end of the world. You don’t need to give an arm and a leg for users to be able to access specific content on your page — you don’t even need a plugin if that’s not your thing. But what you do need is an understanding of who’s reading the content to determine if an anchor link is beneficial or not.
At the end of the day, you’re writing content for your viewers to enjoy reading. If the anchor text adds more frustration, let it go.
For more WordPress tips, check out our blog. It’s filled with WordPress knowledge and offers guidance from our support team!