Browsing the internet, probably you’ve seen a table of content at beginning of long articles. Table of Contents is ever linked with a jump links that allow to visitors to instantly move from one part of the content to another. Well, you would like to do the same on your blog/site? You’re in the right play: in this article we’ll show you how to create a page jump menu for your blog posts. 

WHY TO ADD A TABLE OF CONTENT? 

To add a content summary at the beginning of your posts could be very useful. Sometimes visitors who arrive to your blog or website are looking for specific information; maybe they have already read several guide without to find an answer. A table of content help your visitors to find instantly what they really need. Table of contents are nice to see and improve the user experience. In addition, it could also be useful for SEO, because search engines can identify a table of content within an article showing it in the search results. 

Not all articles need a content menu, but if you are writing a guide or tutorial with many paragraphs, could be a good idea to add it.

HOW TO CREATE TABLE OF CONTENTS ON WORDPRESS WITHOUT PLUGIN

Now we will show you the easy steps to create a table of content on your wordpress website (or any other site). On WordPress you can find some plugin that help you to create and add a nice summary of a post. Easy, fast. Yes, but we suggest do not add so many plugins on your site, especially if you have a valid manual alternative. So we’ll explain you how to create your table of content with jump links on WordPress by using HTML code. 

To create your ToC using Html, you must follow this two easy steps:

• create a list by linking an internal link to each item, which will take the user to a specific point of your article
• add an anchor link to the element of the articles you want the user arrive when he click on your table of contents. 

We will create the menu using a Html table, so your visitor can easily see it.

<table bgcolor="#E3E4FA"><tbody><tr><td>
</td></tr></tbody></table>

This is the basic code of html table. The bgcolor = “#” attribute represents the background color you want to give to your table. You can consult an Html color table to give your menu the color you like best.

Now we are going to create the menu list by adding the list of contents between  <tr> <td> … </td> </tr>  tags. So, add new HTML BLOCK and copy the following code:

<table bgcolor="#E3E4FA"><tbody><tr><td>
<h5>TABLE OF CONTENTS TITLE</h5>
<ul>
<li><a href="#first">FIRST PARAGRAFH</a></li>
<li><a href="#second">SECOND PARAGRAFH</a></li>
<li><a href="#third">THIRD PARAGRAFH</a></li>
</ul></td></tr></tbody></table>

Now you will need to create a internal connection between your summary items and the paragraphs of your article. As you can see in each line we have entered a word preceded by “#” (#first, #second, #third ..). This word will be used to create your Anchor Link within your article. Now to the the first paragrafh and edit it in HTML mode in this way:

Now all you have to do is add the anchor link. In the case we are working at the first paragraph, so we will insert  id=”first” as follows (you can rename the IDs as you wish):

Repeat this two steps for all the items on your table of contents and when a user clicks on that item they will jump to the part of the article they are interested in. If, on the other hand, you do not want to insert a summary, but you simply want to insert a page jump inside your article, click on MODIFY/INSERT LINK and insert a url using the sign “#” and then write the ID you have chosen. If you want to go back to the beginning click here