JP TOC generates an SEO-friendly automatic table of contents block from the headings in your post or page. Instead of scrolling through long-form content, readers can jump straight to the exact section they came for. The plugin works automatically upon activation, or lets you place your TOC precisel
PricingFree downloadThe WordPress.org download is free. Pro versions, add-ons or external services may cost extra.
CompatibilityRequires WordPress 5.7 and PHP 7.4.
SourceWordPress plugins · Oct 24, 2026
01 / Source details
Aboutthistool.
JP TOC generates an SEO-friendly automatic table of contents block from the headings in your post or page. Instead of scrolling through long-form content, readers can jump straight to the exact section they came for. The plugin works automatically upon activation, or lets you place your TOC precisely where you want using a shortcode, a custom Gutenberg block, or a widget.
Every link points to a real, semantic anchor on the heading itself, and the entire TOC is wrapped in a proper <nav> landmark – so it is just as valuable to search engine crawlers and screen readers as it is to human visitors. Long-form guides, tutorials, recipes, FAQs, and review posts all rank and read better with a well-structured table of contents.
Table of Contents Features
Automatic TOC Insertion: Automatically insert a table of contents into posts, pages, or any custom post type. Choose your preferred position and qualifying content types.
Semantic & Search-Engine-Friendly: Uses real <ul>/<li> (or <ol>/<li> ) lists inside a <nav> landmark with clean anchor links that search engines may use for jump-to-section links in results.
Flexible Manual Insertion: Place your TOC manually using the [jptoc] shortcode, the Gutenberg “Table of Contents” block, a widget, or the classic editor toolbar button.
Smart Heading Filtering: Set a minimum heading count so the TOC never displays on short posts. Choose which heading levels to include and skip specific headings by level or text matching.
Hierarchical & Flat Views: Display nested sub-headings (e.g., H3 under H2) or a clean, flat list view.
Advanced Numbering: Format lists with decimal or Roman numerals, sequentially or nested by depth.
Full Appearance Customization: Complete control over width, float/alignment, typography (font size and weight), and colors.
Built-in Color Schemes: Select from dark, light, white, transparent, or theme-inherited color schemes with individual color overrides.
Interactive Elements: Optional show/hide toggle with custom labels and smooth scrolling with configurable top offsets for sticky headers.
Clean URL Anchors: Generates readable anchor links in URLs (e.g., example.com/faq/#How_Do_This ) instead of random IDs, with options for lowercase conversion and dash separation.
Accessibility Ready: Built with aria-expanded states on toggles and descriptive aria-label attributes on <nav> landmarks.
Per-Post Overrides: Override the global settings on individual posts and pages when you need an exception.
RTL Language Support: Works with right-to-left languages.
Developer Friendly: Extensible via hooks and filters, and tested with popular page builders, caching plugins, and SEO plugins.
Auto Insert
To automatically insert a table of contents into your posts, enable “Auto Insert Table of Contents” under the plugin’s “Auto Insert” settings tab, then choose which post types should get one.
Supported automatic positions:
Before the first heading
After the first heading
After the first block (paragraph or heading)
Top of the post content
Bottom of the post content
Manual Insert
If you prefer placing your table of contents manually, use any of these methods:
The “Table of Contents” button in the classic editor toolbar
The “Table of Contents” block in the Gutenberg editor
The “Table of Contents” widget in your sidebars
The [jptoc] shortcode anywhere in your content
Clean, Readable Anchor Links
By default, each heading’s anchor is generated from its text (e.g., #How_Do_This ), keeping your URLs human-readable. Under the “Misc.” settings tab, in the “Hash” section, you can choose the anchor format (as heading, as heading without transliterate, or a counter such as #jptoc1 ), convert anchors to lowercase, and replace underscores with dashes.
Note: For non-English websites using the “As heading” anchor format, enabling the Intl PHP extension ensures proper transliteration of anchors.
Compatibility
JP TOC has been tested for compatibility with:
Elementor Page Builder
Beaver Builder and Beaver Builder Themer Add-On
WPBakery Page Builder
Oxygen Builder
WPML (WordPress Multilingual Plugin)
Rank Math SEO
WP Rocket
Toolset Views and Toolset Access
Developer Hooks & Filters
Filters jptoc_before and jptoc_after
Add custom HTML immediately before or after the table of contents.
add_filter('jptoc_before', function ($before) { return '<p>Custom text before TOC.</p>' . $before; });
Filter jptoc_shortcode_tag
Change the shortcode tag from the default [jptoc] .
add_filter('jptoc_shortcode_tag', function ($tag) { return 'toc'; });
Filter jptoc_heading_id
Customize the anchor ID generated for individual headings.
add_filter('jptoc_heading_id', function ($id, $label) { return $id; }, 10, 2);
See it in action
Screenshots & previews.
The "Table of Contents" block in the Gutenberg editor.The "Table of Contents" button in the classic editor toolbar.The appearance customizer, with a live preview.General settings: minimum headings, depth, hierarchy, and numbering.Appearance settings: width, alignment, fonts, and colors.Auto Insert settings: post types and position.Processing Headings settings: post types that always get heading anchors.Misc. settings: skipped headings, anchor (hash) format, and list markup tags.
02 / Source details
Gettingstarted.
You can install the JP TOC plugin using any of the standard WordPress installation methods below. Once activated and Auto Insert Table of Contents box check in Settings, it will start generating clean TOCs and jump links for your content instantly.
Installing from the WordPress Dashboard
01Navigate to Plugins > Add New .
02Search for “JP TOC”.
03Click Install Now and then Activate .
Installing via Upload
04Download the plugin ZIP archive.
05Go to Plugins > Add New > Upload Plugin in your WordPress dashboard.
06Select the file, click Install Now , and click Activate Plugin .
Manual FTP Installation
07Upload the jalandhar-table-of-contents folder to your /wp-content/plugins/ directory.
08Navigate to the Plugins screen in WordPress and click Activate .
Getting Started
09A “Table of Contents” button appears in the classic editor toolbar, on the post/page edit screen.
10A “Table of Contents” block becomes available in the Gutenberg editor – search for it in the block inserter.
11A “Table of Contents” widget becomes available under Appearance > Widgets.
12A “Table of Contents” menu item appears under Settings > Table of Contents in your WP dashboard, where you can configure global settings, appearance, colors, and auto-insert behavior.
03 / Source details
Frequently asked questions.
How do I add a table of contents to a post?
Once active, the plugin can automatically insert a TOC based on your rules. Alternatively, use the [jptoc] shortcode, the Gutenberg block, or the widget.
Why isn’t the table of contents showing on a specific post?
Check the “Minimal Count of Headings” setting under General – if a post has fewer headings than this value, no table of contents is displayed. Also check the “Auto Insert” tab to confirm the current post type and position settings match where you expect it to appear.
Can I control which post types show a table of contents automatically?
Yes. Go to the “Auto Insert” tab in the plugin settings and choose which post types (posts, pages, or any custom post type) should have a table of contents inserted automatically, along with where on the page it should appear.
I am using only the widget, and its links do not jump to the right place. What should I do?
If you use the widget independently without auto-insertion or blocks, go to the “Processing Headings” settings tab and add your post types under “Always for Post Types”, then save. This guarantees heading IDs are added even without a visible TOC.
Can I exclude specific headings from the table of contents?
Yes. Under the “Misc.” tab, in the “Skip Headings” section, you can skip specific heading levels (e.g. H1 or H6) entirely, or exclude headings whose text matches a pattern you define.
Does the plugin support nested/hierarchical headings?
Yes. Enable “Hierarchical View” under the General tab to nest lower-level headings (e.g. H3) under their parent headings (e.g. H2) in the generated list.
Can I change how the table of contents looks?
Yes. The Appearance tab lets you control width, alignment, colors, and font sizes and weights. The “List Markup Tags” option on the “Misc.” tab lets you choose between semantic <ul>/<li> markup, <ol>/<li> , or plain <div> elements.
Does the plugin work with page builders?
Yes. It has been tested with Elementor, Beaver Builder, WPBakery Page Builder, and Oxygen. See the Compatibility section above for the full list.
Is the table of contents accessible?
Yes. The generated markup uses a <nav> landmark with an aria-label , and the show/hide toggle exposes its expanded/collapsed state via aria-expanded for screen reader users.
Where can I get support?
Please use the support forum on this plugin’s WordPress.org page. Include your WordPress version, PHP version, and steps to reproduce the issue whenever possible.
Website LLMs.txt and LLMs-Full.txt Generator is an LLMs.txt generator and llms-full.txt generator for WordPress. It helps site owners generate, manage, preview, validate, and serve AI discovery files from published public content. Use it to create structured /llms.txt and optional /llms-full.txt end
EngageDock AI is a customizable floating contact widget for WordPress websites that want more leads and faster visitor communication. It helps small businesses turn website traffic into calls, texts, emails, and callback requests from one clean contact panel. Key Features: Click-to-Call – One tap ca
Altify AI is an auto ALT text and AI ALT text plugin for WordPress images. It helps generate descriptive image ALT text for accessibility and image SEO. Use bulk image ALT text tools for your Media Library, generate featured image ALT text automatically, and scale WooCommerce image ALT updates with
The Accepted Payment Methods plugin is a straightforward, lightweight solution that enhances your website by displaying visually appealing icons of the payment methods you accept. This plugin is ideal for a variety of websites, including e-commerce platforms, service-oriented websites, and informati
