• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

nSiteful Web Builders

Building a Better Web - One Site at a Time.

  • Home
  • About
    • Testimonials
    • Resources
  • Web Sites
  • Online Marketing
  • WordPress Support
    • Customized WordPress Training
    • 60-for-60 Sessions
  • Web Applications
  • Blog
    • Archive Listing Minimalistic
    • Blog Articles Grouped by Category
    • Case Studies
    • General
    • Portfolio
    • Reviews
    • Snippets
    • Techniques
  • Contact Jeff
    • Purchase Retainer Consulting Hours
    • About Retainer Consulting Hours

By Jeff Cohan, November 11, 2018

Add Dynamic Table of Contents to a Series of WordPress Posts

Last updated November 15th, 2018 at 09:11 am

When I’m writing a series of posts on a subject — such as a multi-part tutorial — I like to include a table of contents for that series of posts. I think this helps readers navigate the content.

Here’s what I’m talking about:

I’ve searched unsuccessfully* for a plugin that would make this process easier than my old standard process:

(* Spoke too soon. See Update below for some plugins I found after publishing this post.)

My old standard process: As soon as I was publishing the second post in the series, I would manually hard-code a block of HTML with the title and permalink of each post and paste it in the desired place (usually up near the top) of each post. When I publish a new post in the series, I’d edit that HTML block, adding the permalink and title of the new post, paste that new HTML into the new post, and replace the HTML blocks in all the previous posts with the new HTML block. And so on.

There’s got to be a better way!

So, having failed to find a plugin, I patched together my own method. It’s not (yet) a distributable plugin. But maybe some day it will be, unless one already exists.

The solution I’ve come up with consists of two primary components:

  • A custom shortcode that generates the necessary HTML
  • the amr shortcode any widget plugin

The Custom Shortcode

function nwb_shortcode_toc($atts) {
	global $post;
	$atts = shortcode_atts( array(
		'ids' => '',
	), $atts, 'nwbtoc' );
	if ( empty($atts['ids']) ) {
		return;
	}
	$ids = $atts['ids'];
	$id_array = explode(',', $ids);
	$output = '<div class="nwb-toc">';
	$output .= '<h2>Posts in this Series</h2>';
	$output .= '<ol>';
	foreach ( $id_array as $id ) {
		$curr_other = ( $id == $post->ID ) ? 'current' : 'other' ;
		$output .= '<li class="' . $curr_other . '"><a href="' . get_permalink($id) . '">' . get_the_title($id) . '</a></li>';
	}
	$output .= '</ol>';
	$output .= '</div>';
	return $output;
}
add_shortcode('nwbtoc', 'nwb_shortcode_toc');

The shortcode would look like this when entered into a post:

[nwbtoc ids="4327,4446"]

The ‘ids’ parameter is a comma-separated list of post ID numbers.

The code in Line 15 tests whether the current item in the foreach loop corresponds to the “current” post. If it does, its li tag is given the class of “current”, which allows me to use CSS to change how that item is rendered. (Namely, I remove the text-decoration and change the cursor to “default”, so as to discourage the reader from clicking on the link for a post s/he’s currently reading.)

PS: I might extend to plugin to support variable h2 text as well as formatting of the list. Maybe later.

How the amr shortcode any widget Fits In

Note that I am not going to enter the above shortcode directly into each post in the series. If I did that, I would still have to edit each series post when a new one is added to the series. Do not want to do that!

Instead, I’m going to add the nwbtoc shortcode into the Widgets for Shortcodes sidebar. Once saved, the amr shortcode any widget plugin will assign that new widget its own shortcode (see below).

Now I can enter that shortcode into each post in the series.

When a new post is added to the series, all I have to do is add that post’s ID to the list of IDs in the Widgets for Shortcodes widget, and the table of contents in every post in the series will be updated.

Closing Thoughts

If you know of a plugin that performs this function, I’d love to know about it. Also, I welcome your feedback on the method I’ve come up with.

Update: Plugins Found

Turns out ya gotta know the right search terms to use!

When I searced for “series post list”, I found these:

https://wordpress.org/plugins/organize-series/
https://wordpress.org/plugins/series/
https://wordpress.org/plugins/post-series-manager/
https://wordpress.org/plugins/really-simple-series/
https://wordpress.org/plugins/post-series/

Related Posts

  1. I Built a WordPress Plugin for Downloadable Files
  2. Dive Into WordPress Custom Post Types – Part 2
  3. Dive Into WordPress Custom Post Types – Part 3
  4. Display WordPress and WooCommerce Tags as Lists
  5. How to add an About Us blurb to every WordPress blog post
  • Choose the best match.

Written by Jeff Cohan · Categorized: Techniques · Tagged: Shortcodes, WordPress

  • Choose the best match.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

mailchimp signup

Subscribe to get notified when new articles are published. Unsubscribe any time. No spam. I promise. Check out my newsletter archives.

social

Twitter Facebook LinkedIn

Recent Articles

  • Use Case for Custom Post Type: “In The News” March 10, 2023
  • Create a Custom Shortcode to Display a MemberPress Membership Price ANYWHERE on Your Website February 5, 2023
  • Avoid Direct Styling; Use CSS Instead September 21, 2022
  • Blog Tags: What They Are (and What They’re Not) August 5, 2022
  • How to Create a Simple Custom Events Plugin May 24, 2022

Filter By Category/Tag

Categories

  • Case Studies (7)
  • General (61)
  • Portfolio (5)
  • Reviews (12)
  • Snippets (16)
  • Techniques (38)

Popular Tags

Advanced Custom Fields Blogging Child Themes Content Marketing CSS CSS Grid Customer Service Custom Fields Custom Post Types Diagnostics Facebook FooGallery Genesis Gutenberg HTML Images iPhone Libra Live Chat Marketing Media MemberPress MemberPress Courses mu-plugins MySQL Photo Gallery php Pinterest Plugins Post Formats Pricing Project Management Security SEO Seth Godin Shortcodes Social Networking Surveys Taxonomies Trello Twitter Video Web design Web forms WordPress

siteground wp hosting

Web Hosting

wp101

EasyWordPresstutorialvideosforbeginners.
MemberPress CTA

Footer

Background

Web Sites | WordPress Support | Web Applications.

Formally trained in liberal arts and education (I have a B.A. in Government from Harvard and studied Secondary Education at Rutgers Graduate School), I have honed my skills in the communication arts and sciences as a teacher, trainer, instructional designer, writer, photographer, calligrapher, helpdesk manager, database programmer, and multimedia developer.

(I've also been a group counselor, waiter, bartender, bicycle messenger boy, computer salesman, carpenter's helper, financial analyst, and school board president.)

Tech

Systems since 1983.
Web sites since 1994.
PHP since 2001.
WordPress since 2007.

Contact

770-772-5134
Email Jeff
Send Money
All Ways

Copyright 2023, nSiteful Web Builders, Inc.

 

Subscribe

Pardon the interruption. I know popups can be annoying. But I’d love to have you as a subscriber.

Sign up to be notified when new articles are published. Unsubscribe any time.

* indicates required

Powered by MailChimp

×