- \n
- What is an anchor link?<\/a><\/li>\n\n\n\n
- Common uses for anchor links in WordPress<\/a><\/li>\n\n\n\n
- How to create anchor links in WordPress<\/a><\/li>\n\n\n\n
- How to auto-add headings into a table of contents using anchor links<\/a><\/li>\n<\/ul>\n\n\n\n\t\t
<\/div>\n\t\t\t\n\t\t \t\n\t\t \t\tHow to correctly use \u2693 anchor \ud83d\udd17 links in #WordPress \ud83d\udca1<\/a>\n\t\t \t<\/div>\n\t\t \t\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n\n\n<\/div>\n\n\n\nWhat is an anchor link?<\/h2>\n\n\n\n
An anchor link serves as a hyperlink within a page or post that the user clicks to navigate to another part of the page.<\/p>\n\n\n\n
It\u2019s a form of interactive internal link, but instead of sending users to another page on your site, they get directed to another section of the current<\/em> page.<\/p>\n\n\n\n
Furthermore, anchor links play a strong role in SEO<\/a> efforts, seeing as how they help define the structure of a page for search engines and users, particularly when used as a table of contents<\/a>.<\/p>\n\n\n\n
In short, anchor links minimize scrolling, since a simple click brings visitors to their desired content.<\/p>\n\n\n
<\/div>\n\n\n\nCommon uses for anchor links in WordPress<\/h2>\n\n\n\n
Take a look at the main uses of anchor links to better understand how you can implement them on your website:<\/p>\n\n\n\n
- \n
- Table of contents<\/strong>: create a list of anchors to specific headers of the page or post; when a user clicks a table of contents item, they get routed to the correct header.<\/li>\n\n\n\n
- \u201cBack to top\u201d button<\/strong>: often implemented as a counter-navigation item for a table of contents, a \u201cback to top\u201d link or button returns the user to the beginning of a page; it\u2019s particularly useful for pages with lengthy content.<\/li>\n\n\n\n
- Directories\/wikis<\/strong>: a collection of data or content stored on one page often requires navigational links; this use of anchor links works similarly to a table of contents, but wikis and directories have different formats for navigation, along with anchor links scattered throughout content.<\/li>\n\n\n\n
- Navigational menus on one-page websites and landing pages<\/strong>: a one-page website<\/a> still needs a way for users to move around, so instead of a traditional menu that directs visitors to new pages, an anchor link menu auto-scrolls to relevant sections.<\/li>\n\n\n\n
- Links and call to actions in hero banners<\/strong>: anchor links work well inside buttons and hero images, considering you can add a call-to-action button<\/a> that, when clicked, sends users to a conversion form or checkout module.<\/li>\n<\/ul>\n\n\n
\nThis table of contents demonstrates a visitor clicking on an anchor link, which sends them to their desired section on the same page.<\/em><\/figcaption><\/figure><\/div>\n\n\n <\/div>\n\n\n\nThis \u201dBack to top\u201d button offers a rapid way to return to the top of a page<\/em>.<\/figcaption><\/figure><\/div>\n\n <\/div>\n\n\n\nHow to create anchor links in WordPress (Block and Classic Editor methods)<\/h2>\n\n\n\n
Manually adding anchor links in WordPress can be done in both the Block (Gutenberg) Editor and the Classic WordPress Editor. We\u2019ll show you how to set up anchor links using both.<\/p>\n\n\n\n
- \n
- Adding anchor links in WordPress Block (Gutenberg) Editor<\/a><\/li>\n\n\n\n
- Adding anchor links in WordPress Classic Editor (HTML)<\/a><\/li>\n<\/ul>\n\n\n
<\/div>\n\n\n\nAdding anchor links in WordPress Block (Gutenberg) Editor<\/h3>\n\n\n\n
Start by creating a page or post on WordPress. It\u2019s best to work with anchor links when you\u2019re done with your content.<\/p>\n\n\n\n
Create a table of contents at the beginning of the post. Make a mental note of the text segment you intend to link; for this tutorial, we\u2019ll link the \u201cBow Sweep\u201d bullet point.<\/p>\n\n\n
\n![\"picking](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2022\/11\/DraggedImage.jpg\")
<\/figure><\/div>\n\n\nScroll to the (already created) section that relates to the text you plan on linking. It\u2019s best to keep the text for your link and header anchor the same, so as not to confuse the reader or yourself.<\/p>\n\n\n\n
- \n
- Place a cursor before the header.<\/li>\n\n\n\n
- Click the Block<\/strong> tab.<\/li>\n\n\n\n
- Scroll down to open the Advanced<\/strong> section.<\/li>\n<\/ul>\n\n\n\n
Find the HTML Anchor<\/strong> field.<\/p>\n\n\n
\n![\"opening](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2022\/11\/DraggedImage-1.jpg\")
<\/figure><\/div>\n\n\nType in an HTML anchor that\u2019s short and memorable. You can\u2019t have spaces in an HTML anchor, so stick to one word or include dashes.<\/p>\n\n\n\n
As you can see, we made a \u201cbow-sweep\u201d HTML anchor:<\/p>\n\n\n
\n![\"making](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2022\/11\/DraggedImage-2.jpg\")
<\/figure><\/div>\n\n\n- \n
- Go back to that original text you intend to link; in this case, it\u2019s an item in the table of contents.<\/li>\n\n\n\n
- Highlight the text to link.<\/li>\n\n\n\n
- Click the Link<\/strong> button.<\/li>\n<\/ul>\n\n\n\n
![\"highlighting](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2022\/11\/DraggedImage-3.jpg\")
<\/figure><\/div>\n\n\nIn the new field, type \u201c#<\/strong>\u201d followed by the HTML anchor you just added to the header. Click Enter<\/strong>.<\/p>\n\n\n
\n![\"pasting](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2022\/11\/DraggedImage-4.jpg\")
<\/figure><\/div>\n\n\nYou\u2019ll see on the backend that the text is hyperlinked:<\/p>\n\n\n
\n![\"an](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2022\/11\/DraggedImage-5.jpg\")
<\/figure><\/div>\n\n\nGo to the frontend to test it out. Clicking the link shoots the page focus down to the desired anchor; in this case, the \u201cBow Sweep\u201d header.<\/p>\n\n\n
- Scroll down to open the Advanced<\/strong> section.<\/li>\n<\/ul>\n\n\n\n
- Adding anchor links in WordPress Classic Editor (HTML)<\/a><\/li>\n<\/ul>\n\n\n
- \u201cBack to top\u201d button<\/strong>: often implemented as a counter-navigation item for a table of contents, a \u201cback to top\u201d link or button returns the user to the beginning of a page; it\u2019s particularly useful for pages with lengthy content.<\/li>\n\n\n\n
- Common uses for anchor links in WordPress<\/a><\/li>\n\n\n\n
![\"looking](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2022\/11\/DraggedImage-6.jpg\")
<\/figure><\/div>\n\n\n![\"looking](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2022\/11\/DraggedImage-7.jpg\")
<\/figure><\/div>\n\n\n![\"clicking](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2022\/11\/DraggedImage-8.jpg\")
<\/figure><\/div>\n\n\n![\"finding](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2022\/11\/DraggedImage-9.jpg\")
<\/figure><\/div>\n\n\n![\"the](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2022\/11\/DraggedImage-10.jpg\")
<\/figure><\/div>\n\n\n![\"highlighting](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2022\/11\/DraggedImage-11.jpg\")
<\/figure><\/div>\n\n\n![\"the](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2022\/11\/DraggedImage-12.jpg\")
<\/figure><\/div>\n\n\n![\"highlighting](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2022\/11\/DraggedImage-13.jpg\")
<\/figure><\/div>\n\n\n![\"inserting](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2022\/11\/DraggedImage-14.jpg\")
<\/figure><\/div>\n\n\n![\"the](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2022\/11\/DraggedImage-15.jpg\")
<\/figure><\/div>\n\n\n