Horje
This plugin is an easy way to add table of content to your post/page directly or as a widget.

Noted That:

  • To install correctly this tableofcontent.zip.
  • Fisrt Download the tableofcontent.zip to your computer
  • Extract/Open tableofcontent.zip to Your Computer.
  • Then, Find readme.txt file inside tableofcontent.zip and Open readme.txt.
  • Now, Read the Requirements of this plugin. Which Wordpress Version and PHP Version are required to run this Plugin in Your Wordpress Site.
  • Then, Follow the the Tips Below.

Start the Tips:

1. First Download "tableofcontent.zip" Plugin to your Local Computer. (Click Download)

2. Then, Login to your "yourdomain.com/wp-admin" Dashboard.

/stack/wp/e1593231376d7d849d2-4597-4fa3-a6ff-1eca18f72aab.png

3. Then, Click on "Plugins" + "Add New" from left sidemenu of Dashboard.

/stack/wp/e1593231378Screenshot20.png

4. Now, Click on "Upload Plugin" button.

/stack/wp/e1593231380Screenshot-2019-4-2AddPluginsHorjeWordPress.png

 

5. Now, Browse "tableofcontent.zip" Downloaded plugin from your computer, Where you downloaded tableofcontent.zip According to Step – 1 Above then, click on "Install Now"

/stack/wp/e15931461531577025694plugin.png

6. Now, Click on "Active Plugin"

/stack/wp/e15932313830ca45529-bf73-4101-8178-53ae60ce549f.png

7. Then, See left sidemenu. "TableOfContent" folder is added on left sidemenu. Now, Click on "TableOfContent" folder.

   Noted that: If you do not see "TableOfContent" folder on left sidemenu then, see at left sidemenu "Settings" or "Tools".

8. Now you configure yourself oR Watch video tutorial below about TableOfContent Configurtions and Settings or How to work "TableOfContent" in your WordPress site.

 

oR

After Activated Plugin According to Step-6 then,

  1. Go to "Plugins" + "Installed Plugin" from Wordpress Admin Panel Leftside Menu.
  2. or Direct go to: https://yourdomain/wp-admin/plugins.php
  3. Then, Find "TableOfContent" Activated Plugin from Plugin List.
  4. Then, Click on "Settings" from Plugin that is TableOfContent
  5. Now, Edit/Add/Config the setting and Click on "Save Changes" button,
WP Plugin Setting



Guide

If you have the plugin already activated please skip steps 1,2.

  • If you want to display your TOC as a widget then follow step 1 to 10
  • Or if you want to display your TOC inside your post/page then follow step 1-2 and 5-11
  1. Upload TableOfContent.php to /wp-content/plugins/
  2. Activate the plugin through the ‘Plugins’ menu in WordPress.
  3. Go to the widgets menu
  4. Drag TB_Widget into the widget area you would like your table of content to appear
  5. Create or Edit a post/page [post/page editor]
  6. Inside Custom fields Under Name insert “Tb_Title” [capital sensitive]
  7. and in value insert your table title. For example “Table of Content”
  8. Click on Add Custom Fields
  9. Similar the last two steps insert “Tb_Headers” for name
  10. and in value insert the header numbers with comma separation. this numbers informs the plugin as to which html header

    you would like to include in your table of content. For example: if you want your table of content to display links to

    ,

    and

    then write "1,2,3"

  11. Insert this tag inside your post/page content under HTML input [Please be aware that where ever you put this tag will be where the table appears to your readers]

CSS style

By default the plugin provides no CSS styling and assumes the user will write its own. However, if you’re using the default theme ‘twentyten’ I’ve provide example code, See bellow, that you can use.
For more detail and example of the id/class used by this plugin visit the my Plugin Page.

To use this Code, Add it at the bottom of your theme style.css

CSS Example

#TBC_ContainerTitle,
#TBW_ContainerTitle{
font-family: Helvetica, "Times New Roman", Georgia, serif, Georgia, "Bitstream Charter";
font-weight:bold;
text-align:Center;
border-bottom: 1px solid #DADADA;
margin: 5px 10px 0 10px;
}
#TBC_Container,
#TBW_Container{
background-color: #f8f8ec;
border: 1px solid #DADADA;
width: 200px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#TBC_Container a,
#TBW_Container a{
font-family: "Times New Roman", Georgia, "Bitstream Charter", serif;
text-decoration: none;
color:#4e4e4e;
text-align:Left;
}
#TBC_Container a:hover,
#TBW_Container a:hover{
text-decoration: underline;
}
#TB_UL{
padding: 0 0 0 0;
margin: 5px 0 5px 10px;
}
#TBC_Container li,
#TBW_Container li{
list-style-type: none;
text-align: left;
}
.TB_Level1,
.TB_Level2,
.TB_Level3,
.TB_Level4,
.TB_Level5,
.TB_Level6{
font-family: "Times New Roman", Georgia, "Bitstream Charter", serif;
line-height: 18px;
font-size: 15px;
}
.TB_Level1{
font-weight:bold;
margin-left:0px;
}
.TB_Level2{
margin-left:10px;
}
.TB_Level3{
margin-left:20px;
}
.TB_Level4{
margin-left:30px;
}
.TB_Level5{
margin-left:40px;
}
.TB_Level6{
margin-left:50px;
}

postpage, directly, widget, your, content, easy, table, plugin,

Name

Reffered: https://wordpress.org/

Share on: