WP Tocify is powered by JavaScript. Therefore, it needs to know where 'the content' is located in a Post or Page. In most WordPress themes, this can be determined through standard CSS class names. One of .entry-content or .hentry. If neither of those are found, WP Tocify will simply look for an HTML tag with id="content". If that's not found either, WP Tocify will not work until you tell it how to find 'the content'.
Default JS/CSS Content Selectors
.entry-content, .hentry, #content
This is a comma-delimited list of CSS selectors, in order of priority. So if .entry-content is found, WP Tocify will use that as 'the content'. Else if .hentry is found, it will use that. Finally, it will try to find #content and use that. If it can't find any of these, WP Tocify will simply give up; i.e., it is effectively disabled in such a scenario.
Adjusting for a Custom Theme
If your WordPress theme uses a CSS class or element ID that is not in the default list (as seen above), then you can customize the JS/CSS selector from your WP Tocify options.
Dashboard Location
DashboardSettingsWP TocifyJS/CSS Content Selector
Determining CSS Class Name
Open your site in Google Chrome and use Chrome DevTools to locate HTML elements. In Chrome DevTools, this is accomplished using the Elements tab, and Chrome makes this very easy. In Element selection mode, point to the main content body on any Post or Page. Chrome will automatically show you the underlying HTML tag.
In this example, we can observe that my WordPress theme assigns the main content body two CSS classes: content-data and main-body. All I need to do is provide a CSS expression that will find those classes. I do that by typing them in comma-delimited format, and preceding each of the CSS class names with a dot .
.content-data, .main-body
So by giving this expression to WP Tocify, I'm telling it to find an HTML tag with the class content-data, and if that exists, consider that to be the content. Else, if content-data does not exist, try to find main-body.
There is another approach I could take, and that's to tell WP Tocify that it should look for an HTML tag that contains both of those classes; i.e., not just one or the other. So for instance, if my WordPress theme uses a more generic set of classes that together, are combined in such as a way that allow content to be identified, I could do it like this. I'm telling WP Tocify that it should look for an HTML tag that has both of these CSS classes. If it can't find an HTML tag with both of these classes it should give up.
.content-data.main-body
If your WordPress theme doesn't use CSS classes, and instead it identifies content using an ID (e.g., id="content-body"), then you'll need to use a slightly different CSS expression. In this last example I'm telling WP Tocify to find an HTML tag that has id="content-body". Else, look for class="content-body".
#content-body, .content-body
