April 4

How To Add An Anchor To WordPress


 
 




 
 
Create A Page Jump


Hurray! After a half hour of pulling my hair out I finally managed to add anchors (or jump link) to my website!!!! I am so proud and exhausted ! =)

Victory

Victory

 

When I decided to add anchors to one of my pages earlier today I thought : “meeeeh it’s going to be so easy, I saw this “anchor” button earlier on wordpress, no problem!”. I was sure it was going to be quick and easy. Painless. Well, reality hit me hard ; I must be too dumb to use this “anchor” button properly lol….

Now why make things simple when you can make them complicated? Just kidding, it’s not that complicated actually… So instead of using the “anchor” stupid thing, I went into the heart of my website : the text box!!!!! We love html, don’t we? =)

HTML

HTML


 

What Are Jumps For?


I had a list of items at the top of a post and I wanted to use jump links so that my visitors could jump straight to a place rather than scroll down and look. To do so you want to create a special link called an “anchor” link. 

When the link is clicked, it will bring your visitors to the place in the page where the anchor exists. Before you can create the anchor, you’ll need to switch to the Text Editor. To do this, select the tab labeled as either “Text” or “HTML” directly above the right side of the editing area. good-idea

 

Process – part 1


1 – Well obviously, you have to first switch to the scaaaaary text editor. =) Then look for the word/group of words where you want to insert an anchor. This is going to be where people click and will be redirected to another place on your page! It will highlight, like a link.

2 – Once you have found the word/group of words, let’s say in my case it was BOOKS, you want to add this html code right before the word BOOKS (or in your case, the word you have picked)

<a href="#unique-identifier">Click me</a>  

3 – What you will do then is replace “unique-identifier” with a number : 1, 2, 3, etc. And replace “Click me” with “BOOKS” or any other word that you want your visitors to click on. If you leave the “Click me” part, it will appear on your page, right before the anchor word and it won’t look exactly professional lol

This is what my html looked like after the above changes : <a href=”#1“>BOOKS</a>

You might end up with two identical words or group of words, in which case all you need to do is to delete the second one from your visual box. By two identical words/group of words I mean something like that : BOOKSBOOKS. lol. The first BOOK is the one you added inside the HTML, the second one is your initial word, from your “visual box”. You can also erase it from the text box but I don’t know about you, this place gives me a headache. It’s easier to see the text on the visual box and to delete it from there!

keep-calm-632x704

 

Process – part 2


4 – Finally, you want to copy/paste the below html text, which will create the anchor point where the above link goes. It’s like creating a bridge. You copy the below text at the exact location where you want your readers to “jump”!  

<a id="unique-identifier">See?</a>  

Again I replaced “unique-identifier” with a 1 and “See?” with BOOKS, so that both links matched!

It looked like this <a id=”1“>BOOKS</a>

 

Trick


I also noticed that you should make sure that you have no spaces in your IDs, otherwise the anchors won’t work -_-

Fun, huh? not really, but at least I have my anchors!!!!   I hope I made sense with this article! lol

 

 

If you have any questions (which you might now that I come to think of it ; I’m not sure I was very good at explaining all this lol) or experience with inserting anchors on your website, please feel free to leave a comment below and I will be more than happy to connect!  If you would like to join a community of entrepreneurs and learn tons of stuff about marketing and website creation, I invite you to join Wealthy Affiliate. Click here to join for free ! You can find me there, my username is BelieveItYes 🙂 

Cheers!

Sarah 
 
 




 
 

Leave a Reply

14 Comments on "How To Add An Anchor To WordPress"

Notify of
avatar
Sort by:   newest | oldest | most voted
Amanda
Guest

Nice site full of a lot of great information.

Scott
Guest

That’s some useful tip right there. I wasn’t tracking with you for a short time, then it became clear. “So How Do You Create a Jump Page?” should probably be “Jump Link”? Is that right? And just below “I’m Not Finished Yet”, you have “bellow”, which I guess is “below”. Just a couple of things I spotted that may help. Otherwise it was very helpful.
PS. Like the shaking head GIF! Haha
Scott

Rabbit
Guest

Thanks for keeping it upbeat as coding often gives me a headache! This was a fun way to get through it, thank you very much for sharing:)
-R.

Lisa
Guest

Just would like you to know I enjoyed your website. I have gone through a few affiliate programs and spent lots of money and still have not made one cent. We have been taking our time now and not jumping from site to site trying to “make money” and I can see by your information there are other ways out there that are legit. Thanks again for your nice site.

Ed
Guest

Hi Sarah,
Thanks on sharing this article. It’s very informative. The shaking head made me laugh so funny:) I like it…
Ed

Bob F.
Guest

Great job Sarah, Thank you so much for the informative write up you have here I will be returning often to learn more about starting a profitable business, as one day would like to have content as rich as I see here. Best wishes Bob F

david molineux
Guest

I followed this advice word for word and found extremely helpful.

Any problems I did have were my lack of experience.

Fantastic advice

Thank you

wpDiscuz