* 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...