Below, you’ll find a detailed guide on how to add the Easy Table of Contents Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Easy Table of Contents Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Easy Table of Contents Plugin and the shortcodes it provides:
"Easy Table of Contents is a user-friendly WordPress plugin designed to effortlessly create, style, and manage tables of contents for your posts and pages."
- [ez-toc]
- [ez-toc-widget-sticky]
- [no-ez-toc]
- [vc_toggle]
Easy Table of Contents [ez-toc] Shortcode
Shortcode Name is ez-toc. The ez-toc shortcode allows you to generate a table of contents for your posts. It checks whether the table of contents should run on AMP pages, and if not, it returns an empty HTML string. The shortcode can be customized to hide the table of contents by setting the “initial_view” attribute to ‘hide’.
Shortcode: [ez-toc]
Parameters
Here is a list of all possible ez-toc shortcode parameters and attributes:
post_id– The unique identifier of the post you want to fetch.initial_view– Determines if the table of contents should be initially hidden or not.
Examples and Usage
Basic example – In this basic usage, the shortcode is used without any additional parameters. It will display the table of contents for the current post or page.
[ez-toc]Advanced examples
Display the table of contents for a specific post by referencing its post ID. In this example, replace ‘123’ with the ID of the post you wish to display the table of contents for.
[ez-toc post_id=123]Hide the table of contents by default, but allow the user to toggle its visibility. This can be useful for posts with very long tables of contents.
[ez-toc initial_view='hide']Combine multiple parameters to display the table of contents for a specific post and hide it by default. In this example, replace ‘123’ with the ID of the post you wish to display the table of contents for.
[ez-toc post_id=123 initial_view='hide']PHP Function Code
In case you have difficulties debugging what causing issues with [ez-toc] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'ez-toc', array( __CLASS__, 'shortcode' ) );Shortcode PHP function:
function shortcode( $atts, $content, $tag ) {
//Enqueue css and styles if that has not been added by wp_enqueue_scripts
self::enqueue_registered_script();
self::enqueue_registered_style();
self::inlineMainCountingCSS();
$post_id = isset( $atts['post_id'] ) ? (int) $atts['post_id'] : get_the_ID();
$html = '';
if( ( ezTOC_Option::get( 'toc-run-on-amp-pages', 1 ) !== false && 0 == ezTOC_Option::get( 'toc-run-on-amp-pages', 1 ) || '0' == ezTOC_Option::get( 'toc-run-on-amp-pages', 1 ) || false == ezTOC_Option::get( 'toc-run-on-amp-pages', 1 ) ) && !ez_toc_non_amp() )
return $html;
$post = self::get( $post_id );
if ( ! $post instanceof ezTOC_Post ) {
Debug::log( 'not_instance_of_post', 'Not an instance if `WP_Post`.', get_the_ID() );
return Debug::log()->appendTo( $content );
}
if (isset($atts["initial_view"]) && $atts["initial_view"] == 'hide') {
$options = array('visibility_hide_by_default' => true);
$html = $post->getTOC($options);
}else{
$html = $post->getTOC();
}
return $html;
}
Code file location:
easy-table-of-contents/easy-table-of-contents/easy-table-of-contents.phpEasy Table of Contents [ez-toc-widget-sticky] Shortcode
Shortcode Name is ‘ez-toc-widget-sticky’. This shortcode creates a sticky table of contents widget in WordPress. The shortcode allows customization of the widget’s features like the highlight color, title, advanced options, and scroll positions. It checks the widget class for validity, generates a unique id, and outputs the widget. If the widget class is not found, it returns an error message.
Shortcode: [ez-toc-widget-sticky]
Parameters
Here is a list of all possible ez-toc-widget-sticky shortcode parameters and attributes:
highlight_color– sets the color for highlighted content.title– defines the title of the Table of Contents.advanced_options– accepts additional settings for the shortcode.scroll_fixed_position– sets the fixed position for scrolling.sidebar_width– determines the width of the sidebar.sidebar_width_size_unit– sets the unit for sidebar width size.fixed_top_position– sets the fixed position from the top.fixed_top_position_size_unit– sets the unit for the fixed top position size.navigation_scroll_bar– enables or disables the navigation scroll bar.scroll_max_height– sets the maximum height for scrolling.scroll_max_height_size_unit– sets the unit for scroll max height size.ez_toc_widget_sticky_before_widget_container– accepts content to be displayed before the widget container.ez_toc_widget_sticky_before_widget– accepts content to be displayed before the widget.ez_toc_widget_sticky_before– accepts content to be displayed before the shortcode output.ez_toc_widget_sticky_after– accepts content to be displayed after the shortcode output.ez_toc_widget_sticky_after_widget– accepts content to be displayed after the widget.ez_toc_widget_sticky_after_widget_container– accepts content to be displayed after the widget container.
Examples and Usage
Basic example – Display a sticky table of contents widget with the default settings and title ‘Table of Contents’
[ez-toc-widget-sticky /]For more advanced usage, you can customize the shortcode by specifying different attributes. This gives you greater control over the look and functionality of the table of contents widget.
Advanced examples
Display a sticky table of contents widget with a custom title and highlight color:
[ez-toc-widget-sticky title="My Custom TOC" highlight_color="#ff0000" /]Display a sticky table of contents widget with customized scroll fixed position, sidebar width, and fixed top position:
[ez-toc-widget-sticky scroll_fixed_position=50 sidebar_width=300 fixed_top_position=40 /]Display a sticky table of contents widget with the navigation scroll bar turned off and a custom maximum scroll height:
[ez-toc-widget-sticky navigation_scroll_bar="off" scroll_max_height=500 /]These are just a few examples of how you can use the ‘ez-toc-widget-sticky’ shortcode to display a customized table of contents widget on your WordPress site. By adjusting the various attributes, you can tailor the widget to meet your specific needs.
PHP Function Code
In case you have difficulties debugging what causing issues with [ez-toc-widget-sticky] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'ez-toc-widget-sticky', array( __CLASS__, 'ez_toc_widget_sticky_shortcode' ) );Shortcode PHP function:
function ez_toc_widget_sticky_shortcode( $atts, $content, $tag ) { global $wp_widget_factory;
if ( 'ez-toc-widget-sticky' == $tag ) {
extract( shortcode_atts( array(
'highlight_color' => '#ededed',
'title' => 'Table of Contents',
'advanced_options' => '',
'scroll_fixed_position' => 30,
'sidebar_width' => 'auto',
'sidebar_width_size_unit' => 'none',
'fixed_top_position' => 30,
'fixed_top_position_size_unit' => 'px',
'navigation_scroll_bar' => 'on',
'scroll_max_height' => 'auto',
'scroll_max_height_size_unit' => 'none',
'ez_toc_widget_sticky_before_widget_container' => '',
'ez_toc_widget_sticky_before_widget' => '',
'ez_toc_widget_sticky_before' => '',
'ez_toc_widget_sticky_after' => '',
'ez_toc_widget_sticky_after_widget' => '',
'ez_toc_widget_sticky_after_widget_container' => '',
), $atts ) );
$widget_name = wp_specialchars( 'ezTOC_WidgetSticky' );
$instance = array(
'title' => ( ! empty ( $title ) ) ? $title : '',
'highlight_color' => ( ! empty ( $highlight_color ) ) ? $highlight_color : '#ededed',
'advanced_options' => ( ! empty ( $advanced_options ) ) ? $advanced_options : '',
'scroll_fixed_position' => ( ! empty ( $scroll_fixed_position ) ) ? ( int ) $scroll_fixed_position : 30,
'sidebar_width' => ( ! empty ( $sidebar_width ) ) ? ( 'auto' == $sidebar_width ) ? $sidebar_width : ( int ) strip_tags ( $sidebar_width ) : 'auto',
'sidebar_width_size_unit' => ( ! empty ( $sidebar_width_size_unit ) ) ? $sidebar_width_size_unit : 'none',
'fixed_top_position' => ( ! empty ( $fixed_top_position ) ) ? ( 'auto' == $fixed_top_position ) ? $fixed_top_position : ( int ) strip_tags ( $fixed_top_position ) : 30,
'fixed_top_position_size_unit' => ( ! empty ( $fixed_top_position_size_unit ) ) ? $fixed_top_position_size_unit : 'px',
'navigation_scroll_bar' => ( ! empty ( $navigation_scroll_bar ) ) ? $navigation_scroll_bar : 'on',
'scroll_max_height' => ( ! empty ( $scroll_max_height ) ) ? ( 'auto' == $scroll_max_height ) ? $scroll_max_height : ( int ) strip_tags ( $scroll_max_height ) : 'auto',
'scroll_max_height_size_unit' => ( ! empty ( $scroll_max_height_size_unit ) ) ? $scroll_max_height_size_unit : 'none',
);
if ( !is_a( $wp_widget_factory->widgets[ $widget_name ], 'WP_Widget' ) ):
$wp_class = 'WP_Widget_' . ucwords(strtolower($class));
if (!is_a($wp_widget_factory->widgets[$wp_class], 'WP_Widget')):
return '<p>'.sprintf(__("%s: Widget class not found. Make sure this widget exists and the class name is correct"),'<strong>'.$class.'</strong>').'</p>';
else:
$class = $wp_class;
endif;
endif;
$id = uniqid( time() );
ob_start();
the_widget( $widget_name, $instance, array(
'widget_id' => 'ez-toc-widget-sticky-' . $id,
'ez_toc_widget_sticky_before_widget_container' => $ez_toc_widget_sticky_before_widget_container,
'ez_toc_widget_sticky_before_widget' => $ez_toc_widget_sticky_before_widget,
'ez_toc_widget_sticky_before' => $ez_toc_widget_sticky_before,
'ez_toc_widget_sticky_after' => $ez_toc_widget_sticky_after,
'ez_toc_widget_sticky_after_widget' => $ez_toc_widget_sticky_after_widget,
'ez_toc_widget_sticky_after_widget_container' => $ez_toc_widget_sticky_after_widget_container,
)
);
$output = ob_get_contents();
ob_end_clean();
return $output;
}
}
Code file location:
easy-table-of-contents/easy-table-of-contents/easy-table-of-contents.phpEasy Table of Contents [no-ez-toc] Shortcode
Shortcode Name is ‘no-ez-toc’. This shortcode disables the easy-table-of-contents plugin on a specific page. It’s useful when you want to prevent the automatic generation of a table of contents on certain pages.
Shortcode: [no-ez-toc]
Examples and Usage
Basic example – A simple application of the shortcode that disables the Easy Table Of Contents on the specific post or page where it is used.
[no-ez-toc]Advanced examples
Applying the shortcode within a block of content. This will disable the Easy Table Of Contents for the entire content within the shortcode block.
[no-ez-toc]
<p>This is a block of content. The Easy Table Of Contents will not be applied to this block of content.</p>
[/no-ez-toc]Using the shortcode with additional content. This will disable the Easy Table Of Contents for the entire content within the shortcode block, while the additional content outside the block will still have the Table Of Contents applied.
[no-ez-toc]
<p>This is a block of content. The Easy Table Of Contents will not be applied to this block of content.</p>
[/no-ez-toc]
<p>This is additional content outside the shortcode block. The Easy Table Of Contents will be applied to this content.</p>Please note that the shortcode [no-ez-toc] does not accept any parameters/attributes. It simply disables the Easy Table Of Contents for the specific post or page where it is used.
PHP Function Code
In case you have difficulties debugging what causing issues with [no-ez-toc] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'no-ez-toc', 'ez_toc_noeztoc_callback' );Shortcode PHP function:
function ez_toc_noeztoc_callback( $atts, $content = "" ) {
add_filter(
'ez_toc_maybe_apply_the_content_filter', function( $apply ) {
return false;
}
,999
);
// condition when `the_content` filter is not used by the theme
add_filter(
'ez_toc_modify_process_page_content', function( $apply ) {
return '';
}
,999
);
return $content;
}
Code file location:
easy-table-of-contents/easy-table-of-contents/easy-table-of-contents.phpEasy Table of Contents [vc_toggle] Shortcode
Shortcode Name is vc_toggle. This shortcode enables the creation of a toggle element in your WordPress content. The vc_toggle shortcode allows you to define attributes such as title, style, color, size, and open state. It checks for color inversion and applies the necessary CSS classes. The shortcode’s output is a toggle element with a title and content, which can be opened or closed by the user.
Shortcode: [vc_toggle]
Parameters
Here is a list of all possible vc_toggle shortcode parameters and attributes:
title– The heading of the toggle section.el_class– Extra CSS classes added to the toggle.style– Determines the style of the toggle.color– Sets the color of the toggle.size– Defines the size of the toggle.open– Determines whether the toggle is open or closed by default.css_animation– Specifies the CSS animation for the toggle.el_id– The unique identifier of the toggle.content– The content that appears when the toggle is opened.css– Additional CSS for the toggle.
Examples and Usage
Basic example – A simple usage of the eztoc_vc_toggle_modified shortcode with a title attribute.
[vc_toggle title="My Title"]Your Content Here[/vc_toggle]Advanced examples
Adding extra attributes to the shortcode, such as the color and size. In this example, the color is set to red and the size to large.
[vc_toggle title="My Title" color="red" size="large"]Your Content Here[/vc_toggle]Using the shortcode with the open attribute set to true. This will have the toggle open by default when the page loads.
[vc_toggle title="My Title" open="true"]Your Content Here[/vc_toggle]Combining multiple attributes in the shortcode. In this example, the toggle has a title, is set to open by default, and has a custom CSS class for further styling.
[vc_toggle title="My Title" open="true" css="my-custom-class"]Your Content Here[/vc_toggle]PHP Function Code
In case you have difficulties debugging what causing issues with [vc_toggle] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'vc_toggle', 'eztoc_vc_toggle_modified' );Shortcode PHP function:
function eztoc_vc_toggle_modified( $atts, $content, $tag ) {
if ( 'vc_toggle' == $tag ) {
/**
* Shortcode attributes
* @var $atts
* @var $title
* @var $el_class
* @var $style
* @var $color
* @var $size
* @var $open
* @var $css_animation
* @var $el_id
* @var $content - shortcode content
* @var $css
* Shortcode class
* @var WPBakeryShortCode_Vc_Toggle $this_WPBakeryShortCode_Vc_Toggle
*/
$title = $el_class = $style = $color = $size = $open = $css_animation = $css = $el_id = '';
$inverted = false;
$atts = vc_map_get_attributes('vc_toggle', $atts);
extract($atts);
// checking is color inverted
$style = str_replace('_outline', '', $style, $inverted);
/**
* @since 4.4
*/
$elementClass = array(
'base' => apply_filters(VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, 'vc_toggle', 'vc_toggle', $atts),
// TODO: check this code, don't know how to get base class names from params
'style' => 'vc_toggle_' . $style,
'color' => ( $color ) ? 'vc_toggle_color_' . $color : '',
'inverted' => ( $inverted ) ? 'vc_toggle_color_inverted' : '',
'size' => ( $size ) ? 'vc_toggle_size_' . $size : '',
'open' => ( 'true' === $open ) ? 'vc_toggle_active' : '',
'extra' => $atts['css'],
'css_animation' => '',
// TODO: remove getCssAnimation as function in helpers
);
$class_to_filter = trim(implode(' ', $elementClass));
$class_to_filter .= vc_shortcode_custom_css_class($css, ' ');
$css_class = apply_filters(VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, $class_to_filter, 'vc_toggle', $atts);
$heading_output = apply_filters('wpb_toggle_heading', $atts['title'], array(
'title' => $title,
'open' => $open,
));
$output = '<div ' . ( isset( $el_id ) && ! empty( $el_id ) ? 'id="' . esc_attr( $el_id ) . '"' : '' ) . ' class="' . esc_attr( $css_class ) . '"><div class="vc_toggle_title">' . $heading_output . '<i class="vc_toggle_icon"></i></div><div class="vc_toggle_content">' . wpb_js_remove_wpautop( $content, true ) . '</div></div>';
return $output;
}
}
Code file location:
easy-table-of-contents/easy-table-of-contents/includes/inc.plugin-compatibility.phpConclusion
Now that you’ve learned how to embed the Easy Table of Contents Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply