How to add Scroll-to Links in Classic WordPress Editor

In this blog post, we will explore how to manually add scroll-to links in the classic WordPress editor. While the Gutenberg block editor offers amazing features, there is still the option to implement scroll-to links using classic WordPress by delving into a bit of code wrangling. Let’s dive into the steps to achieve this.

Understanding the Code Editor in Classic WordPress Editor

When working in the classic WordPress editor, it’s important to familiarize yourself with the two tabs available in the code editor – the Visual tab and the Text tab. While the Visual tab (1) is where you typically write most of your content, the Text tab (2) allows you to apply or modify code.

Visual and Text Tabs in the Classic WordPress Editor

Adding IDs to Headings

To enable scroll-to functionality, you first need to assign unique IDs to your headings. By structuring your content with headings (e.g., heading level 2), you can easily identify them in the Text tab. Use the ‘Ctrl + F’ shortcut to search for specific headings (e.g., ‘h2’) and assign IDs accordingly.

In code view, type id="your-id" for your headings as highlighted below. IDs cannot include spaces. Copy the ID to your clipboard.

Add IDs to Headings in Classic WordPress Editor
In code view, added an id="toc-manual"

Once you have assigned IDs to your headings, switch back to the Visual mode (1). To create a scroll-to link, select the text you want to link from (2), click on ‘Insert Link’ button (3) and instead of a URL, insert a hash followed by the ID you copied earlier #your-id. Applying this link will allow users to smoothly scroll to the designated section on the page.

Create scroll-to link in Classic WordPress Editor
Creating scroll-to link in Classic WordPress Editor, added a link #toc-manual to the heading with the ID=”tot-manual”

Implementing Smooth Scrolling

Avoid the jarring jump. For a seamless scrolling experience, it’s recommended to add custom CSS code to enable smooth scrolling. By including the necessary code in the appearance customisation settings, you can enhance the overall user experience on your website.

To enable smooth scroll, simply copy-paste the following CSS code.

html {
    scroll-behavior: smooth;
}

To add the above CSS code, from the WordPress menu, select Appearance > Customise > Additional CSS.

Additional CSS
You can also add CSS using a plugin like Simple CSS.

Conclusion

By following these steps, you can manually add scroll-to links in the classic WordPress editor, offering a user-friendly navigation experience for your visitors. Enhance your content organization and user interaction by implementing scroll-to links and smooth scrolling effects on your website.

I hope you found this guide helpful in optimizing your WordPress content with scroll-to functionality. Happy coding!

Leave a comment

 

Get in touch


VJ Design - Web Design Melbourne
Affordable and creative web solutions from Melbourne, AU. I build robust fast-loading WordPress sites for a fraction of the price. Call VJ on +61389867186
Address :
106 Alamanda Blvd,
Point Cook,
VIC - 3030
Australia.
Tel : +61389867186
Email : hello@vjdesign.com.au

 Logo

Image of

$600-12000