How to Create Heading Links in WordPress Content?
Creating heading links, also known as anchor links or jump links, in WordPress content can significantly enhance the navigation and usability of your articles, especially for long posts or pages with multiple sections. Anchor links allow users to quickly jump to specific sections of your content. This guide will walk you through the steps to create heading links in WordPress.
Step 1: Edit Your Post or Page
Log in to your WordPress Dashboard. Navigate to Posts
or Pages
and select the post or page you want to edit. Next, click Edit
to open the post or page in the WordPress editor.
Step 2: Add Anchor Links to Your Headings
If you are using the WordPress block editor (Gutenberg), follow these steps:
- Click on the heading block you want to link to.
- In the block settings on the right-hand side, scroll down to the
Advanced
section. - Find the
HTML Anchor
field and enter a unique identifier for the heading (e.g.,introduction
,section-1
,conclusion
). - Go to the section where you want to add the link.
- Select the text or button that will link to the heading.
- Click the link icon in the toolbar.
- Enter
#
followed by the HTML anchor you set for the heading (e.g.,#introduction
).
Using the Classic Editor
If you are using the Classic Editor, follow these steps:
- Switch from the Visual editor to the Text editor to access the HTML view of your content.
- Find the heading you want to link to in the HTML code.
- Add an
id
attribute to the heading tag (e.g.,<h2 id="introduction">Introduction</h2>
).
<h2 id="introduction">Introduction</h2>
- Highlight the text or button you want to use as the link.
- Click the link icon in the toolbar.
- In the URL field, enter
#
followed by theid
you set for the heading (e.g.,#introduction
).
Know more: Blogroll Links vs WordPress Menus: Which to Choose
Step 3: Test Your Links
After adding the anchor links, it’s important to test them to ensure they work correctly.
- Click
Preview
to open the post or page in a new tab. - Click the links you created to ensure they navigate to the correct headings.
Step 4: Improve User Experience
For longer posts, adding a table of contents (TOC) with anchor links can greatly improve navigation.
- Go to
Plugins ⟶ Add New
. - Search for “Table of Contents” plugins (e.g., Easy Table of Contents, LuckyWP Table of Contents).
- Install and activate your preferred plugin.
- Follow the plugin’s instructions to configure and insert a TOC in your post or page.
Add Smooth Scrolling (Optional)
For a better user experience, you can add smooth scrolling to your anchor links. This requires some additional CSS or JavaScript.
- Go to
Appearance ⟶ Customize ⟶ Additional CSS
. - Add the following CSS code:
html {
scroll-behavior: smooth;
}
Click Publish
to save your changes.
Learn: How to Add Excerpts to Your Pages in WordPress
Wrap Up
Creating heading links in your WordPress content is a simple yet effective way to improve navigation and user experience, especially for longer articles. By following these steps, you can easily add anchor links to your headings using either the block editor or the classic editor. Additionally, consider adding a table of contents and smooth scrolling for enhanced usability. Happy linking!