T.O.C.
posts table pro

[cmtoc_table_of_contents]

https://barn2.co.uk/wordpress-table-of-contents-plugin/

The ultimate WordPress table of contents plugin and how to use it

Karol KOctober 1, 2020

FacebookTwitterEmailShare

A good WordPress table of contents plugin can do a lot for your website, and in ways that are probably a bit outside of what you might be expecting.

This sounds perhaps a bit mysterious at this point, but I'm going to explain everything in just a minute.

In short, if you've been on the lookout for a great WordPress table of contents plugin then your search is basically over. In this post, I'm going to show you why Posts Table Pro is the ultimate such plugin, how to use it, and in which unusual ways it can help you make your whole site more reader-friendly.

Posts Table Pro: the best table of contents plugin

Posts Table Pro lets you create an easy table of contents for your *entire* website. And "entire" is the keyword here.

An example of what that might look like:

• What you can see in this particular example is a list of posts belonging to a given category. This can be customized (more on this in a minute).

So what sets this plugin apart from its competitors?

Most WordPress TOC plugins focus on creating a set of jump links within an individual blog post.

Posts Table Pro does something else.

In simple terms, it hooks up to your site's database and allows you to build a whole site table of contents. This can consist of any number and any combination of WordPress posts, pages, custom post types, taxonomies, custom fields or any other content type you might have on the site.

But there's more:

• Posts Table Pro is a user-friendly and simple TOC plugin that works through easy shortcodes, which means that you can include your table of contents in any post or page.
• The structure of your table of contents is fully customizable, and the overall styling is inherited from your current theme. No CSS code snippets required.
• You can present your table of contents as a single-column list, or as a multi-column table that's sortable, paginated (to prevent scrolling), and offering you a number of side features.
• You can add a search field to help the reader find any given entry in the TOC.
• The reader can filter through the website table of contents via a handy dropdown list.
• Everything is fully responsive and mobile-friendly.
• It can improve your website's SEO in search engines like Google.
• Posts Table Pro is compatible with WordPress themes as well as page builders like Elementor.

Here's how to use Posts Table Pro step by step:

How to start using this WordPress table of contents plugin

There are just two simple steps:

Step #1: Install Posts Table Pro

First, here's where you can get the plugin:

Posts Table Pro

Create the ultimate Table of Contents on your WordPress site now!

Free Trial – Sign Up

After you finalize the purchase, you will be able to download the ZIP containing the plugin. You will also get your personal license key.

Next:

• Log in to your WordPress dashboard, go to Plugins → Add New.
• Click on the Upload Plugin button at the top of the page.
• Select the ZIP file of the plugin and follow the on-screen instructions to install and activate the plugin.
• Lastly, go to the plugin's general settings page by navigating to Settings → Posts Table Pro and enter your license key. Finish up by clicking on Save Changes.

Step #2: Use the main plugin shortcode

As I mentioned, this WordPress table of contents plugin is shortcode-based. This means that in order to use it, all you need to do is place the following shortcode into a Gutenberg block anywhere in your posts or pages:

[ posts_table ]

  posts_table     ]

This is how you can insert the table of contents into your pages if you're using the Gutenberg editor. Using this shortcode as is will display a table containing all your blog posts – with fields for their featured images, titles, summaries, categories, authors, and publication dates. Keep in mind that titles are H1s i.e. the first heading.

Alternatively, you can also use the Insert Posts Table button in the text editor toolbar to auto insert the table into your page.

Although comprehensive, you'll probably want to adjust the presentation to make it more TOC-like… This brings me to:

Customizing the Posts Table Pro shortcode

Here are six specific use cases for this WordPress table of contents plugin:

1. Displaying a simple, minimal table of contents

If you're looking for a WordPress table of contents plugin then this simple type of presentation is probably exactly what you've had in mind.

With Posts Table Pro, you can choose specific posts, pages, custom content types, and even WooCommerce products that you want to feature in your table of contents. This helps you deliver better user experience.

For example, here's the shortcode to use in order to display an easy table of contents containing posts categorized as "featured":

[posts_table columns="title" post_type="post" category="featured"]

posts_table columns="title" post_type="post" category="featured"

To display all your pages in a similar manner, you can use this:

[ posts_table columns="title" post_type="page" ]

posts_table columns="title" post_type="page"

The result:

If you want to go super minimal, and also get rid of the keyword search box, the reset button, the "Show X entries" dropdown, and the "Showing 1 to X of X posts" text, you can use this:

[ posts_table columns="title" post_type="page" search_box="false" page_length="false" reset_button="false" totals="false" ]

[posts_table columns="title" post_type="page" search_box="false" page_length="false" reset_button="false" totals="false"]

The result:

Notice how you don't have to mess around with your WordPress theme's CSS styling. You can also display the table of contents in a widget on your website. To do this, simply add the shortcode to any text widget.

Note. You can also go the exact opposite route and feature multiple columns in your table of contents. Posts Table Pro allows you to use the following values for the column parameter: id, title, content, excerpt, image, date, author, categories, tags, status, plus any other custom field or taxonomy.

How to exclude pages from your WordPress website table of contents

When I created a sitewide table of contents for our own WordPress website, I was amazed at how many pages I didn't want to include. This is because like most websites, our site has lots of random pages and landing pages that don't form part of the overall navigation structure.

Fortunately, you can also exclude certain posts, pages, or even whole categories from the TOC. For example, the following shortcode excludes two posts – IDs 23 and 31:

[ posts_table post_type="post" exclude="23,31" ]

[posts_table post_type="post" exclude="23,31"]

To exclude a whole category, you can use:

[posts_table post_type="post" exclude_category="some-category" ]

[posts_table post_type="post" exclude_category="some-category"]

2. Making a table of contents for a series of posts

If you happen to be publishing a series of posts on the same topic, it might be a good idea to feature a table of contents at the beginning of each of those posts that would link to the other posts in the series.

Here's how to do that:

First, make sure that all the posts in your series either belong to the same series-exclusive category or have the same tag (also series-exclusive, meaning that the tag can't be used anywhere else on the site).

Then, just place this shortcode at the beginning of the posts:

[ posts_table columns="title" post_type="post" category="series-name" ]

[posts_table columns="title" post_type="post" category="series-name"]

Or:

[ posts_table columns="title" post_type="post" tag="series-tag" ]

[posts_table columns="title" post_type="post" tag="series-tag"]

What's great about this way of handling the series' table of contents is that if you ever happen to expand the series and add new posts to it, those will be picked up by the TOC in the previous posts automatically.

3. Making a list of similar posts easier to navigate

Imagine running a mobile tech blog that publishes posts like these:

• "how to record a video on Android"
• "how to record a video on iOS"
• "how to record a video on Windows Phone"
• "how to edit a photo on Android"
• "how to edit a photo on iOS"
• and so on

The differences from post to post are only slight, yet very significant nonetheless. If a reader is interested only in iOS, for example, then it can be hard for them to navigate through the blog's pages and ignore everything that talks about the other platforms.

To improve on that experience, we can create a TOC featuring only titles of the posts, and also let the reader filter out everything that's of no interest to them.

An example shortcode for that:

[ posts_table columns="title,categories" post_type="post" search_box="false" page_length="false" reset_button="false" totals="false" filters="true" ]

[posts_table columns="title,categories" post_type="post" search_box="false" page_length="false" reset_button="false" totals="false" filters="true"]

Here's how this could play out in practice:

 

4. Displaying a table of contents for custom posts

It's important to point out that Posts Table Pro also allows you to display a table of contents for your custom posts, whatever those might be.

For example, let's say you have a custom post type called "books". You can display a table of contents featuring all posts of that type via the following shortcode:

[ posts_table post_type="books" ]

[posts_table post_type="books"]

Of course, you are also free to use any of the other shortcode parameters – to pick specific columns, add filters, etc.

5. Creating an index of your website content

An index is kind of like a table of contents, only a much bigger one, and listing your articles in alphabetical order.

An example:

You can create something like that with Posts Table Pro as well. Here's how.

6. Listing ALL your website content in a single TOC

Granted, taking all your content and listing it inside a single table of contents is a bit extreme. However, it can be useful. Two scenarios:

• Instead of creating a sitemap by hand (through HTML), you can generate it automatically with Posts Table Pro. Plus it's going to be searchable and much easier to navigate than a standard sitemap would be.
• You can take this "mega TOC" and put it on a page published privately (meaning that only the logged in users can see it). This can be a useful resource for your internal editorial team. That's because using such a TOC to find specific pieces of content on the site is going to be much quicker than going to the WordPress dashboard.

Here's the shortcode structure you can use:

[ posts_table post_type="post,page,custom-post-type-1,custom-post-type-2" ]

[posts_table post_type="post,page,custom-post-type-1,custom-post-type-2"]

• Make sure to replace custom-post-type-1,custom-post-type-2 with the actual custom post types that you have on the site (can be more than two).

---

 

Posts Table Pro – Full list of options

This is a complete list of all the options available in Posts Table Pro, with links to full instructions for each option. You can use these to configure the #91;posts_table#93; shortcode in many different ways.

Table columns

• columns – sets the columns in the table. There are options to customize or remove the column headers

Choosing which posts appear in the table

There are lots of ways to create a table listing specific posts only:

• category – lists posts from a specific category
• tag – lists posts with a specific tag
• post_type – lists posts with a specific post type (e.g. products, events, or projects)
• term – lists posts with a specific custom taxonomy term
• cf – lists posts with a specific custom field value
• year – lists posts published in a specific year
• month – lists posts published in a specific month
• day – lists posts published on a specific day of the month
• author – lists posts by a specific author/user
• status – lists posts with a specific status (e.g. Published)
• exclude – excludes specific posts from the table based on ID
• include – lists specific posts in the table based on ID
• exclude_category – excludes entire categories of posts from the table
• exclude_term – excludes posts with specific taxonomy terms from the table
• rows_per_page – sets the number of posts on each page of the table
• post_limit – sets the maximum number of posts that can appear in the table

Sorting & ordering

• sort_by – controls how the posts are sorted when the table first loads
• sort_order – sorts the table in ascending or descending order
• filters – add filter dropdown lists above the table
• search_term – filter by search term when the table first loads

Control elements above & below the table

• search_box – shows, hides or positions the keyword search box
• reset_button – shows, hides or positions the reset link
• page_length – shows, hides or positions the “Show posts” dropdown list
• totals – shows, hides or positions the post totals (e.g. “Showing 1 to 10 of 50 posts”)
• pagination – shows, hides or positions the pagination buttons (previous, next etc)
• paging_type – sets the pagination style
• show_footer – shows or hides the footer row of the table
• scroll_offset – changes the height that the page scrolls to when you move between pages in the table

Sizing & styling

• widths – sets the width of each column
• content_length – sets the number of characters in the 'content' column
• excerpt_length – sets the number of characters in the 'excerpt' column

Images

• image_size – sets the size of featured images in the table
• – control whether your images open in a lightbox

Mobile visibility & responsive options

• wrap – controls whether or not content is wrapped onto multiple lines
• priorities – controls which columns are hidden on screen sizes when there are too many to fit on the page
• column_breakpoints – provides fine-grained control over the breakpoints for each column when viewed on smaller screen sizes
• responsive_control – controls the + icon which shows hidden rows
• responsive_display – sets whether hidden rows are visible or hidden, or open in a modal window

Performance

• lazy_load – improves performance by loading the overall page before the table, and loading 1 page of posts at a time
• cache – whether to use caching to speed up table load time

Miscellaneous options

• button_text – changes the text of the button column, for example if you want this to appear as 'Read More' rather than 'View'.
• shortcodes – displays content generated by other shortcodes in the table (e.g. buttons or embedded audio or video players)
• links – sets which columns in the table are clickable
• search_on_click – controls whether clicking on a category, tag or custom taxonomy will filter the table or link to the relevant archive page
• date_format – sets the date format for any date columns
• date_columns – specifies which columns contain dates, so that the column can be sorted by date correctly
• no_posts_message – controls the text that appears if no posts are found when the table first loads
• no_posts_filtered_message – controls the text that appears if no results are found when a user searches or filters the table
• numeric_terms – fixes any issues if you're using numeric slugs for your categories or taxonomies

Posts table shortcode examples

To get you started, here are some popular examples of different ways to use Posts Table Pro.

Basic usage displaying all posts (see below for full list of columns):

#91;posts_table columns="image,title,content,date,author" #93;

Display posts from a single category (use the category slug or ID):
`#91;posts_table columns="title,excerpt,tags" category="news"#93;

Display posts from several categories. This example shows posts in the “ebooks” category or the “audiobooks” category: #91;posts_table category="ebooks,audiobooks"#93;

Display posts that belong to several categories. This example shows posts that are in the “featured”, “course”, and “health” categories:
#91;posts_table category="featured+course+health"#93;

Exclude posts from a category. This example excludes posts in the “clients” category:
`#91;posts_table exclude_category="clients"#93;

Display featured image. Defaults to 50 by 50 pixels, but you can specify a custom image size if you wish:
`#91;posts_table columns="image,title,content" image_size="80×80"#93;

Choosing custom column headings:
#91;posts_table columns="title:Post Name,content:Description,Author:Written By"#93;

What else can I do?

Please also see our articles on advanced usage, which include advice on adding tables to category archive or search results pages, translating the posts table into other languages, developer documentation, and more. We've also published a list of compatible third party plugins that you can use with Posts Table Pro.

Still need help?

If searching the knowledge base hasn't answered your question, please contact support.

Get Support

In this article:Table columnsChoosing which posts appear in the tableSorting & orderingControl elements above & below the tableSizing & stylingImagesMobile visibility & responsive optionsPerformanceMiscellaneous optionsPosts table shortcode examplesWhat else can I do?

Posts Table Pro

Not bought the plugin yet?

Buy Now

Videos & tutorials

Our written tutorials and YouTube channel contain full instructions on how to tailor Posts Table Pro to specific use cases, including document libraries, member directories, audio galleries, and more.

Still need help?

If searching the knowledge base hasn't answered your question, please contact support.

 

---

https://barn2.co.uk/kb/posts-table-image-options/

Posts table image options

The Posts Table Pro plugin comes with several options for controlling how images work in the table.

Image lightbox

If you use the image column in Posts Table Pro, the image will open in a lightbox when someone clicks on the image.



The lightbox uses the Photoswipe library.

The lightbox is enabled by default. If you would like to disable the lightbox feature, you can untick the option in the plugin settings page:



You can also enable or disable it for individual tables by setting the lightbox option in the shortcode:

#91;posts_table lightbox="false"#93;

Can I change or restyle the image lightbox?

The lightbox uses the Photoswipe library. Unfortunately there are no options to customize this (e.g. to change the lightbox background colour), and you could do this by adding some custom CSS. If you don't know how to do this, we recommend that you post a job on Codeable to find a suitable WordPress developer. We have partnered with them to provide customizations for our customers.

Linking to the single post page from the image column

If you would like the image to be clickable and take the user to the single post page, you need to disable the lightbox as described above. Once you've done this, the image column will instead link to the relevant single post page – see the links article for more details.

Image size

The image_size option controls the size of the image column if you have included this column in your posts table.

The default image size is 70x70. You can use any standard image size (e.g. thumbnail, medium, large, etc), or one or two numbers to denote the width and height for the image.

You can either set the image size option globally on the plugin settings page, or add it directly to the shortcode for individual tables.

For example, to use the medium image size:
#91;posts_table columns="image,name,description" image_size="medium"#93;

For a square image 50 by 50 pixels:
`[posts_table columns="image,name,description" image_size="50"#93;

For an image 40 pixels wide by 60 pixels high:
`[posts_table columns="image,name,description" image_size="40×60"#93;

• 
• 

 

My images are the wrong size!

Image sizing is very complex in WordPress, and can have unexpected results.

A few tips:

• Your images must be the correct proportion for your chosen image size. For example, if your images are square and you set image_size="50x40" then the images will still appear square.
• If you’re using the built-in image sizes (e.g. thumbnail, medium or large) then you can check their sizes in Settings → Media.
• It’s possible that the width settings (see above) may be overriding your image sizes. For example, if you have set a fixed width for the image column and a specific image size then these options may conflict.
• If you’re really struggling to get your images the correct size in the table then you can resize the original image to the correct size.

How to remove images from the table

If you don't want to include images in the table at all, then you can delete the image column from your list of table columns. Please see the documentation about how to edit the columns in the table.

Still need help?

If searching the knowledge base hasn't answered your question, please contact support.

Get Support

Posts Table Pro

Not bought the plugin yet?

Buy Now

Videos & tutorials

Our written tutorials and YouTube channel contain full instructions on how to tailor Posts Table Pro to specific use cases, including document libraries, member directories, audio galleries, and more.

Still need help?

If searching the knowledge base hasn't answered your question, please contact support.

Related Articles

• Adding a button column to the posts table
• Posts table image options
• Filtering posts tables by keyword or search term
• Posts table caching
• Mobile visibility & responsive options
• Customizing the "No Posts" message
• Adding a button column to the posts table
• Posts Table Pro – Full list of options
• Filtering posts tables by keyword or search term
• Posts table caching
• Mobile visibility & responsive options
• Customizing the "No Posts" message

---

How to Create a Table of Contents in WordPress Manually

You can manually add a table of contents to your WordPress posts or pages with a little bit of code. Let's walk through the process below.

First, go to the post or page you want to add the table of contents to. Click into the first heading block. Then click the More Options button from the toolbar and select Edit as HTML.



Add a unique ID name to the opening tag of the heading. For this demo, I'll use the ID names "anchor-1," "anchor-2," "anchor-3," and "anchor-4."



Repeat for the rest of the headings on the page (or only the ones you want to include in the table of contents.)

Next, click the Add Block button in the top toolbar.

Then click the Custom HTML block.

Copy and paste the following HTML into the block:

 

   <div class="toc">
<p>Table of contents</p>
<ol>
<li><a href="#anchor-1">Section 1</a></li>
<li><a href="#anchor-2">Section 2 </a></li>
<li><a href="#anchor-3">Section 3 </a></li>
<li><a href="#anchor-4">Section 4 </a></li>
</ol>
</div>

 

This will create an ordered list of jump links. Jump links are a specific type of hyperlink that readers can click on to "jump" to different sections on the same page. To create the jump links for this demo, I simply filled in the href attribute with a hashtag and the id name of the headings I wrote in the previous step.

Here's how this table of contents would look and function on the front-end of my WordPress site:



While this process only takes a few steps, it does require some knowledge of HTML and CSS. If you're not familiar or comfortable with coding, then you can use a plugin to add a ToC to your WordPress posts and pages. Below we'll check out the best table of contents plugins that don't require any coding.

---