JQuery Content Directory

JQuery Content Directory is a WordPress plugin that works only with WordPress 2.7 or later. It was built by enhancing the jquery-table-of-contents plugin.

This plugin can automatically generate a table of contents for blog posts and place it in the upper-right corner of the post. Readers can use the table of contents to understand the structure of the article and quickly jump to the sections they are interested in.

Plugin Preview

Installing JQuery Content Directory is simple: upload and activate the plugin, or install it directly from the WordPress admin area. One thing to note is that it is best to have some basic knowledge of WordPress theme structure and CSS when configuring it.

After installation, you can find “Automatic Article Directory Settings” under “Settings” in the WordPress admin area. After a simple configuration, blog posts can have an automatic table of contents feature.

Setting the Table of Contents Position

JQuery Content Directory needs to know the tag location of the “post body” in the theme, as well as which heading tags should be used as section markers. In other words, you need to tell the plugin:

• Which CSS selector contains the post content;
• Which HTML heading tag should be used to generate the table of contents hierarchy, such as h2.

For example, my blog post content is contained within the .jquerycd .entry tag, and h2 tags are used as section markers, so the content area selector can be set to:

.jquerycd .entry

The section heading tag is set to:

h2

If your theme structure is different, you need to inspect the actual post container based on your own single.php file or your browser’s developer tools.

How to Inspect the Tags

Some people may not know which tag in their theme contains the post content. You can find it with the following steps:

1. Go to the WordPress admin area.
2. Open “Appearance” => “Editor”.
3. Find single.php.
4. Search the template file for the code that outputs the post content. Usually it is:

<?php the_content(); ?>

1. Check the nearest outer HTML tag around this code and its class name.

For example, if the outer structure around the_content() looks like this:

<div class="jquerycd">
  <div class="entry">
    <?php the_content(); ?>
  </div>
</div>

Then the containing tag for the post content is:

.jquerycd .entry

Setting the Table of Contents Style

JQuery Content Directory supports custom table of contents styling. You can set the table of contents title in the admin area, and you can also control how it is displayed by modifying CSS.

For example, if you set the table of contents title to “I Am the Title”, the front end will use that title as the name of the table of contents area.

By default, the plugin sets the table of contents style through the jquery-toc.css file. Of course, you can also define new CSS rules in the theme’s style.css. Just make sure the selector name corresponds to the CSS name set in the admin area.

For example, you can add a new #newstyle rule in style.css to style the table of contents:

/* List style */
#newstyle ul {
  padding: 5px 0 0 14px;
  margin: 0;
  border-top: 2px solid #050;
}

#newstyle ul a {
  color: #050;
}

/* Table of contents title style */
#newstyle strong {
  font-size: 16px;
  line-height: 30px;
}

/* Show/hide label style */
#newstyle span {
  margin-left: 5px;
}

Then set the CSS name in the plugin admin area to:

newstyle

After saving, the post table of contents will be displayed using this new set of style rules.