mermberfix logo x
The MemberFix Team’s got you covered.
Membership plugins

Make the visibility of TOC hidden in certain posts

toc hidden

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 300x127 - Make the visibility of TOC hidden in certain posts

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 300x237 - Make the visibility of TOC hidden in certain posts

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

fieldgroup 1024x189 - Make the visibility of TOC hidden in certain posts

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 - Make the visibility of TOC hidden in certain posts

toc - Make the visibility of TOC hidden in certain posts

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

field location 1024x139 - Make the visibility of TOC hidden in certain posts

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 - Make the visibility of TOC hidden in certain posts

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.

Display None - Make the visibility of TOC hidden in certain posts

 

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)

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.

You may also enjoy...

WordPress based membership sites have certain requirements, and make use of certain applications that, in my experience, makes most of the popular hosting providers a poor choice.
Tired to manage your customer’s accounts manually? We have an automated solution you should check!
Learn how to insert clean code in your WordPress posts without your single or double quotes being changed by WordPress.
How to set up a WordPress membership site using Digital Access Pass (DAP) and OptimizePress.
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments