Sam here from Creativeminds. In this week
we’re checking out a new plugin that allows to easily add a table of contents to any page
on your WordPress site. You can define the different sections of the table of contents
with a tag or css class included in the page or post content. Let’s get started by looking at the general
settings. Under display settings you can choose what kinds of content pages you want the table
of contents to be able to appear on. There are also some performance and debug settings
you can play around with. Under the table of contents settings, you can give your table
of contents a header and you can choose whether or not the contents of your table of contents
will appear automatically. You can customize the show/hide label and make it styling including
the size, weight, color, decoration and style of the font. You can give your table of contents
a background color and a border of a given width and color. Next is the elements selector.
This is where you’re going to define the different levels of your table of contents. So here
you can make your default table of contents level zero to six, a tag class and or id.
For the default here we just have the html heading tags for the different levels. Now
in table of contents styling, this is where you can choose what those different levels
that you defined above are going to look like in the table of contents. So for your level
zero you could have this be the largest font. Six is the smallest font. You can change the
color, weight, decoration and style of any and all of the labels for the exact style
and effect that you’re looking for. Or to match with your site’s theme. And again this
styling options correspond to the different elements defined above. Our supported shortcode let’s you display
the table of contents anywhere in a content area not only just at the top. Now let’s take
a look at an example of the table of contents. So here the default hides the content and
you can simply click on the show/hide link and all of the contents appear underneath.
This specific example has two different element levels and if we scroll down we can see how
the plugin description, use cases and plugin features are all on that first level. And
then the different sections below plugin features are on that second level. And here we’re using
HTML heading tags to indicate the different sections of our table of contents. And if
you click on any section, it will automatically bring you to that content area further down
on the page. Next we’re going to explore how to customize
the table of contents on any particular content page. So after you install the plugin, when
you edit a page a new area will appear in your edit page called custom selectors. You
can choose not to display any table of contents items on a post or a page. Or you can even
use custom element selectors so if you want to create your own table of contents for a
particular page or post you don’t have to use those default tags or ids that you defined
in the settings. You can actually define them right in the edit page. And now I’m going to show you what this actually
looks like when you insert this code into your content. First we want to make the mad
hatter our heading 3, so what you need to do is insert this code. The class that you
included in this code is going to be equal to the class that you defined for that particular
level below. So for this example the mad hatter will appear in our table of contents at level
3. And then we’re going to use a span code below. Here we’re aiming for heading 4 for
the words the tea party. The tea party will appear in our table of contents for level
four and as you can see in the code we have included the class and the id to indicate
that this is an element that should be included in the table of contents. So when we take a look at the page in the
table of contents you can see that we have our alice in wonderland chapter 1, chapter
2, chapter 3, which are defined by our default HTML headings. And then the mad hatter and
the tea party, these are defined by the css classes that we defined when we were editing
the page. So if you click on the tea party it will take you to the place in the content
where the tea party appears, but this text doesn’t have to be a main content heading
and that’s what really sets our plugin apart from others is this option to use css classes. As you can see the table of contents plugin
is the easiest way to organize your content for easy access to any post or page on your
Wordpress site. Visit to download the plugin today.