Here we will learn how to create Dynamic Table of Contents in WordPress without Plugin. To add it on WordPress, we will just take the help of php function code. We wrote a simple php function code that can be placed in the header of any custom snippet plugin or WordPress theme. It is very easy to do this process. So before knowing about the code, let us know why Table of Contents is important in SEO of the website.
Dynamic (Automated) Table of Contents is important for SEO and website page experience. This helps the user to find content. If there is a lot of content available in the pages or posts of the website, then with the help of table of contents, the headings of all the content can be set at one place. It only fetches the data of all the heading parts of the post. And makes the post user friendly
What is Table of Contents in WordPress
Creates a link to navigate to that section of the title on any page on the website. Which acts as an index to the content of the post for your readers. Making it easier for your readers to understand the page
Benefits of Dynamic Table of Contents
Dynamic Table of Contents generates automatically in WordPress without any plugins. Protects your website from installing third party plugins. It also helps in increasing the security and performance of the website. Apart from this, it helps in getting good ranking in SEO, makes the post user friendly, and avoids heavy coding on the website.
Creating a Dynamic Table of Contents (Shortcode Method)
Follow the steps below to create an automated dynamic table of contents in WordPress
Step 1 – Creating a PHP Function for table of contects
function custom_table_of_contents_shortcode() {
ob_start(); ?>
<div id="table-of-contents"></div>
<?php
$content = ob_get_clean();
return $content;
}
add_shortcode('custom_table_of_contents', 'custom_table_of_contents_shortcode');
function add_table_of_contents_script() {
if ( is_single() && has_shortcode( get_post()->post_content, 'custom_table_of_contents' ) ) {
wp_enqueue_script( 'table-of-contents', get_stylesheet_directory_uri() . '/js/table-of-contents.js', array( 'jquery' ), null, true );
}
}
add_action( 'wp_enqueue_scripts', 'add_table_of_contents_script' );
add_action('wp_footer', 'custom_table_of_contents_script');
function custom_table_of_contents_script() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
var toc = $('#table-of-contents');
if (toc.length) {
var headings = $('h2, h3, h4, h5, h6').filter(function() {
return this.id;
});
if (headings.length) {
toc.append('<h2>Table of Contents</h2>');
toc.append('<ul></ul>');
headings.each(function() {
var heading = $(this);
var title = heading.text();
var link = '#' + heading.attr('id');
var level = parseInt(heading[0].tagName.charAt(1), 10);
toc.find('ul').append('<li><a class="toc-level-' + level + '" href="' + link + '">' + title + '</a></li>');
});
}
}
});
</script>
<?php
}
Step 2 – Installing Plugin
Install the WPCode plugin to create a dynamic table of contents function in WordPress.
Step 3 – Paste PHP Function Code
- To paste the PHP functions code for the table of contents created above into the WPCode Snippet
- go to Add Snippet > Add Your Custom Code (New Snippet) > USE Snippet
- then enter the name in the title
- Then select PHP snippets in the code field
- paste the PHP code in the editor and then save
Step 3 – Using Shortcode
You use the [custom_table_of_contents] shortcode to insert a table of contents into your post or page content.
Step 4 – Paste Shortcode on Post
Paste this shortcode on your post as per your requirement. If post templates are enabled in your WordPress theme, you can show them in post or page templates.
Step 5 – Show Dynamic on every post
Or use the Ad Inserter plugin to make a dynamic WordPress table of contents appear on every post or page.
Creating a Dynamic Table of Contents (Automated Method)
If you don’t want to use Shortcodes, paste the code below into the WPCode plugin. Table of Contents will automatically appear after the first paragraph of all posts with this PHP code. Whose style will be according to your WordPress theme.
function insert_table_of_contents($content) {
if (is_single()) {
$pos = strpos($content, '</p>');
if ($pos !== false) {
$content = substr_replace($content, '<div id="table-of-contents"></div>', $pos + 4, 0);
}
}
return $content;
}
add_filter('the_content', 'insert_table_of_contents');
add_action('wp_enqueue_scripts', 'add_table_of_contents_script');
function add_table_of_contents_script() {
if (is_single()) {
wp_enqueue_script('table-of-contents', get_stylesheet_directory_uri() . '/js/table-of-contents.js', array('jquery'), null, true);
}
}
add_action('wp_footer', 'custom_table_of_contents_script');
function custom_table_of_contents_script() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
var toc = $('#table-of-contents');
if (toc.length) {
var headings = $('h2, h3, h4, h5, h6').filter(function() {
return this.id;
});
if (headings.length) {
toc.append('<h2>Table of Contents</h2>');
toc.append('<ul></ul>');
headings.each(function() {
var heading = $(this);
var title = heading.text();
var link = '#' + heading.attr('id');
var level = parseInt(heading[0].tagName.charAt(1), 10);
toc.find('ul').append('<li><a class="toc-level-' + level + '" href="' + link + '">' + title + '</a></li>');
});
}
}
});
</script>
<?php
}
Video Tutorials
For any help or question related to this post or php function code connect with WP Encoding or comment