Make the visibility of TOC hidden in certain posts

Introduction

Overview

The Table of Contents (TOC) is a plugin which allows you to insert a table of contents into your posts, pages and custom post types.

We use the Easy Table of Contents plugin which is one of the most popular WordPress TOC plugins on the market right now.

The TOC plugin will automatically generate a table of contents for your posts, pages and custom post types based on the settings you select (e.g. based on your header tags), as you can see in the screenshot below:

By default, the table of contents widget is generated and placed just above your post content in the “open” state. But the reader can “close” the table of contents to minimize it, or open it back up at will:

In the TOC plugin settings there is a field that lets you set the default state for your entire site. But unfortunately, you can’t control the default state on a post by post basis.

This tutorial will show you how to control this state individually for each of your posts!

Install Advanced Custom Fields plugin.

1 – Go to WordPress Dashboard > Plugins > Add New

2 – Search for Advanced Custom Fields and Install, then activate the plugin.

3 – A new item named Custom Fields will be shown in the left menu. Click on Custom Fields > Field Groups > Add New

4 – Give a name to the Field Group and then click Add Field

5 – Give the field a label, the name will be auto generated.

5.1 – The field type should be True / False

5.2 – Stylised UI – YES

6 – Choose the Field Location, for this example we have used Post Type is equal to Post

7 – Click Publish to create the custom field in Post Type.

You will now see this additional field in your posts edit screen (below the title field).

Add the custom code in single.php file

1 – Go to your WordPress admin dashboard, then Appearance > Editor

You will see the theme files, depending on the theme you have there are different folders and files. In my example, I am using a child theme and there aren’t many files.

Important: make sure to use a child theme or the My Custom Functions plugin to insert this shortcode. Otherwise you’ll lose your changes when you update your theme.

2 – Locate single.php in the right side and click on it.

3 – Use this code in the template:

<?php
   $post_ID = get_the_ID();
   $value_toc = get_field( 'make_toc_hidden', $post_ID );
?>
<?php 
   if ($value_toc):
      echo "<style>" . ".postid-" . $post_ID . " ul.ez-toc-list { display: none; }</style>";
?>
<?php endif; // end of if TOC Field logic ?>

4 – Make sure to insert the php code inside the WordPress loop. In my example I have inserted the code from line 22 – 28, check the image above.

4.1 – The “get_field( ‘make_toc_hidden’, $post_ID );” will get the information from the field for a specific post id. If the option is enabled it means the TOC will be hidden.

4.2 – The css code is specific for Divi theme but it can be used for other themes as well if you remove the “.postid-” from the code.

5 – When you enable the custom field we have created, the CSS code below will be added into the post. This code makes TOC hidden.

Results

Voila! The TOC is now hidden for specific posts as you need them.

Now let’s hear from you!

Are you using the TOC plugin?

Is this article helpful for you?

Tell us in the comments section below.