⚓😀 How to Create Anchor tags or Anchor Links in WordPress

By | November 9, 2019


Hi everyone! Welcome to another WordPress
how-to video. Brought to you by:
WebTegrity, and me, Kori Ashton. I want to thank Grace for sending in a question regarding; anchor tags and anchor
links inside of WordPress. Wondering…how do you make that happen? Some of you might have called them
“speed tags” or “speed dials”. And that’s when (let’s say you have a
really long page, like this,) and you want to allow somebody to quickly
zip or speed dial down the page. Maybe down here to Judo Topics. So, I’m going to show you how to do that
today. Using just a little bit of “nerd code.” We want to go in to your dashboard area
and go to the page itself. This is the page and I’m in the
“text mode” not the “visual mode.” I’m want to scroll down to the area that
I want them to be able to zip down to. So, I’m going to go here. Here is my
h2 tag. This is actually where I want them to be
able to kinda zip right down to. Put some space in there and I’m going
write this little bit of “nerd code.” a (which is for your link) name equals open quotes. I’m going to close my quotes.
I’m just going to type in, Judo. Close the link and…just like that. So now if I were to click over to
“visual mode” here and scroll down the page, you’re actually going to be able to see a
little tiny box that has an anchor in it. See! Check that out. So that is actually the anchor point on
the page that it will speed down to. Now, I need the text that they click on
to make that happen. So, I’m going to go back up to the top
of my page. I’m going to enter data. I’m going to type in click here for more Judo topics I’m going to highlight that because I want
that whole area to be what is “clickable.” I’m going to click on “link.” Instead of typing in a whole long URL, I’m just going to use a hashtag-
and remember what I named it. I named it, Judo. Hashtag, Judo. Add link. See it has all this nerd code for you
beautifully. So if I were to click “updated” and go back to my test page here and
click, “refresh.” Now, I should have it. A link here that says “click here for more
Judo topics.” When I click on there it should zip me
down the page to Judo topics. Check that out! Pretty cool. Let’s say you want to do that, but you want this link when they click
here to take you to a different page and zip down to a certain spot. Let me show you how to do that. So, let’s go to another page that we want
to put that anchor on. Lets say…another page. Again, being in text mode- or what we call
“nerd code mode.” You’re just going to drop in that same
anchor tag that we created on the other page. Just drop in-a name, Judo. Going into the visual mode; you’ll see
there is a little anchor right here. So, that sets the anchor point on the page
that you want them to zip down to. Click, “update.” We’re going to view this page. What we want to do is grab the link
right here. Okay. We want to grab this link because
this is the page we want them to go to. Then we’re going to go back to that text
that we have that’s linked. We’re going to go to our test page. This is our linked text. I’m going to
switch back to text “nerd code” mode. Just before that hashtag I’m going to
paste in that pages’ URL. Okay. So you have the full URL of the page you
want to go to. Forward-slash, hashtag, Judo. Alright. So now when we click “update.” Go back to my test page. If I click “refresh,” it should now (when I click on that,) take me to…perfect! Another page and down to the Judo section. So, this is another page and it
immediately brought me down to that really- that spot on the page that’s just fast,
there’s my topic. That’s what I want people to see. So, I hope this video helps you. I am going to place a link where you can
get this “nerd code” and literally just copy and paste it onto
your WordPress website. If you have any other questions connect with
us over on wpwed.com or webtegrity.com Have a great day y’all. Bye, bye!

100 thoughts on “⚓😀 How to Create Anchor tags or Anchor Links in WordPress

  1. 2006glg Post author

    Thank you!! Wonderful, concise instructional video

    Reply
  2. Willinghands Post author

    I have ancor points, the problem for me being that it jumps to low and does not show the heading, even if i have a space above the heading, and the ancor point is on the table, I have also a sticky heading, does that infleuence it? I use BeTheme

    Reply
  3. Patrick Woninck Post author

    Bbeen looking far and wide for a good guide about this topic you pretty much nailed it.

    Thanks hero;-)

    Reply
  4. Eco Habitat Post author

    OMG! LOVE your tutorials!
    I know nothing about code yet you always make it so simple. Easy, clean & understandable explanations all the time. Thanks Kori and sponsors 🙂
    I´m now applying this to a WP website I´m working on 🙂
    Thank you again 🙂

    Reply
  5. Ivan Mosquera Post author

    Really good tutorial… Never the less i have a related question, I made a couple anchors on my page, some times they work normally some other times they roll back to their origin position on the page, but mostly they do not work on any smartphones or tablets, I wonder if has to do with the theme and rapidbuilder. Any ideas? Thank you.

    Reply
  6. Alexis Solano P Post author

    Hey great tutorial. I was looking for that information.

    Reply
  7. LastUSAExitMedia Post author

    I so much needed this type of information.The explanation is short, very easy to follow along and very productive, thank you so much for sharing this with the rest of us.

    Reply
  8. Лени Бо Post author

    The first clear video. Thank you so much!!!

    Reply
  9. Dakota Halfpenny Post author

    Hey there! I'm trying to use an anchor from the webpage in a link for a constant contact email and it doesn't seem to be working right. Do you know another way this could work? I have an existing anchor on this current page already.. can you only have one anchor element per page? Thank you!!

    Reply
  10. Better Driver Training Post author

    A perfectly delivered tutorial 🙂

    Reply
  11. BucharestRed Post author

    Hi Cori .. Please can you help me .. I am following your instructions "step by step", several times … Unfortunately the link does not work when I show the page in WordPress. (or when it's in WP editor instead of Elementor) … sorry

    Reply
  12. Neil Post author

    What am I doing wrong? I've set the anchor on my "another page" and can see it when I look at it visually, right where I want it. And on my "test page" I've copied out the code exactly. I click on the hyperlink on my "test page" and it sends me to my "another page" but at the top. It will not find the anchor on the "another page" – but it is there.

    Reply
  13. Aprile Sandefur Post author

    Great info… I'm using a sticky header that as it scrolls down with my content on the page it "covers up" the text I've linked to on the page. How do I create "space" using "code" above the text area I'm hyperlinking to? Please HELP?

    Reply
  14. AsiaRadio Sales Post author

    How do you create an anchored link to another page in another site?

    Reply
  15. Nadim Sabor Post author

    Thanks for the video. How do you make it go more smoothly rather than jumping to the anchor?

    Reply
  16. rajaa sam Post author

    thanks a lot for your video its helped me lot to arrange my post.

    Reply
  17. Paul S Post author

    Thank you Corrie for another excellent video. As usual, you went straight to the point and explained it so well and so simply. I'd stumbled around a few other videos, by other people, and was wondering where they were going. Not so with you; straight to the bull's eye. And it worked.  Thanks again.

    Reply
  18. Paweł Nowak Post author

    But, Is there any plugin for this? It should be 😉

    Reply
  19. Explore Superior Post author

    Thank you for a simple and quick tutorial on how to do this. I've been watching a bunch of tutorials on JQuery that were way over my head. Your method is very, very simple and easy to understand.

    Reply
  20. babelbear Post author

    Just what I needed. Clear, nice tutorial. Thank you.

    Reply
  21. Alex Graham Post author

    Thank you very much for your help! simple, amusing, and easy to follow!

    Reply
  22. Catherine Vignolini Post author

    I appreciate a brief and succinct tutorial. Thank you!

    Reply
  23. Strawberry Events Post author

    How would you do this so that if someone clicks on a Facebook post on my page it goes to that particular point on my site and not the top of the page? Anybody know?

    Reply
  24. Dwi Meiviandari Post author

    Have visited so many websites and video tutorials, but your video has succeeded helping this newbie! Thank you so much.

    Reply
  25. Alex Deeter Post author

    I have had a really hard tie getting this to work in the past. Thanks!

    Reply
  26. Brain Hacktive Post author

    YOU ARE AWESOME!!!!!!! THAAAAAANKS 🙂

    Reply
  27. Carla S Post author

    You are awesome!!! It works perfectly…..thanks so much!

    Reply
  28. Lonny Foster Post author

    I noticed a problem (unrelated to your tutorial) when using anchors with WordPress AND Firefox, where in Firefox the anchors are always slightly off. No prob with IE or Chrome in WordPress, only Firefox in WordPress. I can't find a fix anywhere! Do you have any solutions?

    Reply
  29. Benjamin Post author

    Sometimes we just look for videos, use what we've learned, and leave again. It's come to my attention however that you really have very simple, fast and effective videos! Thanks a lot for that.

    Reply
  30. Minh Hiền Lê Post author

    It still works today. Thank you very much

    Reply
  31. Ogo Tours Post author

    Thank you so so much!!! Well explained, very easy to do and works perfectly! 🙂

    Reply
  32. What Is Weight Loss About Post author

    Mate, I am aware this video is three years old but I'll TRY asking a question. I have implemented the link in the first part and I have the little anchor signs. However, when I add the hashtag to my title at the top it makes the link unclickable. What am I doing wrong? I have checked the anchor link and it is just as u suggest with the name of the part that I wish to sip to 🙁 heeeeeeeeeeelp lol

    Reply
  33. Gwendolyn Pongracz Post author

    Kori Ashton – You are awesome!  I watched several other videos before watching yours.  Your instructions and code were the simplest by far!!!  I tried it on my webpage and it worked the very first time!  Thank you so much.  🙂

    Reply
  34. Durgesh M Post author

    Yes., today I learned a new thing ..would say "simply great!" 🙂

    Reply
  35. John Libonati Post author

    Thank you! Worked perfectly! Great video and easier than other methods I found.

    Reply
  36. Naji Boutros Post author

    What if it scrolls down too far? I have my anchor links but it scrolls past the anchor and 90% of the content is hidden under the "floating" header.

    Reply
  37. James Lonergan-Larsh Post author

    your videos are so simple but always get the job done #myhero

    Reply
  38. Dávid Halász Post author

    Finally someone, who explained it in most simple way without forcing us to use plugins. Thank you so much, you are awesome and i mean it!

    Reply
  39. Mariah Porter Post author

    Excellent video! Still relevant and useful four years after it was posted. Just followed your instructions and successfully inserted my own anchor and link!

    Reply
  40. Kelly Doscher Post author

    This is THE BEST tutorial out there. It's over 4 years old and is still helping me and I expect many others with this simple but easy-to-forget tactic. Thank you for sharing. Kind regards.

    Reply
  41. Roscoe Foster Post author

    Hi, great video. The little anchor tag you created within your post is straight forward, but can you assign one of the main menu buttons to jump to the anchor tag. For example if I have a button in my main menu header that says "Product Chair" is there a way of getting that main menu tab to jump to the anchor tag?
    Regards

    Gary

    Reply
  42. Sidney Johnson Post author

    My search ended with this 2014 (4-year-ago) video; whose methods are still effective. I've viewed multiple tutorials and none come close to the effortless simplicity as yours. Like Wow! Better Amazing!

    Reply
  43. Aad van den Heuvel Post author

    thank you for the explanation. Learned something new today again 🙂

    Reply
  44. monkeyzuncle1 Post author

    I want to create a hyperlink in MailChimp to anchored text in WordPress. Help?

    Reply
  45. Reshan Ponnamperuma Post author

    she doesn't waste other's time. straight to the point. No opening boasting session, no closing boasting session. short and sweet. Thanks Kori. keep up the good work. Watching this in 2019

    Reply
  46. Shaunda Necole Post author

    Thanks for making this SUPER EASY for us non-techies! 😉

    Reply
  47. K Padgett Post author

    What about adding an anchor link in a Pardot email that links to one of you WP pages? H.E.L.P!

    Reply
  48. George Bagiryan Post author

    Hi, could you help me with a related topic? The thing is I have a multi page site with a full screen slider on every single page and I need to make all redirections to pages to automatically scroll to the content section under that slider, how can I do it? Is there a better way than creating anchors for every page and changing all the links in menu?

    Reply
  49. Sarah-Sylvia BewusstSein to go Post author

    Thank you! That helps a lot!! Best wishes from germany – love and peace…

    Reply
  50. Curt Jensen Post author

    Thank you!!! This was just what I was looking for.

    Reply
  51. Harlan Lebo Post author

    This is easily the clearest and simplest explanation of anchor tags I've ever seen. Thanks!

    Reply
  52. Burj Burkan Post author

    I just fell in love with you.. Im new to wordpress and I was looking for some thing like that.. thanks a million 🙂 I will forsure add you so I can learn from you

    Reply
  53. Natalie Barcia Post author

    I loooove how easy you make things!
    Nerd Code FTW!

    Reply
  54. Stevie Solutions Post author

    This looks interesting so I might try and do that.

    Reply
  55. Quadri Opeyemi Post author

    Hey Kori, thanks for this guide. It's the perfect guide I was looking for, short and straight to the point. You're darling!

    Reply
  56. J.E. Spence Post author

    I couldn't get this to work with the WP 5.2.2 insert anchor feature to save all the starving children of the world. I think it's a glitch!

    Reply
  57. Laura Boyd Post author

    Hi Kori, great video and worked a treat thank you!

    However, now I need a link from my homepage CTA button (Learn More) to an anchor I have made further down the bottom of the homepage.

    This button (where I have placed code) can only be edited via the 'customise,' 'layout,' section of WordPress. Meaning, I cannot just add a html link etc

    The code reads like this; [ct_button url="https://www.websiteaddress/ color="#FFFFFF" background="#672883" description="" size="normal" position="centre" icon="" target="" rel=""]Learn More[/ct_button]

    So where would I add the anchors # section?

    Could you help at all?

    Thank you

    Reply

Leave a Reply

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