* If you've found this page and find that it doesn't make sense, please go to the beginning of this tutorial and follow through the entire lesson!

How to Create the Jump Link

This is the easy part of creating the Table of Contents!

Now that we have added the anchor tag to the post while in 'Text' edit mode, we will add the clickable link in 'Visual' edit mode.

Continuing with my Twitter example, here are my steps:

1. Go to the post's Table of Contents

2. Highlight the Topic (in this case, Twitter)

3. Click on the 'Insert link' icon in the edit toolbar

4. Click on 'link options' (gear symbol)

5. Enter in the URL box #twitter


The Link Text is already filled in, as I had highlighted the text I want to link. This will appear exactly as it does in the Table of Contents.

Click Add Link to save.


IMPORTANT NOTE:

The hashtag # means "go to." It is necessary to have it in your URL.

Use the EXACT word in the URL that you typed in the anchor tag, or this will not work. (remember tips 1-4 ?)


The Link is Active

Now, my Twitter topic in my Table of Contents appears as a link instead of plain text.

Repeat these steps for EACH topic in the Table of Contents.

Recap of Creating my Twitter Jump Link for my Table of Contents

Step 1. In TEXT edit mode, type <a name="twitter"></a>

Step 2. In VISUAL edit mode, add the link #twitter

So, essentially, you are adding some HTML code in the Text editor that says "bring the reader here," and you add a link in the Visual editor that says "Go here."

Other Examples

DO:

  1. <a name="keyword"></a>
  2. #keyword
  1. <a name="how"></a>
  2. #how
  1. <a name="topic"></a>
  2. #topic

DON'T:

  1. <a name="Keyword"></a>
  2. #keyword

There is one capitalized and one not. This will NOT WORK.

  1. <a name="how"></a>
  2. #howto

The tag name and the URL link are not the same. This will NOT WORK.

The word MUST BE EXACTLY THE SAME.


Now, are we Ready to Update?

Yes!

So, what will this look like once I 'Update' this Edit, and will the link work?

(HINT: I've placed my anchor tag too close to my title, so I will show you how to adjust it for an optimum reader experience!)

Click on Next Page: How to Adjust Anchor Tag Placement...



Join the Discussion
Write something…
Recent messages
BorisRoman Premium
Great information - very useful!

Thanks so much for sharing!

Wish you much success!

Bob
Reply
cris1018 Premium
Thanks, Bob!
Reply
Dave07 Premium
Excellent training Cris and very well described. Thanks 🙂
Reply
cris1018 Premium
Thanks, David, and you're welcome! :-)
Reply
Jessibelle72 Premium
Perfect! Thanks a lot!
Reply
cris1018 Premium
Thanks, Jessica, and you're welcome!
Reply
Stella741 Premium
Very interesting Cris!

I do not use tables in my content.

However, though this seems confusing to me now, i am sure I will cotton on to this way of doing a table with practice/

Thanks for sharing.
Stella
Reply
cris1018 Premium
It is a little confusing the first time through, but after the second link, the light bulb comes on. You can totally do it, Stella! They're really useful for long content posts :-)
Reply
Stella741 Premium
We'll see....
Reply
BrendaMZ Premium
Thanks for explaining how to do it. I admit I have a hard time understanding this anchor tag. I don't get it. I use a TOC plugin. Easier for me. I would need to train myself on this anchor tagging.
Reply
cris1018 Premium
You can do it, Brenda! It's actually not hard once you go through the steps on a couple links and get a feel for the correct spacing. If you try it and have any questions, let me know! :-)
Reply
Top