pixel

I see this question a lot in the Facebook Group: How do I have my anchor links go to another page.  More than once I have responded, doesn’t work, they are on page links.

Then I Googled it.  And guess what came right up?  An article I myself wrote on my own blog in 2013.  Yikes.  You can see that post here: Anchor Text | Anchor Links in WordPress.  You may also want to see this post: How to Create a One Page Navigation Bar.  If you are building a one page site, they are typically fairly long, so having anchor links makes sense.

If you aren’t really sure what an Anchor Link is let me tell you.  An anchor link takes you to a specific spot on a page.  This is particularly helpful if a page has a lot of content and you want the reader to get exactly where they need to be.  The content is the “anchor”.  Don’t ask me, I don’t make this stuff up.

Actually back in the dark ages (2013) I was using Anchor Links to build FAQ pages or sections of websites.  You can still use anchor links for this, or perhaps you have a page with lots of content and wish to use the anchor’s in your navigation menu to make it easy for someone to find what they are looking for.

You need to work in the text editor, so toggle from Visual to Text in your page editor.  Note: sometimes WordPress can be picky, so SAVE in TEXT mode.  It could save you some stress.  Note: sometimes copy / paste doesn’t work when you have ” (quote marks) they sometimes copy as curly, and you want straight (yes, I know, sounds like another reference to my hair…..again, so delighted it has all grown back).

Toggle to your WordPress Page editor and create your links, note the # is the “anchor”:

  • <a href =”#NAME1″>See item number 1 below</a>
  • <a href =”#NAME2″>See item number 2 below</a>

Then set up the anchor text:

  • <a name =”NAME1″></a>
  • <a name =”NAME2″></a>

If you are linking to another page your code would look like this:

  • <a href=”http://YourSiteHere.com/Page-Name#NAME1″>Name1</a>
  • example: <a href=”https://eileenlonergan.com/anchor-links-anchor-text-in-wordpress/#NAME1″>Article from 2013</a>

Then the anchor text is place just before the “anchor” content.

  • <a name=”Name1″></a>

If you want the anchor link to display on your navigation menu:

  • Create your page
  • In the module settings where you want the anchor to land toggle to CSS and in the CSS id assign a name (anchor or something without spaces or special characters).
  • Save
  • Back to your Dashboard
  • Menus
  • On the left-hand side of the page look for Custom Links
  • In the URL paste the url and add a # with the CSS id (http://PageName.com/#anchor)
  • Save
  • Viola

Hope this solves some problems for you.  If anyone has any questions, or better info, please share in the comments below. And we all love seeing web designs so please feel free to share your examples of the anchor links in action.

EIleen Lonergan
Eileen Lonergan was an integral part of this company. Unfortunately, Eileen Passed away on the 31st of October 2018 after a short battle with Cancer. She leaves behind the legacy of the Divi Theme Users Group and hundreds of people that she helped through coaching, building outstanding websites and just being - accessible. We miss her every day!
Click to access the login or register cheese

Subscribe To Our Newsletter to get the latest news and product updates

You have Successfully Subscribed!

Pin It on Pinterest

Share This