How to create a local link on HTML page? [WordPress]

If you have a long post, then you can create links to different sections on the same page to improve the user experience. These are called local links.

If you add local links at the beginning or end, users can quickly jump to the section by just clicking on those links.

Below are the simple steps to create a link to a section of HTML page or your wordpress post. Im going to use id selector to create local links.

Target Setup [Section or a place on the HTML web page]

  1. Select the text or paragraph that you want to link to.
  2. Click on Text Tab (in classic Editor) or see below pic for Gutenberg editor to get HTML pageedit-as-html-wordpress-gutenberg
  3. Add <a id=”Give_some_id_name_here”> </a> before or after the text where you want to create the link toid-name-html-page-example-wordpress
  4. Copy the id name(without ” “) that you have given in above step. For example, id1 in above screenshot.
  5. Click on Visual tab (in classic Editor) or “Edit Visually” in Gutenberg editor (see below)edit-visually-wordpress-gutenberg-editor

Note: If id name is more than one word, then use underscore ‘_’ to separate them.

Local Link setup

  1. Select the text where you want the user to click and jump to the target.select-local-link-text-wordpress-gutenberg
  2. Click on the link buttonlink-button-wordpress-gutenberg
  3. Enter #id_name. Here id_name is the name that you copied in 4th step in Target setup procedure.local-link-id-link-wordpress
  4. Click on Apply buttonapply-button-wordpress-gutenberg

Preview the page, click on the local link and verify that it jumps to the target.

As explained above, you can create as many local links as you want.

About the Author

SRINI S

A passionate blogger. Love to share solutions and best practices on wordpress hosting, issues and fixes, excel VBA macros and other apps

Leave a Reply

Your email address will not be published. Required fields are marked *