Category: Business

If you publish a long-form content piece on the web, you really owe it to your readers to provide navigational help. That seems obvious, but most things online that call themselves books (just one way of singling out long-form material) don’t go very far out of their way. If there’s any plain-old book table of contents, odds are it’s static or offers only chapter heading links. The web could stand to do a little better.

This article makes a start at thinking it through: what are the options for what, in the physical world, might be called the “table of contents.”

The final section of this piece also includes an overview of one approach to creating a book-like structure in WordPress and giving it a table of contents (though it’s built manually). With this approach, adding a ToC-specific menu for the book is trivial, if not entirely satisfactory.

Mind you, a book table of contents—that thing that, in English-language books, comes in the front before the actual content material—is only one navigation tool that can be provided in print books. There’s also, in nonfiction works, the index, which is just a much finer-grained table of contents that’s been sorted into alphabetical order.

Chapter summaries fall into the navigation category and occur even in fiction, though most often in older works, such as this example from Dickens:

Chapter 38: Mr. Samuel Weller, Being Entrusted With a Mission of Love, Proceeds to Execute it; With What Success Will Hereinafter Appear

Charles Dickens

Even the sidebar, beloved of textbooks, is a sort of navigational aid, in that it clearly signals that the material in the sidebar is incidental to the main flow of the text and could, if one were in a rush, be skipped for now.

In some instances, footnotes, too, are navigational, pointing to other sections of the book (what you might call “internal links”) or pointing to other works (“external links”).

But the main option is the table of contents, and that’s where we’ll spend most of our time in this piece. As a side note, never forget that your table of contents is another small element in your ebook marketing plan — people skim ToC’s to get a sense of whether the content suits their needs.

The Blog List as a Book Table of Contents

If you think of a blog in its entirety as a long-form work (which I don’t, but it’s a useful place to start), the reverse chronological listing of posts that appears on the top of the blog is as much ToC as you get.

It’s a terrible ToC and I think the reasons are fairly obvious: it doesn’t generally provide any sense of topical organization or how things fit together. It’s also generally designed so that the individual entries take up a lot of space, such that you have to click through lots of pages to get to things that didn’t appear quite recently.

Reflecting about what’s missing gives us a couple ideas about what makes a good online ToC. First, a ToC ideally conveys the internal structure of the work. Is there a first part that’s theoretical and a second part that’s about practical application? Great. Then the ToC should convey this. Second, it does this in a way that gives access to at least the top-level hierarchy of the work in one view. Readers should be able to move through the ToC without clicking through multiple places.

One fantastic additional element to an online ToC, as opposed to a print book, is that it should be available on every page in the work, and easily consulted without unintentionally losing one’s current place.

The PDF’s lost opportunity

We won’t linger on this, but it’s worth mentioning in passing that most PDF “eBooks” are a terrific example of how not to do this sort of thing. (And there’s a good argument that you shouldn’t be using PDFs for this stuff anyway…)

Because of the PDF’s heritage as a format that preserves the look and feel of printed pages, it’s not unusual to see a conventional print-style ToC at the front of one.

Even though it’s possible to make the text on these ToCs link to the pages they point to, as often as not, PDF designers don’t bother with this extra step.

Without putting too fine a point on it, this is missing the point of being online.

We won’t linger on the PDF, but one thing that is interesting is the way some readers will show some documents with thumbnail page images down one margin, so that you can jump to a specific page and have some general idea what that page looks like. In some formats, this means you can easily identify the starting pages of chapters. In works that have substantially different designs on different pages, you may even be able to jump directly to a page. It’s a nice touch and something that simply isn’t possible in print.

The eBook Table of Contents

Whereas print books tend to have a page that contains little more than the title and author of the book, this feels a little performative in an online work. In an online work, it seems better to have the title and author combined either with cover art or with the ToC, just depending on the style or nature (fiction or non-fiction, for instance) of the book.

In longer web pages, one sees a sort of “proto-ToC” that shows, typically, the subheadings on the page and allows for a direct jump to those locations.

There are starting to be Gutenberg blocks that provide this sort of ToC functionality as well:

Way in the back of my head I feel like there used to be natively in WordPress to make sequential book pages instead of chronological posts, but in the past couple of days, I’ve poked around the internet looking for this option in vain. I think it vanished from disuse and, best I can recall, it was pretty clunky. But I do think there might have been a rudimentary ToC capability included with it.

As far as I know, that was the only plugin-oriented ToC device for handling lots of sections and pages in a sequential order.

Needless to say, you can of course build a page that looks and acts exactly like a table of contents, just making all the links to the pages by hand.

Rolling Your Own

To build a book (and that book’s table of contents) within your website, first create a custom post type that represents the pages of your book. You can do this by creating a plugin that looks like this:

// call our custom function with the init hook
add_action( 'init', 'pz_register_cpts' );

 // custom function to register a "publication" post type
function pz_register_cpts() {
	register_post_type( 'publication',
	array(
		'labels' => array(
			'name' => __( 'Publications' ),
			'singular_name' => __( 'Publication' ),
			'add_new_item' => __('Add New Publication'),
		),
	'public' => true,
	'has_archive' => true,
    'show_in_rest' => true,
   'supports' => array('title','editor'),

	)
    );

    // and bookpage CPT
    register_post_type( 'bookpage',
        array(
            'labels' => array(
        		'name' => __( 'BookPage' ),
				'singular_name' => __( 'BookPage' )
			),
		'public' => true,
		'has_archive' => true,
        'show_in_rest' => true,
		)
	);

    // and book jacket type
    register_post_type( 'jacket',
	array(
		'labels' => array(
			'name' => __( 'Jackets' ),
			'singular_name' => __( 'Jacket' ),
			'add_new_item' => __('Add New Jacket'),
		),
	'public' => true,
	'has_archive' => true,
    'show_in_rest' => true,

	)
    );
}

Then, use the ‘Post Sort Order’ plugin to give yourself the capability to drag your custom page posts into the correct reading order.

Note the “correct” order will very probably be the reverse of what WordPress will do, left to its own devices, unless you add the pages of your book to WordPress from back to front (not recommended).

One thing you’ll very probably want is navigational aids on each page. You want to be able to go from the current page to the next one, or perhaps go in reverse. Ideally, you should also be able to jump forward and back from one chapter start to the next.

As you know, WordPress themes quite frequently offer navigation from one post to the next. The source of these navigation links is, almost always, the template page for the particular style. If you’re familiar with how themes are built and how they use template pages, this is something you’ve already run across, but perhaps not paid a lot of attention to, because it lends itself to cutting and pasting.

If this isn’t familiar territory, not to worry. This is the perview of WordPress developers and this article isn’t the place to delve in detail into how this particular bit of functionality is coded. Suffice it to say, though, it’s doable and you can see an example of this over in the marketing guide I’ve published on this site: Found and Followed.

That same book has a dropdown menu on every page that gives you a basic ToC. It works fine, I guess, but it’s certainly easy to imagine better, and better looking, ToCs.

It’s be nice, for instance, to have the subheadings within chapters accordion into view when the cursor hovered over a chapter title. Likewise, it’d be nice to offer thumbnail page previews as the cursor hovered over a subsection. This approach would just plain be better than the original book table of contents.

How hard would it be to make this sort of thing available as, say, a plugin within WordPress, or a library in one of the React-based front-end environments.

One wouldn’t expect the technical bar to be set too high, because what we’re talking about is just a variant on the basic menu pattern. Consider this option in the Divi page builder ecosystem for a so-called ‘mega menu’ dropdown with featured images.

It’s not a ToC, but it’s easy to see how, with page thumbnails and a further dropdown from chapters to subheaders within chapters, the same basic paradigm would make an attractive navigation tool.

But I have to say, I don’t think I’ve ever come across anything quite like a really well-done menu for a long-form work online.