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:

Image2525202019 07 21252520at2525206.18.24252520PM - Make the visibility of TOC hidden in certain posts

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:

 Screen252520Recording2525202019 07 21252520at25252006.21252520PM - Make the visibility of TOC hidden in certain posts

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.

ACF

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

Add New Field Group

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

FieldGroup

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

FieldLabel

TOC

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

Field Location

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).

Image2525202019 07 21252520at2525206.13.30252520PM - Make the visibility of TOC hidden in certain posts 

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.

Divi Single post

3 – Use this code in the template:

php

<?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.

Display None

 

Results

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

What do you think of this tutorial?

Article Title: Make the visibility of TOC hidden in certain posts

Short Description: Learn how to control the visibility of your Table of Contents (TOC) on a post by post basis using our crafty tutorial!

Author: Ardian Lumi

Publisher - Orgnization: MemberFix

Publisher Logo: mermberfix logo x200 1 - Make the visibility of TOC hidden in certain posts

User Review
5 (2 votes)

R

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.

Share This