Table of Content
This Plugin parses the page/post content and scans for for h*-Tags (title tags, such as h1, h2, h3,..). Afterwards it generates and prints a topic navigation (Table of Content = TOC).
Installation
Either
- use the WordPress installation
or
- Download the .zip file (below) and extract into your WordPress Plugin directory (wp-content/plugins/)
Then activate the Plugin…
Usage
- Use the shortcode in your Page or Post via
[/table-of-content]some content with h* tags [/table-of-content] - You can add a title to your TOC with the following attribute
[table-of-content title="Some Title"]some content with h* tags [/table-of-content] - In the WP admin menu under “Settings” is a menu item “T.O.C.” where you can define default titles (and tags) above lists and whether to use ordered or unordered lists.
Screenshot Admin
Frequently Asked Questions
My Table of Content looks like Sauerkraut. Why ?
It is mandatory that your content has “correct” structure .. as in h1 -> h2 -> h3 and NOT in h2 -> h1 -> h3. You go crazy with your sturcture – so will this plugin.
I want to use this plugin in my template. How ?
This is easy.
$result = $TableOfContent->parse_contents( $contents, $args ); echo $result->navigation; echo $result->content;
Download
Example
Here is the Syntax of the parsed Content
This is before the parsed content [table-of-content title="Some Title"] These are the contents .. <h1>This is Toplevel</h1> something under toplevel <h2>This is second level</h2> something under second level <h3>This is third level</h3> something under third level <h3>Again third level</h3> even more under third <h2>Back again second</h2> here we go again second <h3>Down again third</h3> anothertime third <h1>And back to top</h1> top is back again [/table-of-content] <h1>Ignored in the toc</h1> .. because this is after the parsed content
And here is the rendered output
This is before the parsed content
These are the contents ..
These are the contents ..
This is Toplevel^
something under toplevel
This is second level^
something under second level
This is third level^
something under third level
Again third level^
even more under third
Back again second^
here we go again second
Down again third^
anothertime third
And back to top^
top is back again
Ignored in the toc
.. because this is after the parsed content

My Name is Ulrich Kautz and this is my private blog about server administration, perl programming and some other stuff that is on my mind. I study part-time computer sience at FU Berlin and work as sys admin and web developer at our hosting company
When I tried this plugin it messed up all my image captions. It was just showing the caption shortcode and not the processed captions. After much searching I finally found if I added the following two lines before the “return parsed” in the plugin.php code it worked:
add_filter($parsed, ‘do_shortcode’, 11);
$parsed = apply_filters(‘the_content’, $parsed );
Thanks for the plugin!
OK, I’ve updated the plugin. Thanks for reporting!
Just tried to install this plugin (exactly what I’m looking for!) on WP 2.8.4 running on MediaTemple (gs). The plugin couldn’t be activated, due to the following error:
Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /[REDACTED]/html/wp-content/plugins/table-of-content/includes.php on line 6
Right you are. The last patch didnt work out, now i have removed it.. try again
I have just been trying to install the Table of Contents plugin into WordPress 2.8.4 but unfortunately when I try to activate the plugin I receive an error message;
………
Fatal error: Class ‘TableOfContent’ not found in C:\xampp\htdocs\wpplugin\wp-content\plugins\table-of-content\plugin.php on line 20
This is not the full code only the last section but i can print the full message if required.
Thanking you for your time and consideration.
Try to call the includes.php directly and see what happens (eg: http://blog.foaa.de/wp-content/plugins/scaleable-contact-form/includes.php). You should see a blank screen and no errors. If so, your includes path is wrong. Or maybe some PHP4 issue ?! Which version of PHP do you run ?
First, thank you for your quick reply.
I have tried calling the “includes.php” file as you suggested and get this;
# content; // replacement for “the_content()” * print $site->navigation; // the actual page navigation */ public function parse_contents( $post_content = “”, $args = array() ) { // using the whole content if empty content is specified if ( $post_content == “” ) $post_content = get_the_content(); // inti variables for this round .. $this->counter = 0; $this->matches = array(); $this->args = array_merge( array( ‘list_type’ => ‘ol’, ‘prefix’ => ”, ‘suffix’ => ‘^’, ‘clear_iterator’ => true, ‘top_suffix’ => ”, ‘top_prefix’ => ”, ), $args ); // replace the suffix in the top-links $this->args[ 'prefix' ] = preg_replace( ‘/%prefix%/’, $this->args[ 'top_prefix' ], $this->args[ 'prefix' ] ); $this->args[ 'suffix' ] = preg_replace( ‘/%suffix%/’, $this->args[ 'top_suffix' ], $this->args[ 'suffix' ] ); // generate some random number for the being unique $rand = $this->args[ 'rand' ] = (int)( rand() * 99999999 ); // update content $post_content = preg_replace_callback( ‘/(.+?)/s’, array( &$this, ‘_replace_and_build_navi’ ), $post_content ); // having matches, build the navi $navigation = ”; if ( !empty( $this->matches ) ) { $start_level = 0; $last_level = 0; $navigation = ‘args[ 'list_type' ]. ‘>’; $i = 0; foreach( $this->matches as $match ) { $level = $match[0]; $title = $match[1]; // first level if ( !$start_level ) $start_level = $level; // same level elseif ( $last_level == $level ) $navigation .= ”; // level UP .. elseif ( $last_level 0 ) $navigation .= ‘args[ 'list_type' ]. ‘>’; } // level DOWN elseif ( $last_level > $level ) { $diff = $last_level – $level; while ( $diff– > 0 ) $navigation .= ‘args[ 'list_type' ]. ‘>’; } // remember last level .. $last_level = $level; // insert current level $navigation .= ”. $title. ”; $i++; } // append finisher $diff = $last_level – $start_level; $diff ++; while ( $diff– > 0 ) $navigation .= ‘
args[ 'list_type' ]. ‘>’; } return (object)array( ‘content’ => $post_content, ‘navigation’ => $navigation ); } // replace method for all h-tags .. private function _replace_and_build_navi( $match ) { $level = $match[1]; $title = $match[2]; // remove leading “123.” .. if ( $this->args[ 'clear_iterator' ] ) $title = preg_replace( ‘/^\s*\d+\.?\s*/’, ”, $title ); // add to matches $this->matches []= array( $level, strip_tags( $title ) ); // rebuild and return the h*-tag return join( ”, array( ”, $this->args[ 'prefix' ], ”, $title, $this->args[ 'suffix' ], ” ) ); } } ?>
For your information I am using Xampp (1.7.2) as a local testing server which runs on PHP 5.3.0. I am presently testing before uploading to my web server which runs on PHP 4.4.9.
@Paul: Huh, it looks like your webserver doesnt interpret the .php-file at all – its a content dump. This seems to be the source of your previous problem. I’m not at all familiar with Windows so cant help with your setup..
Just to say thank you for your quick reply once again.
I should be uploading to my web server at the weekend, having nearly finished my theme, and this runs on Linux so I will give it a try then.
Once again thank you for your time and consideration
Yours Paul
Hi,
Looks interesting and good to see a nice clean take on TOC generators.
I do have one feature request:
instead of having to wrap the text in [table-of-content] tags, would it be possible to just put one tag at the top of the post and then all the post text is put in a TOC? (e.g [TOC] makes one for all the posts content)
Thanks,
Ben.
This works well, but I don’t want the back to top^ links automatically inserted.
1) Can you make it optional in future releases,
2 )Tell me how to remove it now?
@Shoq: You can easily hide them via CSS: .toplink { display: none }.
Yeah, Thanks. New to WP, and that dawned on me as soon as I went to lunch. I guess I can just add a background image, too. I don’t mind the link. Just the styling of it.
WordPress 2.9 when I try to activate the plugin:
Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /url-top-plugin-folder/table-of-content/includes.php on line 6
@UK I am new to css. where in the css file would I locate the ” toplink { display: none }” code to get rid of the ^ back to top links
@mooreway: Just add it to the css-file of your theme (probably called styles.css in your theme folder..)
@Kenneth: Hmm, i’ve updated to 2.9.1 too, and it seems to work (see this page). However, i’ve re-uploaded the current release to wordpresse. Try the new relase 0.4.1 again (download from here or wait for WP Plugin Repository) and tell me wheter it works or not.
Thanks UK that worked out..
Hi!
I installed your plugin, works great but I have one minor problem. I have 20 headers added to my ToC and their numbering starts from 1 to 0 and then repeats itself instead of counting from 1 to 20. Any suggestions?
This is a great plugin. Is it possible to edit the list style so that it uses bullets rather than numbers and letters?
Sure, just add something like this to your css:
<style> .pni-navigtion li { list-style: disc } </style>Thank you. I tried that but it didn’t work. Something must be blocking it. The site isn’t live, so I can’t show it to you at the moment.
hey, replace “<?" with "<?php"
when opening php in includes.php
otherwise, it will give a fatal error in some php configurations.
thanks for the plugin!
Damn you blog removes my html tags.
I is like h2 class=”wp-table-reloaded-table-name”
i found a bug,
look at it, and at the solution.
http://wordpress.org/support/topic/399878?replies=1
Thanks for reporting, is in new upstream via SVN or WP updater.
a new bug,
there is a missing
http://wordpress.org/support/topic/419133?replies=1
it includes the input and output code.
check it out!
thanks
-wjm
could you send me an email when you fix it as i need to apply the changes asaps.
@wjm: Thanks for the bug report. I fixed it in the current 0.5.1, which you can download either above or via WordPress Update.
thanks man for the fast response.
here i go with another bug,
the first anchor appears empty, getting name=”"
thanks for your support,
-wjm
@wjm: Could you elaborate on this or provide a sample ? Could not see the bug .. eg here: http://blog.foaa.de/decency/configuration/ or here http://blog.foaa.de/decency/configuration/policies/, the first a-tags look fine. Thanks.
Hi Ulrich,
I found the bug.
for some reason if your heading had a special character the whole anchor name was empty.
i dont really unserstand what you try to do with your code when you do.
`
$anchor =
preg_replace( ‘/\-+$/’, ”,
preg_replace( ‘/^\-+/’, ”,
preg_replace( ‘/\-\-+/’, ‘-’,
preg_replace( ‘/[^\p{L}\p{N}\-_\.]/u’, ‘-’,
strtolower( $title )
) ) ) )
;
`
but i think it is much easier to do this, and it takes care of special chars.
`
$anchor = sanitize_title_with_dashes( strtolower( $title ) );
`
in case the code doesnt display correctly.
there is a link
http://wordpress.pastebin.com/j0VwKNmx
with this modification the script works just fine.
let me know what you think
- wjm
@wjm: Hi again. Your persistence is most appreciated
The thing i “try to do with my code” is replacing all non letters and non numbers (unicode) within the title with dashes and then removing all the generated multiple dashes and all in the end and at the beginning of the string afterwards. I have to confess, i am more the perl programmer than PHP and not at all comfortable with those very_long_functions_which_i_cant_remember() in PHP. So my attempt was probably the more perlish one, but, non the less, not working on some installations. Can you compile PHP without unicode support ? That would at least explain it..
Thanks for your fix. I’ve commited it to WP plugins.
Hi Uk.
Thank you 4 your plugin, but I can’t start it working, I don’t know the major things of Wp & php I think.
Activated your plugin
Copy’n'pasted (just for test) your content under “the Syntax of the parsed Content” in my page.
Published.
Tested
– Nothing happened
I’m tried to paste
So am I have to use
$result = $TableOfContent->parse_contents( $contents, $args );
echo $result->navigation;
echo $result->content; ???
In which file I have to put it? I’ve tried page.php & function.php
Where I’m going wrong?/
Thank you UK!
@Vit: Ok, if you have copied the exact syntax, you probably want to remove the spaces before “]” and after “[" whenever it says "[ table of content ]” or “[ /table-of-content ]“. I had to put those in, because otherwise it would have been parsed. Try (hope the comment section wont be parsed):
I have no complaints or objections. I just wanted to take a minute to say thanks for this clean, simple, and elegant solution. I’m using it now on my site and it’s working like a charm.
Thanks!
Thank you very much for developing and sharing your TOC plugin. I have tried out yours and other others and always came back to yours.
I am using it to show a TOC in the upper right corner of certain pages, put there via CSS. This is the formatting, for anyone interested:
.pni-navigtion
{
border: 1px solid silver;
float: right;
font-size: 0.8em;
width: 200px;
margin: 0 0 5px 12px;
background-color: #F9F9F9;
}
If you have the time, please consider these suggestions:
1) It would be nice to have the ability to add a configurable title to the TOC, like “On this page” or “Contents”
2) I would prefer an unordered list over the ordered list. The CSS suggested by you does not seem to work (.pni-navigtion li { list-style: disc }).
Do you know if / how well your plugin works with “WordPress Super Cache” (http://ocaoimh.ie/wp-super-cache/)?
Thanks!
@Helge
Thanks for your formatting instructions.
—
I could add an optional title, but you to be sure i get you right: couldn’t you use the wordpress text editor to place a title above the content, eg:
The implementation of a configurable title would look somthing like this:
—
For the CSS: can you provide an example page where it does not work? I tried on my blog (with Firebug) and the list was shown unordererd. Did you try:
.pni-navigtion li { list-style: disc !important }(maybe some inheritation problem)
—
I will look into supercache, never used before.
@Helge
Concerning WP Super Cache: From my theoretical understanding, there is no reason why it shouldn’t. The cache simply stores the rendererd site in a static file. This plugin is used in the render process, so the final content includes the TOC.
In practical terms: I’ve installed and activated the plugin (on this blog). As far as i can see there are no problems. However, there are multiple configuration options and i did not check them all. Have a look around..
If you can determine anything certain, please let me know.
Hi Ulrich,
thank you very much for your reply (and the time you are spending on this!). I am building a new website (currently in private mode) for a free tool I am offering.
Regarding WP Super Cache: I was just trying to get as much information as possible. I try to use not too many plugins and carefully select those I do use. I did not think there would be problems with ToC either, but thought you might have encountered the question before. Although I have had a WP blog before, I have not used WP Super Cache either, but it sure sounds intruiging!
Regarding changing ol to ul: Here is my updated CSS I use to customize your ToC plugin. It moves the TOC to the upper right corner and changes the ordered list into an unordered list. Additionally I remove the top links and change the line heights so that multiple lines from one heading are closer together than two different headings.
/* Configure plugin “Table of Content” start */
.pni-navigtion
{
border: 1px solid silver;
float: right;
font-size: 0.8em;
width: 200px;
margin: 0 0 5px 12px;
padding-top: 5px;
padding-right: 10px;
background-color: #F9F9F9;
}
/* Change ol into ul */
.pni-navigtion ol li {list-style-type: disc}
.pni-navigtion ol li ol li {list-style-type: disc}
.pni-navigtion ol li ol li ol li {list-style-type: disc}
.pni-navigtion ol li ol li ol li ol li {list-style-type: disc}
.pni-navigtion ol {padding-left: 25px;}
.pni-navigtion ol li
{
line-height: 1.4;
margin-top: .5em;
}
/* Do not show a top link next to each heading */
.toplink {display: none}
/* Configure plugin “Table of Content” end */
Regarding the title: Please see this screen shot of one of my pages for clarification:
https://docs.google.com/leaf?id=0B9RT9vm6wTrOZmZhY2I5NTQtZjcwZC00YjRjLWFkY2ItMTY0YTk1MzczOGJh&sort=name&layout=list&num=50
I cannot place anything before [table-of-content] because that would not be included in the TOC box. I would really love an option like the one you suggested:
[table-of-content title="On this page"]
And with its own CSS class or ID so it can be formatted.
Again, thank you very much. Adding a title would be perfect! Of course I already voted on wordpress.org for your plugin.
@Helge
WP SuperCache seems very interesting, indeed. I’ve did not tumble across it until now and thank you for bringing this to me
For the css, i don’t think you need to set it for each level. With the !important modifier i’ve shown above it should overrule anything else. If not, try
div.pni-navigtion ol li {list-style-type: disc !important}, or use your code, if it already works ..I’ve added the suggested title attribute (some 5 more lines of code in the plugin..) You can download the updated version either from above or wait for the wordpress repositories and install via wp-admin. A description on how to use is added above. Good idea, in any case, thanks for mentioning.
Thank you very much for implemting the title option so quickly. But why do you mark it as “”? That way, it gets formatted like a h5 heading, which it is not (in my case in the navigation box). Whould it not be “cleaner” to just use the CSS class pni-title and let the user decide how to format it?
In the last comment I meant: Why to you mark it as a h5 heading?
[The angle bracket does not show up]
@Helge
I’ve choosen a h5 cause it’s high enough not to be used very often and via the additional class it can be fully configured via CSS
h5.pni-title { .. }. How do you intend to change/set the html-tag ? Possible might be another option (egtitle-tag="p") or what do you suggest ? There has to be a default html-tag eventually and there probably will always be someone who has to clear inherited styles due to the used tag..Ok, enough with the options. I’ve added an admin menu item (can be found under “Settings” in the WP Admin menu..) where you can set a default title which will be placed over each TOC (also the title attribute can still be used to overwrite the default). There you can also define the used HTML tag for the title and whether go with ul or ol for the lists..
Your changes sound great! They make your plugin much more flexible to use. I guess quite a few others might like them, too.
But … I still have a problem: I cannot access the admin page. Maybe I am just being stupid.
I upgraded the ToC plugin via the Auto-Update mechanism of WordPress to 0.6.2. That went well. Then I had the new option Settings->T.O.C. But when I click on that, I get a 404. The anchor set on “T.O.C.” points to:
http://MyDomain.com/wp-admin/table-of-content/admin.php
I installed WordPress to the root of my domain. There is no directory “table-of-content” in wp-admin. Do you know what went wrong?
Thanks again!
@Helge:
Right you are! I forgot to add the admin.php into svn.. silly me. It’s now online. Download above or upgrade via WP. Sorry for the inconvenience..
Thank you again!
But … I ran into yet another issue. Now when I click on the admin link “T.O.C.” I get the following:
Fatal error: Call to undefined function scf_check_simple_captcha() in /home/MYUSERNAME/public_html/wp-content/plugins/table-of-content/admin.php on line 56
I am using reCAPTCHA as captcha plugin.
Damnit.. Working on two plugins the same time causes trouble .. try current version.
Great! Now the admin page displays. Thank you!
I have (what I hope is) a last request: I have enabled the WordPress option
define(‘FORCE_SSL_ADMIN’, true);
which forces all administration to go through SSL. When I click on “Save all” on the T.o.C. admin page it explicitly tries to use HTTP (without S) – which fails. The settings are not saved. Could you remove that dependency on HTTP so it automatically uses what is configured?
@Helge:
Ok, try the new release from WP Plugins. Afaik
get_option( 'siteurl' )does not respect the https settings, butsite_url()should according to http://codex.wordpress.org/Function_Reference/site_url . Get back to me, if it still does not provide the https-URLGreat! It works now!
Thank you very much all the work you have done.
Thanks so much for this plug in!
I was going to suggest inserting classes into the HTML mark up so the different hierarchies could be styled via CSS however I remembered that this can already be done by using basic css rules:
ul { font-weight: bold; }
ul ul { font-weight: normal; }
ul ul ul { font-weight: normal; }
I would love to use your plugin to create a collapsible outline of content on a page using some
JavaScript to hide and show links to secondary sub headers (so that users are not overwhelmed by less important information). I’ve found the following website which provides some code for creating a collapsible outline from nested lists http://www.boutell.com/newfaq/creating/outline.html however it requires the top level ul element to have a CSS class name. Is their any easy way to modify your plugin so that it creates a class name for the main ul element? I’m pretty hopeless with php so any help would be very much appreciated!
Sorry for all the spammy comments I’m clueless with php but after a few hours poking around with your code I figured out how answer my own question..
In the includes.php file I changed the line
$navigation = ‘args[ 'list_type' ]. ‘>’;
to include class=”toplevel”
$navigation = ‘args[ 'list_type' ]. ‘ class=”toplevel”>’;
Thanks again for this awesome plugin it makes wordpress much more powerful!
Great solution. I will include this in the next release.
Hi
This is the best TOC plugin I’ve tried, thanks.
No problem using the shortcodes, but I was hoping you might provide a bit more detail about how to add it to my theme, I’m not sure which file to put it in, it looks like functions.php code, but I’m only guessing. I tried it and got an error. if I put in in archive or single it only shows the code on the page. Could you give an example of how to do it?
Thanks
Good idea! I’ve upgraded the plugin accordingly. Download the new 0.6.6 via WordPress. Then you can add the following to your functions.php:
if ( function_exists( 'toc_filter' ) && ! function_exists( 'theme_toc_filter' ) ) { function theme_toc_filter( $content = "" ) { return toc_filter( $content ); } add_filter( 'the_content', 'theme_toc_filter' ); }Also read the readme.txt, it also explains how you can disable the TOC rendering for single pages.
Hi Ulrich,
ToC is a very neat plugin. Although I had problems with text inside [table-of-content] containing shortcodes from other plugins. It seems that they weren’t evaluated by ToC.
I changed in the plugin.php file (v. 0.6.5.) row 67 by adding do_shortcode($res->content) to:
// finalize the “new” content
$parsed = ‘‘. $title. $res->navigation. ”. do_shortcode($res->content). ”;
Now all other shortcodes were evaluated correctly.
On the WP-plugin repository I didn’t find version 0.6.6. There is only v. 0.6.5.
Cheers Michael
NICE! can’t wait to try it! Thanks!
Can’t seem to find version 0.6.6 in the WP plugins, still showing 0.6.5. Where can I get the new one?
I used the functions.php code you provided with the current version 0.6.5. I tried to add the code but it broke my functions.php file. Then I removed it but it’s still broken. This is weird, I never had a file brake and then not be able to reverse it by removing the code.
Warning: Cannot modify header information – headers already sent by (output started at /home2/fourstic/public_html/TravelBlog3000/wp-content/plugins/buddypress/bp-themes/bp-default/functions.php:440) in /home2/fourstic/public_html/TravelBlog3000/wp-admin/theme-editor.php on line 89
Hi Again
I recovered my functions.php file, but I don’t want to try this again until I get some feedback on how to use.
You mentioned an upgrade to a version 0.6.6 but I can’t find it anywhere. Is the template code for the older (current) version 0.6.5 no longer functional?
Love this plugin. I will localize it and also add a show/hide feature. OK?
Hello,
this plugin is the best. But i have aproblem with:
Inhalt
in output. How can I strip the slashes?
I’ve nothing changed. What can I do?
Thanks for your help.