Table of contents using Tocbot in Genesis

This tutorial provides the steps to add table of contents(TOC) on singular post and page using Tocbot inany child theme based on Genesis Framework.

This will also work on other WordPress themes with minor changes.

Prerequisite:-

1. Download the Tocbot files and extract in your computer. Path https://github.com/tscanlin/tocbot/tree/master/dist
2. Copy tocbot.js and tocbot.css in the relative folder of your child-theme. The path will go like this child-theme/js/tocbot.js for JS file and child-theme/css/tocbot.css

You can copy the tocbot.css file code directly in the child-theme/style.css file.

Remember, We are going to first work on single post using conditional tag. Make sure Post headings have id attributes to make the tocbot scroll to the right heading. You can use Plugin https://wordpress.org/plugins/add-ids-to-header-tags

STEP 1

Let's first thing we do is to enqueue the tocbot.css and tocbot.js Add the required snippet in functions.php of your child theme.

//* Load tocbot script and styles
add_action( 'wp_enqueue_scripts', 'custom_tocbot_script_style' );
function custom_tocbot_script_style() {
	if ( ! is_singular('post') ) {
		return;
	}
  wp_enqueue_style( 'tocbot-style', get_stylesheet_directory_uri() . '/css/tocbot.css', array(), '1.0.0' );
  wp_enqueue_script( 'tocbot-script', get_stylesheet_directory_uri() . '/js/tocbot.js', array( 'jquery' ),  '1.0.0' );
}

remove this line if you pasted tocbot.css code in style.css

  wp_enqueue_style( 'tocbot-style', get_stylesheet_directory_uri() . '/css/tocbot.css', array(), '1.0.0' );

STEP 2

Init the tocbot script to build a table of contents. Add the required code in functions.php