Tips and Tricks

Wordpress Plugins for Ghost

A recipe for implementing fun Javascript behaviors on your Ghost site. Here we install the Table of Contents Plus (a Wordpress Plugin) on our Ghosty in 3 quick steps. TTL: 15 minutes.

Jen Wallace

Feb 29, 2020 • 38 min read

Here is the script: https://dublue.com/plugins/toc/

This 3-step process is the same basic recipe we can use to install into our Ghost sites just about any of the gazillion free front-end javascripts (i.e. Dynamic Drive, CodePen, CodeMyUI, GitHub, etc.), including the same ones used in Wordpress plugins. In fact, this TOC Plus is actually a Wordpress plugin that we are hijacking for use in Ghost :-)

What we're doing here is essentially dropping in the 3 snippets of code (CSS, Javascript, and HTML) needed to create a copy of the code author's Demo page as a new post in our Ghost site.

NOTE: You can perform this entire procedure on just one post at a time by inserting the below CSS and JS codes into the Post Settings >> Code Injection.

However for this tutorial I'll be putting the necessary codes into the Site Settings >> Code Injection so the TOC Plus can be used on all of the posts and pages throughout the site.

OK... ready... set... go...

STEP 1

CSS - Copy this into Site Settings >> Code Injection >> Site Header...

<style> 

#toc_container li,
#toc_container ul {
    margin: 0;
    padding: 0
}

#toc_container.no_bullets li,
#toc_container.no_bullets ul,
#toc_container.no_bullets ul li,
.toc_widget_list.no_bullets,
.toc_widget_list.no_bullets li {
    background: 0 0;
    list-style-type: none;
    list-style: none
}

#toc_container.have_bullets li {
    padding-left: 12px
}

#toc_container ul ul {
    margin-left: 1.5em
}

#toc_container {
    background: #f9f9f9;
    border: 1px solid #aaa;
    padding: 10px;
    margin-bottom: 1em;
    width: auto;
    display: table;
    font-size: 95%
}

#toc_container.toc_light_blue {
    background: #edf6ff
}

#toc_container.toc_white {
    background: #fff
}

#toc_container.toc_black {
    background: #000
}

#toc_container.toc_transparent {
    background: none transparent
}

#toc_container p.toc_title {
    text-align: center;
    font-weight: 700;
    margin: 0;
    padding: 0
}

#toc_container.toc_black p.toc_title {
    color: #aaa
}

#toc_container span.toc_toggle {
    font-weight: 400;
    font-size: 90%
}

#toc_container p.toc_title+ul.toc_list {
    margin-top: 1em
}

.toc_wrap_left {
    float: left;
    margin-right: 10px
}

.toc_wrap_right {
    float: right;
    margin-left: 10px
}

#toc_container a {
    text-decoration: none;
    text-shadow: none
}

#toc_container a:hover {
    text-decoration: underline
}

.toc_sitemap_posts_letter {
    font-size: 1.5em;
    font-style: italic
}
    
div#toc_container ul li {font-size: 85%;}

</style>

STEP 2

JS - Copy this into Site Settings >> Code Injection >> Site Footer...

<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = {"smooth_scroll":"1","visibility_show":"show","visibility_hide":"hide","width":"Auto"};
/* ]]> */
</script>

<script type='text/javascript'>
!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):t("object"==typeof module&&module.exports?require("jquery"):jQuery)}(function(t){function e(t){return t.replace(/(:|\.|\/)/g,"\\$1")}var o="1.6.0",i={},l={exclude:[],excludeWithin:[],offset:0,direction:"top",delegateSelector:null,scrollElement:null,scrollTarget:null,beforeScroll:function(){},afterScroll:function(){},easing:"swing",speed:400,autoCoefficient:2,preventDefault:!0},s=function(e){var o=[],i=!1,l=e.dir&&"left"===e.dir?"scrollLeft":"scrollTop";return this.each(function(){var e=t(this);return this!==document&&this!==window?!document.scrollingElement||this!==document.documentElement&&this!==document.body?void(e[l]()>0?o.push(this):(e[l](1),i=e[l]()>0,i&&o.push(this),e[l](0))):(o.push(document.scrollingElement),!1):void 0}),o.length||this.each(function(){"BODY"===this.nodeName&&(o=[this])}),"first"===e.el&&o.length>1&&(o=[o[0]]),o};t.fn.extend({scrollable:function(t){var e=s.call(this,{dir:t});return this.pushStack(e)},firstScrollable:function(t){var e=s.call(this,{el:"first",dir:t});return this.pushStack(e)},smoothScroll:function(o,i){if(o=o||{},"options"===o)return i?this.each(function(){var e=t(this),o=t.extend(e.data("ssOpts")||{},i);t(this).data("ssOpts",o)}):this.first().data("ssOpts");var l=t.extend({},t.fn.smoothScroll.defaults,o),s=function(o){var i=this,s=t(this),n=t.extend({},l,s.data("ssOpts")||{}),c=l.exclude,a=n.excludeWithin,r=0,h=0,u=!0,d={},p=t.smoothScroll.filterPath(location.pathname),f=t.smoothScroll.filterPath(i.pathname),m=location.hostname===i.hostname||!i.hostname,g=n.scrollTarget||f===p,v=e(i.hash);if(n.scrollTarget||m&&g&&v){for(;u&&r<c.length;)s.is(e(c[r++]))&&(u=!1);for(;u&&h<a.length;)s.closest(a[h++]).length&&(u=!1)}else u=!1;u&&(n.preventDefault&&o.preventDefault(),t.extend(d,n,{scrollTarget:n.scrollTarget||v,link:i}),t.smoothScroll(d))};return null!==o.delegateSelector?this.undelegate(o.delegateSelector,"click.smoothscroll").delegate(o.delegateSelector,"click.smoothscroll",s):this.unbind("click.smoothscroll").bind("click.smoothscroll",s),this}}),t.smoothScroll=function(e,o){if("options"===e&&"object"==typeof o)return t.extend(i,o);var l,s,n,c,a,r=0,h="offset",u="scrollTop",d={},p={};"number"==typeof e?(l=t.extend({link:null},t.fn.smoothScroll.defaults,i),n=e):(l=t.extend({link:null},t.fn.smoothScroll.defaults,e||{},i),l.scrollElement&&(h="position","static"===l.scrollElement.css("position")&&l.scrollElement.css("position","relative"))),u="left"===l.direction?"scrollLeft":u,l.scrollElement?(s=l.scrollElement,/^(?:HTML|BODY)$/.test(s[0].nodeName)||(r=s[u]())):s=t("html, body").firstScrollable(l.direction),l.beforeScroll.call(s,l),n="number"==typeof e?e:o||t(l.scrollTarget)[h]()&&t(l.scrollTarget)[h]()[l.direction]||0,d[u]=n+r+l.offset,c=l.speed,"auto"===c&&(a=Math.abs(d[u]-s[u]()),c=a/l.autoCoefficient),p={duration:c,easing:l.easing,complete:function(){l.afterScroll.call(l.link,l)}},l.step&&(p.step=l.step),s.length?s.stop().animate(d,p):l.afterScroll.call(l.link,l)},t.smoothScroll.version=o,t.smoothScroll.filterPath=function(t){return t=t||"",t.replace(/^\//,"").replace(/(?:index|default).[a-zA-Z]{3,4}$/,"").replace(/\/$/,"")},t.fn.smoothScroll.defaults=l}),jQuery.cookie=function(t,e,o){if(arguments.length>1&&"[object Object]"!==String(e)){if(o=jQuery.extend({},o),(null===e||void 0===e)&&(o.expires=-1),"number"==typeof o.expires){var i=o.expires,l=o.expires=new Date;l.setDate(l.getDate()+i)}return e=String(e),document.cookie=[encodeURIComponent(t),"=",o.raw?e:encodeURIComponent(e),o.expires?"; expires="+o.expires.toUTCString():"",o.path?"; path="+o.path:"",o.domain?"; domain="+o.domain:"",o.secure?"; secure":""].join("")}o=e||{};var s,n=o.raw?function(t){return t}:decodeURIComponent;return(s=new RegExp("(?:^|; )"+encodeURIComponent(t)+"=([^;]*)").exec(document.cookie))?n(s[1]):null},jQuery(document).ready(function(t){if("undefined"!=typeof tocplus){if(t.fn.shrinkTOCWidth=function(){t(this).css({width:"auto",display:"table"}),/MSIE 7\./.test(navigator.userAgent)&&t(this).css("width","")},1==tocplus.smooth_scroll){var e=hostname=pathname=qs=hash=null;t("body a").click(function(){if(hostname=t(this).prop("hostname"),pathname=t(this).prop("pathname"),qs=t(this).prop("search"),hash=t(this).prop("hash"),pathname.length>0&&"/"!=pathname.charAt(0)&&(pathname="/"+pathname),window.location.hostname==hostname&&window.location.pathname==pathname&&window.location.search==qs&&""!==hash){var o=hash.replace(/([ !"$%&'()*+,.\/:;<=>?@[\]^`{|}~])/g,"\\$1");t(o).length>0?e=hash:(anchor=hash,anchor=anchor.replace("#",""),e='a[name="'+anchor+'"]',0==t(e).length&&(e="")),offset="undefined"!=typeof tocplus.smooth_scroll_offset?-1*tocplus.smooth_scroll_offset:t("#wpadminbar").length>0&&t("#wpadminbar").is(":visible")?-30:0,e&&t.smoothScroll({scrollTarget:e,offset:offset})}})}if("undefined"!=typeof tocplus.visibility_show){var o="undefined"!=typeof tocplus.visibility_hide_by_default?!0:!1;if(t.cookie)var i=t.cookie("tocplus_hidetoc")?tocplus.visibility_show:tocplus.visibility_hide;else var i=tocplus.visibility_hide;o&&(i=i==tocplus.visibility_hide?tocplus.visibility_show:tocplus.visibility_hide),t("#toc_container p.toc_title").append(' <span class="toc_toggle">[<a href="#">'+i+"</a>]</span>"),i==tocplus.visibility_show&&(t("ul.toc_list").hide(),t("#toc_container").addClass("contracted").shrinkTOCWidth()),t("span.toc_toggle a").click(function(e){switch(e.preventDefault(),t(this).html()){case t("<div/>").html(tocplus.visibility_hide).text():t(this).html(tocplus.visibility_show),t.cookie&&(o?t.cookie("tocplus_hidetoc",null,{path:"/"}):t.cookie("tocplus_hidetoc","1",{expires:30,path:"/"})),t("ul.toc_list").hide("fast"),t("#toc_container").addClass("contracted").shrinkTOCWidth();break;case t("<div/>").html(tocplus.visibility_show).text():default:t(this).html(tocplus.visibility_hide),t.cookie&&(o?t.cookie("tocplus_hidetoc","1",{expires:30,path:"/"}):t.cookie("tocplus_hidetoc",null,{path:"/"})),t("#toc_container").css("width",tocplus.width).removeClass("contracted"),t("ul.toc_list").show("fast")}})}}});
</script>

STEP 3

HTML - Copy this into an HTML Block on a new post...

<div style="width: 100%">
    
<div id="toc_container" class="no_bullets"><p class="toc_title">Contents</p><ul class="toc_list"><li><a href="#Description"><span class="toc_number toc_depth_1">1</span> Description</a></li><li><a href="#Translations"><span class="toc_number toc_depth_1">2</span> Translations</a></li><li><a href="#Screenshots"><span class="toc_number toc_depth_1">3</span> Screenshots</a></li><li><a href="#Install_upgrade"><span class="toc_number toc_depth_1">4</span> Install / upgrade</a></li><li><a href="#Help"><span class="toc_number toc_depth_1">5</span> Help</a><ul><li><a href="#The_simplest_approach"><span class="toc_number toc_depth_2">5.1</span> The simplest approach</a></li><li><a href="#Where8217s_my_table_of_contents"><span class="toc_number toc_depth_2">5.2</span> Where&#8217;s my table of contents?</a></li><li><a href="#How_do_I_stop_the_table_of_contents_from_appearing_on_a_single_page"><span class="toc_number toc_depth_2">5.3</span> How do I stop the table of contents from appearing on a single page?</a></li><li><a href="#I8217ve_set_wrapping_to_left_or_right_but_the_headings_don8217t_wrap_around_the_table_of_contents"><span class="toc_number toc_depth_2">5.4</span> I&#8217;ve set wrapping to left or right but the headings don&#8217;t wrap around the table of contents</a></li><li><a href="#How_do_I_include_the_name_of_the_page_in_the_table_of_contents_title"><span class="toc_number toc_depth_2">5.5</span> How do I include the name of the page in the table of contents title?</a></li><li><a href="#My_site_has_100_pages_but_I_only_want_the_table_of_contents_to_appear_on_10_of_them"><span class="toc_number toc_depth_2">5.6</span> My site has 100 pages but I only want the table of contents to appear on 10 of them</a></li><li><a href="#I_want_to_ignore_certain_headings"><span class="toc_number toc_depth_2">5.7</span> I want to ignore certain headings</a></li><li><a href="#Can_I_have_the_table_of_contents_in_the_sidebar"><span class="toc_number toc_depth_2">5.8</span> Can I have the table of contents in the sidebar?</a></li><li><a href="#Unlike_Wikipedia_I_want_all_my_anchors_to_be_lowercase_and_use_hyphens_rather_than_underscores"><span class="toc_number toc_depth_2">5.9</span> Unlike Wikipedia, I want all my anchors to be lowercase and use hyphens rather than underscores</a></li><li><a href="#I_would_like_to_incorporate_a_sitemap"><span class="toc_number toc_depth_2">5.10</span> I would like to incorporate a sitemap</a></li><li><a href="#The_sitemap_uses_a_strange_font_dissimilar_to_the_rest_of_the_site"><span class="toc_number toc_depth_2">5.11</span> The sitemap uses a strange font dissimilar to the rest of the site</a></li></ul></li><li><a href="#Shortcodes"><span class="toc_number toc_depth_1">6</span> Shortcodes</a></li><li><a href="#For_developers"><span class="toc_number toc_depth_1">7</span> For developers</a><ul><li><a href="#How_do_I_customise_my_anchors"><span class="toc_number toc_depth_2">7.1</span> How do I customise my anchors?</a></li><li><a href="#toc_get_index_content_8221_prefix_url_8221"><span class="toc_number toc_depth_2">7.2</span> toc_get_index( $content = &#8221;, $prefix_url = &#8221; )</a></li><li><a href="#Versioning_scheme"><span class="toc_number toc_depth_2">7.3</span> Versioning scheme</a></li></ul></li><li><a href="#I_love_it_how_can_I_show_my_appreciation"><span class="toc_number toc_depth_1">8</span> I love it, how can I show my appreciation?</a></li><li><a href="#Questions_or_suggestions"><span class="toc_number toc_depth_1">9</span> Questions or suggestions?</a></li></ul></div>
<h2><span id="Description">Description</span></h2>
<p>Built from the ground up and with Wikipedia in mind, the table of contents by default appears before the first heading on a page. This allows the author to insert lead-in content that may summarise or introduce the rest of the page. It also uses a unique numbering scheme that doesn&#8217;t get lost through CSS differences across themes.</p>
<p>This plugin is a great companion for content rich sites such as content management system oriented configurations. That said, bloggers also have the same benefits when writing long structured articles. <a href="http://dublue.com/2012/05/12/another-benefit-to-structure-your-web-pages/">Discover how Google</a> uses this index to provide &#8216;Jump To&#8217; links to your content.</p>
<p>Includes an administration options panel where you can customise settings like display position, define the minimum number of headings before an index is displayed, other appearance, and more. For power users, expand the advanced options to further tweak its behaviour &#8211; eg: exclude undesired heading levels like h5 and h6 from being included; disable the output of the included CSS file; adjust the top offset and more. Using shortcodes, you can override default behaviour such as special exclusions on a specific page or even to hide the table of contents altogether.</p>
<p>Prefer to include the index in the sidebar? Go to Appearance &gt; Widgets and drag the TOC+ to your desired sidebar and position.</p>
<p>Custom post types are supported, however, auto insertion works only when <code>the_content()</code> has been used by the custom post type. Each post type will appear in the options panel, so enable the ones you want.</p>
<h2><span id="Translations">Translations</span></h2>
<ul>
<li>Australian English (default)</li>
<li>Danish &#8211; <a href="http://cupunu.dk/">Cupunu</a></li>
<li>Dutch &#8211; <a href="http://101themes.com/">Renee</a></li>
<li>French &#8211; Jean-Michel Duriez</li>
<li>German &#8211; <a href="http://blog.bmarwell.de/">Ben</a></li>
<li>Greek &#8211; <a href="http://www.foodblostarter.com/">Dimitrios Kaisaris</a></li>
<li>Hebrew &#8211; <a href="http://atar4u.com/">Ahrale</a></li>
<li>Japanese &#8211; <a href="http://ja.gravatar.com/deerboy01">シカマル</a></li>
<li>Polish &#8211; <a href="http://notatki.4use.pl/">Jakub</a></li>
<li>Simplified Chinese &#8211; Jason</li>
<li>Slovak &#8211; Boris Gereg</li>
<li>Ukrainian &#8211; <a href="http://www.iphostmonitor.com/">Michael Yunat</a></li>
</ul>
<p>Translations are more than welcome. The translation file can be found in the languages folder of the plugin, or <a href="http://plugins.trac.wordpress.org/browser/table-of-contents-plus/trunk/languages/toc%2B.pot">online in the WordPress repository</a>.</p>
<p>If you have any advice in making it easier to translate, please let me know.</p>
<h2><span id="Screenshots">Screenshots</span></h2>

		<style type="text/css">
			#gallery-3 {
				margin: auto;
			}
			#gallery-3 .gallery-item {
				float: left;
				margin-top: 10px;
				text-align: center;
				width: 33%;
			}
			#gallery-3 img {
				border: 2px solid #cfcfcf;
			}
			#gallery-3 .gallery-caption {
				margin-left: 0;
			}
			/* see gallery_shortcode() in wp-includes/media.php */
		</style>
		<div data-carousel-extra='{"blog_id":1,"permalink":"https:\/\/dublue.com\/plugins\/toc\/"}' id='gallery-3' class='gallery galleryid-52 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<a href='https://dublue.com/wp-content/uploads/2011/06/screenshot-11.png'><img width="150" height="150" src="https://dublue.com/wp-content/uploads/2011/06/screenshot-11-150x150.png" class="attachment-thumbnail size-thumbnail" alt="" aria-describedby="gallery-3-911" data-attachment-id="911" data-permalink="https://dublue.com/plugins/toc/screenshot-1-2/#main" data-orig-file="https://dublue.com/wp-content/uploads/2011/06/screenshot-11.png" data-orig-size="649,792" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="screenshot-1" data-image-description="" data-medium-file="https://dublue.com/wp-content/uploads/2011/06/screenshot-11-245x300.png" data-large-file="https://dublue.com/wp-content/uploads/2011/06/screenshot-11.png" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-3-911'>
				An example of the table of contents, positioned at the top, right aligned, and a width of 275px
				</dd></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<a href='https://dublue.com/wp-content/uploads/2011/06/screenshot-2.png'><img width="150" height="150" src="https://dublue.com/wp-content/uploads/2011/06/screenshot-2-150x150.png" class="attachment-thumbnail size-thumbnail" alt="" aria-describedby="gallery-3-912" data-attachment-id="912" data-permalink="https://dublue.com/plugins/toc/screenshot-2/#main" data-orig-file="https://dublue.com/wp-content/uploads/2011/06/screenshot-2.png" data-orig-size="346,558" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="screenshot-2" data-image-description="" data-medium-file="https://dublue.com/wp-content/uploads/2011/06/screenshot-2-186x300.png" data-large-file="https://dublue.com/wp-content/uploads/2011/06/screenshot-2.png" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-3-912'>
				An example of the sitemap_pages shortcode
				</dd></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<a href='https://dublue.com/wp-content/uploads/2011/06/screenshot-3.png'><img width="150" height="150" src="https://dublue.com/wp-content/uploads/2011/06/screenshot-3-150x150.png" class="attachment-thumbnail size-thumbnail" alt="" aria-describedby="gallery-3-913" data-attachment-id="913" data-permalink="https://dublue.com/plugins/toc/screenshot-3/#main" data-orig-file="https://dublue.com/wp-content/uploads/2011/06/screenshot-3.png" data-orig-size="606,715" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="screenshot-3" data-image-description="" data-medium-file="https://dublue.com/wp-content/uploads/2011/06/screenshot-3-254x300.png" data-large-file="https://dublue.com/wp-content/uploads/2011/06/screenshot-3.png" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-3-913'>
				An example of the sitemap_posts shortcode
				</dd></dl><br style="clear: both" /><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<a href='https://dublue.com/wp-content/uploads/2011/06/screenshot-4.png'><img width="150" height="150" src="https://dublue.com/wp-content/uploads/2011/06/screenshot-4-150x150.png" class="attachment-thumbnail size-thumbnail" alt="" aria-describedby="gallery-3-914" data-attachment-id="914" data-permalink="https://dublue.com/plugins/toc/screenshot-4/#main" data-orig-file="https://dublue.com/wp-content/uploads/2011/06/screenshot-4.png" data-orig-size="699,1223" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="screenshot-4" data-image-description="" data-medium-file="https://dublue.com/wp-content/uploads/2011/06/screenshot-4-171x300.png" data-large-file="https://dublue.com/wp-content/uploads/2011/06/screenshot-4-585x1024.png" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-3-914'>
				The options panel found in Settings > TOC+
				</dd></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<a href='https://dublue.com/wp-content/uploads/2011/06/screenshot-5.png'><img width="150" height="150" src="https://dublue.com/wp-content/uploads/2011/06/screenshot-5-150x150.png" class="attachment-thumbnail size-thumbnail" alt="" aria-describedby="gallery-3-915" data-attachment-id="915" data-permalink="https://dublue.com/plugins/toc/screenshot-5/#main" data-orig-file="https://dublue.com/wp-content/uploads/2011/06/screenshot-5.png" data-orig-size="672,1259" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="screenshot-5" data-image-description="" data-medium-file="https://dublue.com/wp-content/uploads/2011/06/screenshot-5-160x300.png" data-large-file="https://dublue.com/wp-content/uploads/2011/06/screenshot-5-546x1024.png" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-3-915'>
				Some advanced options
				</dd></dl><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://dublue.com/wp-content/uploads/2011/06/screenshot-6.png'><img width="150" height="150" src="https://dublue.com/wp-content/uploads/2011/06/screenshot-6-150x150.png" class="attachment-thumbnail size-thumbnail" alt="" aria-describedby="gallery-3-916" data-attachment-id="916" data-permalink="https://dublue.com/plugins/toc/screenshot-6/#main" data-orig-file="https://dublue.com/wp-content/uploads/2011/06/screenshot-6.png" data-orig-size="767,409" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="screenshot-6" data-image-description="" data-medium-file="https://dublue.com/wp-content/uploads/2011/06/screenshot-6-300x159.png" data-large-file="https://dublue.com/wp-content/uploads/2011/06/screenshot-6.png" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-3-916'>
				The sitemap tab
				</dd></dl><br style="clear: both" />
		</div>

<h2><span id="Install_upgrade">Install / upgrade</span></h2>
<p>Install the plugin by searching for <em>Table of Contents Plus</em> from the plugin add menu, or directly from the <a href="http://wordpress.org/extend/plugins/table-of-contents-plus/">WordPress plugins repository</a>.</p>
<p>There are no special upgrade instructions (woohoo!). Overwrite your existing folder with the latest or use the streamlined approach in the plugin menu. Your options will not be lost.</p>
<h2><span id="Help">Help</span></h2>
<h3><span id="The_simplest_approach">The simplest approach</span></h3>
<p>For the impatient, all you have to do is enable the plugin.</p>
<p>The plugin will apply default settings and produce the table of contents before the first heading on pages (not posts, nor custom post types) with <strong>four or more</strong> headings.</p>
<p>No shortcodes are needed.</p>
<h3><span id="Where8217s_my_table_of_contents">Where&#8217;s my table of contents?</span></h3>
<ol>
<li>In most cases, the post, page or custom post type has less than the minimum number of headings. By default, this is set to four so make sure you have at least four headings within your content. If you want to change this value, you can find it under &#8216;Main Options&#8217; &gt; &#8216;Show when&#8217;.</li>
<li>Is auto insertion enabled for your content type? By default, only pages are enabled.</li>
<li>Have you got <code>&#091;no_toc&#093;</code> somewhere within the content? This will disable the index for the current post, page or custom post type.</li>
<li>If you are using the TOC+ widget, check if you have the <em>&#8220;Show the table of contents only in the sidebar&#8221;</em> enabled as this will limit its display to only the sidebar. You can check by going into Appearance &gt; Widgets.</li>
<li>You may have restricted generation to a URL path match. The setting can be found in the advanced section under Main Options.</li>
</ol>
<h3><span id="How_do_I_stop_the_table_of_contents_from_appearing_on_a_single_page">How do I stop the table of contents from appearing on a single page?</span></h3>
<p>Place the following <code>&#091;no_toc&#093;</code> anywhere on the page to suppress the table of contents. This is known as a shortcode and works for posts, pages and custom post types that make use of the_content()</p>
<h3><span id="I8217ve_set_wrapping_to_left_or_right_but_the_headings_don8217t_wrap_around_the_table_of_contents">I&#8217;ve set wrapping to left or right but the headings don&#8217;t wrap around the table of contents</span></h3>
<p>This normally occurs when there is a CSS clear directive in or around the heading originating from the theme (Twenty Eleven and Twenty Twelve are two themes which do this). This directive tells the user agent to reset the previous wrapping specifications.</p>
<p>You can adjust your theme&#8217;s CSS or try moving the table of contents position to the top of the page. If you didn&#8217;t build your theme, I&#8217;d highly suggest you try the <a href="http://wordpress.org/extend/plugins/safecss/">Custom CSS plugin</a> if you wish to make CSS changes.</p>
<p>Try adding the following CSS to allow the wrapping to occur around the table of contents:</p>
<p><code><br />
h1, h2, h3, h4, h5, h6 { clear: none; }<br />
</code></p>
<h3><span id="How_do_I_include_the_name_of_the_page_in_the_table_of_contents_title">How do I include the name of the page in the table of contents title?</span></h3>
<p>As the title of the page changes depending on the page you&#8217;re viewing, you can use the following special variable to automatically insert the title of the page into the table of contents heading:</p>
<p><code>%PAGE_NAME%</code></p>
<p>You can use it as is or place text either side of the variable.</p>
<p>As an example: if your page is named <em>Great Expectations</em> and your table of contents title is set to <em>Contents for %PAGE_NAME%</em>, the final title would read <em>Contents for Great Expectations</em></p>
<h3><span id="My_site_has_100_pages_but_I_only_want_the_table_of_contents_to_appear_on_10_of_them">My site has 100 pages but I only want the table of contents to appear on 10 of them</span></h3>
<p>You could put <code>&#091;no_toc&#093;</code> on the 90 pages but that wouldn&#8217;t be fun&#8230; so try the following:</p>
<ol>
<li>Go to Settings &gt; TOC+ and disable the auto insertion option for pages (or the content type you&#8217;re working with).</li>
<li>Add <code>&#091;toc&#093;</code> onto the 10 pages that need them. Note that the table of contents will appear where you placed the shortcode.</li>
</ol>
<p>Alternatively, you could also experiment with the restrict path option if the pages you want to include the index on all fall within a certain section of your site (eg /doc/).</p>
<h3><span id="I_want_to_ignore_certain_headings">I want to ignore certain headings</span></h3>
<p>Use the &#8216;exclude headings&#8217; option if you would like to ignore certain headings. Separate multiple headings with a pipe <code>|</code>. Use an asterisk <code>*</code> as a wildcard to match other text. Note that this is not case sensitive. Some examples include:</p>
<ul>
<li><code>Fruit*</code> ignore headings starting with <em>Fruit</em></li>
<li><code>*Fruit Diet*</code> ignore headings with <em>Fruit Diet</em> somewhere in the heading</li>
<li><code>Apple Tree|Oranges|Yellow Bananas</code> ignore headings that are exactly <em>Apple Tree</em>, <em>Oranges</em> or <em>Yellow Bananas</em></li>
</ul>
<h3><span id="Can_I_have_the_table_of_contents_in_the_sidebar">Can I have the table of contents in the sidebar?</span></h3>
<p>Use the TOC+ widget and drag it into your desired position. If you want the table of contents to only be displayed in the sidebar, then make sure you tick that option in the widget.</p>
<h3><span id="Unlike_Wikipedia_I_want_all_my_anchors_to_be_lowercase_and_use_hyphens_rather_than_underscores">Unlike Wikipedia, I want all my anchors to be lowercase and use hyphens rather than underscores</span></h3>
<p>There are two options that allow you to adjust the casing and use of hyphens. If you still require more, you can massage it a little more by attaching into the <code>toc_url_anchor_target</code> filter. See the <a href="#For_developers">developers</a> section for an example.</p>
<h3><span id="I_would_like_to_incorporate_a_sitemap">I would like to incorporate a sitemap</span></h3>
<ol>
<li>Create a page for your sitemap (if you have an existing one, use that instead).</li>
<li>Add <code>&#091;sitemap&#093;</code> into your page and save.</li>
</ol>
<p>The above is the simplest example of integrating a sitemap listing all pages and categories. You can customise the sitemap options under Settings &gt; TOC+ or check out some of the more advanced uses with the sitemap related shortcodes below.</p>
<p>You could also incorporate a sitemap using a text widget and pasting any of the sitemap shortcodes.</p>
<h3><span id="The_sitemap_uses_a_strange_font_dissimilar_to_the_rest_of_the_site">The sitemap uses a strange font dissimilar to the rest of the site</span></h3>
<p>No extra styles are created for the sitemap, instead it inherits any styles you used when adding the shortcode. If you copy and pasted, you probably also copied the &#8216;code&#8217; tags surrounding it so remove them if this is the case.</p>
<p>In most cases, try to have the shortcode on its own line with nothing before or after the square brackets.</p>
<h2><span id="Shortcodes">Shortcodes</span></h2>
<p>The plugin was designed to be as seamless and painfree as possible and did not require you to insert a shortcode for operation. However, using the shortcode allows you to fully control the position of the table of contents within your page. The following shortcodes are available with this plugin.</p>
<p>When parameters are left out for the shortcodes below, they will fallback to the settings you defined under Settings &gt; TOC+.</p>
<table id="shortcode_table">
<thead>
<tr>
<th>Shortcode</th>
<th>Description</th>
<th>Attributes</th>
</tr>
</thead>
<tbody>
<tr>
<td>&#091;toc&#093;</td>
<td>Lets you generate the table of contents at the preferred position. Also useful for sites that only require a TOC on a small handful of pages.</td>
<td>
<ul>
<li><strong>label</strong>: text, title of the table of contents</li>
<li><strong>no_label</strong>: true/false, shows or hides the title</li>
<li><strong>wrapping</strong>: text, either &#8220;left&#8221; or &#8220;right&#8221;</li>
<li><strong>heading_levels</strong>: numbers, this lets you select the heading levels you want included in the table of contents. Separate multiple levels with a comma. Example: include headings 3, 4 and 5 but exclude the others with <code>heading_levels="3,4,5"</code></li>
<li><strong>exclude</strong>: text, enter headings to be excluded.  Separate multiple headings with a pipe <code>|</code>. Use an asterisk <code>*</code> as a wildcard to match other text. You could also use regular expressions for more advanced matching.</li>
<li><strong>class</strong>: text, enter CSS classes to be added to the container.  Separate multiple classes with a space.</li>
</ul>
</td>
</tr>
<tr>
<td>&#091;no_toc&#093;</td>
<td>Allows you to disable the table of contents for the current post, page, or custom post type.</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&#091;sitemap&#093;</td>
<td>Produces a listing of all pages and categories for your site. You can use this on any post, page or even in a text widget.</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&#091;sitemap_pages&#093;</td>
<td>Lets you print out a listing of only pages.</td>
<td>
<ul>
<li><strong>heading</strong>: number between 1 and 6, defines which html heading to use</li>
<li><strong>label</strong>: text, title of the list</li>
<li><strong>no_label</strong>: true/false, shows or hides the list heading</li>
<li><strong>exclude</strong>: IDs of the pages or categories you wish to exclude</li>
<li><strong>exclude_tree</strong>: ID of the page or category you wish to exclude including its all descendants</li>
</ul>
</td>
</tr>
<tr>
<td>&#091;sitemap_categories&#093;</td>
<td>Similar to &#091;sitemap_pages&#093; but for categories.</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&#091;sitemap_posts&#093;</td>
<td>This lets you print out an index of all published posts on your site.  By default, posts are listed in alphabetical order grouped by their first letters. There are CSS classes for each section, letter and list allowing you to customise the appearance.</td>
<td>
<ul>
<li><strong>order</strong>: text, either ASC or DESC</li>
<li><strong>orderby</strong>: text, popular options include &#8220;title&#8221;, &#8220;date&#8221;, &#8220;ID&#8221;, and &#8220;rand&#8221;. See <a href="https://codex.wordpress.org/Class_Reference/WP_Query#Order_.26_Orderby_Parameters">WP_Query</a> for a list.</li>
<li><strong>separate</strong>: true/false (defaults to true), does not separate the lists by first letter when set to false.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<h2><span id="For_developers">For developers</span></h2>
<h3><span id="How_do_I_customise_my_anchors">How do I customise my anchors?</span></h3>
<p>If you&#8217;re still not happy with the anchors, you can modify them to suit your needs through a custom function hooked into the <code>toc_url_anchor_target</code> filter.  As an example, place the below code snippet into your functions.php file to convert all anchors to uppercase.</p>
<pre>
function my_custom_anchor( $anchor )
{
	return strtoupper( $anchor );
}
add_filter( 'toc_url_anchor_target', 'my_custom_anchor' );</pre>
<h3><span id="toc_get_index_content_8221_prefix_url_8221">toc_get_index( $content = &#8221;, $prefix_url = &#8221; )</span></h3>
<p>Returns a HTML formatted string of the table of contents without the surrounding UL or OL tags to allow the theme editor to supply their own ID and/or classes to the outer list.</p>
<p>Both parameters are optional:</p>
<ul>
<li><code>$content</code> is the entire content with headings.  If blank, will default to the current content found in $post (eg within &#8220;the loop&#8221;).</li>
<li><code>$prefix_url</code> is the URL to prefix the anchor with.  If a string was provided, it will be used as is.  If set to &#8220;true&#8221; then will try to obtain the permalink from the $post object.</li>
</ul>
<p>These examples assume you are within &#8220;the loop&#8221;:</p>
<ol>
<li>Obtain the index for the current page
<pre>echo '&lt;ul id="my_toc"&gt;' . toc_get_index() . '&lt;/ul&gt;';</pre>
</li>
<li>Create a listing of all children and their headings
<pre>
$children = new WP_Query(array(
	'post_parent' => get_the_ID(),
	'posts_per_page' => -1	// get all children
));
while ( $children->have_posts() ) {
	$children->the_post();
	echo 
		'&lt;h3&gt;' . get_the_title() . '&lt;/h3&gt;' .
		'&lt;ul&gt;' . toc_get_index( get_the_content(), get_permalink( $children->post->ID ) ) . '&lt;/ul&gt;'
	;
}
wp_reset_postdata();</pre>
</li>
</ol>
<h3><span id="Versioning_scheme">Versioning scheme</span></h3>
<p>I have adopted the same Ubuntu versioning scheme so the first release is 1107.</p>
<p>Other releases in the same month will be dot releases, eg the second release in July 2011 is 1107.1.</p>
<h2><span id="I_love_it_how_can_I_show_my_appreciation">I love it, how can I show my appreciation?</span></h2>
<p>If you have been impressed with this plugin and would like to somehow show some appreciation, rather than send a donation my way, please donate to your charity of choice. Feel free to leave a short note here if you&#8217;d like.</p>
<p>I will never ask for any form of reward or compensation. Helping others achieve their goals is satisfying enough 🙂</p>
<h2><span id="Questions_or_suggestions">Questions or suggestions?</span></h2>
<p>If you have questions or suggestions, please place them below.</p>

</div>

Great Job, Grasshopper!

Here is what you should see on your new post...

Contents

1 Description
2 Translations
3 Screenshots
4 Install / upgrade
5 Help
6 Shortcodes
7 For developers
8 I love it, how can I show my appreciation?
9 Questions or suggestions?

Description

Built from the ground up and with Wikipedia in mind, the table of contents by default appears before the first heading on a page. This allows the author to insert lead-in content that may summarise or introduce the rest of the page. It also uses a unique numbering scheme that doesn’t get lost through CSS differences across themes.

This plugin is a great companion for content rich sites such as content management system oriented configurations. That said, bloggers also have the same benefits when writing long structured articles. Discover how Google uses this index to provide ‘Jump To’ links to your content.

Includes an administration options panel where you can customise settings like display position, define the minimum number of headings before an index is displayed, other appearance, and more. For power users, expand the advanced options to further tweak its behaviour – eg: exclude undesired heading levels like h5 and h6 from being included; disable the output of the included CSS file; adjust the top offset and more. Using shortcodes, you can override default behaviour such as special exclusions on a specific page or even to hide the table of contents altogether.

Prefer to include the index in the sidebar? Go to Appearance > Widgets and drag the TOC+ to your desired sidebar and position.

Custom post types are supported, however, auto insertion works only when the_content() has been used by the custom post type. Each post type will appear in the options panel, so enable the ones you want.

Translations

Australian English (default)
Danish – Cupunu
Dutch – Renee
French – Jean-Michel Duriez
German – Ben
Greek – Dimitrios Kaisaris
Hebrew – Ahrale
Japanese – シカマル
Polish – Jakub
Simplified Chinese – Jason
Slovak – Boris Gereg
Ukrainian – Michael Yunat

Translations are more than welcome. The translation file can be found in the languages folder of the plugin, or online in the WordPress repository.

If you have any advice in making it easier to translate, please let me know.

Screenshots

: An example of the table of contents, positioned at the top, right aligned, and a width of 275px

: An example of the sitemap_pages shortcode

: An example of the sitemap_posts shortcode

: The options panel found in Settings > TOC+

: Some advanced options

: The sitemap tab

Install / upgrade

Install the plugin by searching for Table of Contents Plus from the plugin add menu, or directly from the WordPress plugins repository.

There are no special upgrade instructions (woohoo!). Overwrite your existing folder with the latest or use the streamlined approach in the plugin menu. Your options will not be lost.

Help

The simplest approach

For the impatient, all you have to do is enable the plugin.

The plugin will apply default settings and produce the table of contents before the first heading on pages (not posts, nor custom post types) with four or more headings.

No shortcodes are needed.

Where’s my table of contents?

In most cases, the post, page or custom post type has less than the minimum number of headings. By default, this is set to four so make sure you have at least four headings within your content. If you want to change this value, you can find it under ‘Main Options’ > ‘Show when’.
Is auto insertion enabled for your content type? By default, only pages are enabled.
Have you got [no_toc] somewhere within the content? This will disable the index for the current post, page or custom post type.
If you are using the TOC+ widget, check if you have the “Show the table of contents only in the sidebar” enabled as this will limit its display to only the sidebar. You can check by going into Appearance > Widgets.
You may have restricted generation to a URL path match. The setting can be found in the advanced section under Main Options.

How do I stop the table of contents from appearing on a single page?

Place the following [no_toc] anywhere on the page to suppress the table of contents. This is known as a shortcode and works for posts, pages and custom post types that make use of the_content()

I’ve set wrapping to left or right but the headings don’t wrap around the table of contents

This normally occurs when there is a CSS clear directive in or around the heading originating from the theme (Twenty Eleven and Twenty Twelve are two themes which do this). This directive tells the user agent to reset the previous wrapping specifications.

You can adjust your theme’s CSS or try moving the table of contents position to the top of the page. If you didn’t build your theme, I’d highly suggest you try the Custom CSS plugin if you wish to make CSS changes.

Try adding the following CSS to allow the wrapping to occur around the table of contents:

h1, h2, h3, h4, h5, h6 { clear: none; }

How do I include the name of the page in the table of contents title?

As the title of the page changes depending on the page you’re viewing, you can use the following special variable to automatically insert the title of the page into the table of contents heading:

%PAGE_NAME%

You can use it as is or place text either side of the variable.

As an example: if your page is named Great Expectations and your table of contents title is set to Contents for %PAGE_NAME%, the final title would read Contents for Great Expectations

My site has 100 pages but I only want the table of contents to appear on 10 of them

You could put [no_toc] on the 90 pages but that wouldn’t be fun… so try the following:

Go to Settings > TOC+ and disable the auto insertion option for pages (or the content type you’re working with).
Add [toc] onto the 10 pages that need them. Note that the table of contents will appear where you placed the shortcode.

Alternatively, you could also experiment with the restrict path option if the pages you want to include the index on all fall within a certain section of your site (eg /doc/).

I want to ignore certain headings

Use the ‘exclude headings’ option if you would like to ignore certain headings. Separate multiple headings with a pipe |. Use an asterisk * as a wildcard to match other text. Note that this is not case sensitive. Some examples include:

Fruit* ignore headings starting with Fruit
*Fruit Diet* ignore headings with Fruit Diet somewhere in the heading
Apple Tree|Oranges|Yellow Bananas ignore headings that are exactly Apple Tree, Oranges or Yellow Bananas

Can I have the table of contents in the sidebar?

Use the TOC+ widget and drag it into your desired position. If you want the table of contents to only be displayed in the sidebar, then make sure you tick that option in the widget.

Unlike Wikipedia, I want all my anchors to be lowercase and use hyphens rather than underscores

There are two options that allow you to adjust the casing and use of hyphens. If you still require more, you can massage it a little more by attaching into the toc_url_anchor_target filter. See the developers section for an example.

I would like to incorporate a sitemap

Create a page for your sitemap (if you have an existing one, use that instead).
Add [sitemap] into your page and save.

The above is the simplest example of integrating a sitemap listing all pages and categories. You can customise the sitemap options under Settings > TOC+ or check out some of the more advanced uses with the sitemap related shortcodes below.

You could also incorporate a sitemap using a text widget and pasting any of the sitemap shortcodes.

The sitemap uses a strange font dissimilar to the rest of the site

No extra styles are created for the sitemap, instead it inherits any styles you used when adding the shortcode. If you copy and pasted, you probably also copied the ‘code’ tags surrounding it so remove them if this is the case.

In most cases, try to have the shortcode on its own line with nothing before or after the square brackets.

Shortcodes

The plugin was designed to be as seamless and painfree as possible and did not require you to insert a shortcode for operation. However, using the shortcode allows you to fully control the position of the table of contents within your page. The following shortcodes are available with this plugin.

When parameters are left out for the shortcodes below, they will fallback to the settings you defined under Settings > TOC+.

Shortcode	Description	Attributes
[toc]	Lets you generate the table of contents at the preferred position. Also useful for sites that only require a TOC on a small handful of pages.	label: text, title of the table of contents no_label: true/false, shows or hides the title wrapping: text, either “left” or “right” heading_levels: numbers, this lets you select the heading levels you want included in the table of contents. Separate multiple levels with a comma. Example: include headings 3, 4 and 5 but exclude the others with `heading_levels="3,4,5"` exclude: text, enter headings to be excluded. Separate multiple headings with a pipe `\|`. Use an asterisk `` as a wildcard to match other text. You could also use regular expressions for more advanced matching. class*: text, enter CSS classes to be added to the container. Separate multiple classes with a space.
[no_toc]	Allows you to disable the table of contents for the current post, page, or custom post type.
[sitemap]	Produces a listing of all pages and categories for your site. You can use this on any post, page or even in a text widget.
[sitemap_pages]	Lets you print out a listing of only pages.	heading: number between 1 and 6, defines which html heading to use label: text, title of the list no_label: true/false, shows or hides the list heading exclude: IDs of the pages or categories you wish to exclude exclude_tree: ID of the page or category you wish to exclude including its all descendants
[sitemap_categories]	Similar to [sitemap_pages] but for categories.
[sitemap_posts]	This lets you print out an index of all published posts on your site. By default, posts are listed in alphabetical order grouped by their first letters. There are CSS classes for each section, letter and list allowing you to customise the appearance.	order: text, either ASC or DESC orderby: text, popular options include “title”, “date”, “ID”, and “rand”. See WP_Query for a list. separate: true/false (defaults to true), does not separate the lists by first letter when set to false.

For developers

How do I customise my anchors?

If you’re still not happy with the anchors, you can modify them to suit your needs through a custom function hooked into the toc_url_anchor_target filter. As an example, place the below code snippet into your functions.php file to convert all anchors to uppercase.

function my_custom_anchor( $anchor )
{
	return strtoupper( $anchor );
}
add_filter( 'toc_url_anchor_target', 'my_custom_anchor' );

toc_get_index( $content = ”, $prefix_url = ” )

Returns a HTML formatted string of the table of contents without the surrounding UL or OL tags to allow the theme editor to supply their own ID and/or classes to the outer list.

Both parameters are optional:

$content is the entire content with headings. If blank, will default to the current content found in $post (eg within “the loop”).
$prefix_url is the URL to prefix the anchor with. If a string was provided, it will be used as is. If set to “true” then will try to obtain the permalink from the $post object.

These examples assume you are within “the loop”:

Obtain the index for the current page

echo '<ul id="my_toc">' . toc_get_index() . '</ul>';

Create a listing of all children and their headings

$children = new WP_Query(array(
	'post_parent' => get_the_ID(),
	'posts_per_page' => -1	// get all children
));
while ( $children->have_posts() ) {
	$children->the_post();
	echo 
		'<h3>' . get_the_title() . '</h3>' .
		'<ul>' . toc_get_index( get_the_content(), get_permalink( $children->post->ID ) ) . '</ul>'
	;
}
wp_reset_postdata();

Versioning scheme

I have adopted the same Ubuntu versioning scheme so the first release is 1107.

Other releases in the same month will be dot releases, eg the second release in July 2011 is 1107.1.

I love it, how can I show my appreciation?

If you have been impressed with this plugin and would like to somehow show some appreciation, rather than send a donation my way, please donate to your charity of choice. Feel free to leave a short note here if you’d like.

I will never ask for any form of reward or compensation. Helping others achieve their goals is satisfying enough 🙂

Questions or suggestions?

If you have questions or suggestions, please place them below.