Create a Table of Contents Without a Plugin (It's Easy!)
* 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.
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."
- <a name="keyword"></a>
- <a name="how"></a>
- <a name="topic"></a>
- <a name="Keyword"></a>
There is one capitalized and one not. This will NOT WORK.
- <a name="how"></a>
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?
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...