Your Uncommonly Amazing WordPress Tech Partner
Membership plugins

Make the visibility of TOC hidden in certain posts

toc hidden

[et_pb_section fb_built=”1″ _builder_version=”3.22.3″ custom_margin=”-5px|||||” custom_padding=”3px||4px|||” fb_built=”1″ _i=”0″ _address=”0″][et_pb_row _builder_version=”3.26″ min_height=”2862px” custom_margin=”0px|auto||auto||” custom_padding=”3px||0px|||” _i=”0″ _address=”0.0″][et_pb_column type=”4_4″ _builder_version=”3.26″ custom_padding=”|||” custom_padding__hover=”|||” _i=”0″ _address=”0.0.0″][et_pb_text _builder_version=”3.27.4″ custom_margin=”||-1px|||” custom_padding=”||0px|||” _i=”0″ _address=”0.0.0.0″]

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 

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_margin=”-6px|auto||auto||” custom_padding=”1px||11px|||” _i=”1″ _address=”0.1″][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||” _i=”0″ _address=”0.1.0″][et_pb_text _builder_version=”3.27.4″ custom_margin=”||-1px|||” custom_padding=”5px||0px||false|false” z_index_tablet=”500″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” _i=”0″ _address=”0.1.0.0″]

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:

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.25″ z_index_tablet=”500″ _i=”2″ _address=”0.2″][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||” _i=”0″ _address=”0.2.0″][et_pb_blurb title=”php” use_icon=”on” font_icon=”%%208%%” icon_color=”#cc3333″ icon_placement=”left” use_icon_font_size=”on” icon_font_size=”20px” _builder_version=”3.22.5″ header_text_color=”#ffffff” header_font_size=”16″ header_line_height=”1.3em” background_color=”#000000″ width=”100px” custom_margin=”||-42px|-50px” custom_padding=”10px|15px|2px|15px” z_index_tablet=”500″ _i=”0″ _address=”0.2.0.0″][/et_pb_blurb][et_pb_text module_class=”mfcodes” _builder_version=”3.27.4″ text_font=”Source Code Pro||||||||” text_font_size=”15px” background_color=”#eff0f4″ border_width_top=”7px” border_color_top=”#cc3333″ custom_margin=”|||60px” custom_padding=”3%|3%|3%|3%” z_index_tablet=”500″ border_width_top_tablet=”7px” border_width_top_phone=”7px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” _i=”1″ _address=”0.2.0.1″]
<?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 ?>
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_margin=”-6px|auto||auto||” custom_padding=”1px||11px|||” _i=”3″ _address=”0.3″][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||” _i=”0″ _address=”0.3.0″][et_pb_text _builder_version=”3.27.4″ custom_margin=”||-1px|||” custom_padding=”5px||0px||false|false” z_index_tablet=”500″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” _i=”0″ _address=”0.3.0.0″]

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

 

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_margin=”-6px|auto||auto||” custom_padding=”1px||11px|||” _i=”4″ _address=”0.4″][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||” _i=”0″ _address=”0.4.0″][et_pb_text _builder_version=”3.27.4″ custom_margin=”||-1px|||” custom_padding=”5px||0px||false|false” z_index_tablet=”500″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” _i=”0″ _address=”0.4.0.0″]

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)
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_4,3_4″ make_equal=”on” _builder_version=”3.25″ border_width_all=”1px” border_color_all=”#2ecc71″ custom_margin=”||30px|” custom_margin_last_edited=”on|phone” custom_padding=”0px|0px|0px|0px” _i=”5″ _address=”0.5″][et_pb_column type=”1_4″ _builder_version=”3.25″ background_color=”#2ecc71″ custom_padding=”|||” custom_padding__hover=”|||” _i=”0″ _address=”0.5.0″][et_pb_blurb use_icon=”on” font_icon=”%%49%%” icon_color=”#ffffff” _builder_version=”3.0.91″ custom_margin=”30px||5px|” custom_padding=”|||” custom_css_blurb_image=”margin:0;” _i=”0″ _address=”0.5.0.0″][/et_pb_blurb][/et_pb_column][et_pb_column type=”3_4″ _builder_version=”3.25″ custom_padding=”30px|20px|20px|0px” custom_padding_phone=”0px||30px|20px” custom_padding_last_edited=”on|phone” custom_padding__hover=”|||” _i=”1″ _address=”0.5.1″][et_pb_text _builder_version=”3.27.4″ text_font=”||||||||” text_line_height=”1.6em” _i=”0″ _address=”0.5.1.0″]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

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.
Learn how you can transform the default variation dropdown from WooCommerce with a custom variation input with colors!

Given the open-source nature of WordPress, it needs to be highly customizable. Therefore the developers and the community added a plugin system that allows you to extend it in any

Shane is the co-founder of Thrive Themes, a conversion-focused WordPress themes and plugins business. He also maintains a blog that utterly fails to suck over at www.imimpact.com.

Leave a Reply

Your email address will not be published. Required fields are marked *