4 Best Option to Create Table of Content Block in WordPress

Providing a block table for WordPress content in a blog post (or actually any other type of long-written content) is a good idea for two reasons:

  1. Helps users jump into posts to find what they need (and hopefully it won't interfere).
  2. Provides value for SEO.

The RankMath SEO plugin includes it as part of your page score (suggesting that you should have it), for that second point. See what Google is likely to offer you if you do it right.

table of content table of content example table of content word how to create table of content table of content wordpress plugin table of content SEO
4 Best Option to Create Table of Content Block in WordPress

It makes sense that some WordPress SEO plugins like Yoast offer block table content as an added baked feature of the plugin. If you are committed to using Yoast, I think it is good to use that. But I agree that it is not my favorite to feel trapped in a plugin because it provides the microfeature that you rely on.

So what are the options?

Content Covered in This Article

1. What to look for in the WordPress Content Block table
  • Customizable Header Block
  • Choose which topics to include
  • Add more links
  • Style options
  • Title IDs
  • Folding
  • Organized Links
  • Block Editor Support
  • Semantic Button
2. Option 1: Use the Dedicated Table of Content Plugin
  • Simple Table of Contents
  • LuckyWP Table of Contents
  • SimpleTOC
  • Table of Contents Heroism
  • GutenTOC
3. Option 2: Expect the Table Table feature to be installed in Core WordPress
4. Option 3: Use the Block List which is a subset of the WordPress plugin
  • Yoast SEO Premium
  • Ultimate Addons for Gutenberg
5. Option 4: Roll your own DIY Table of Contents Block
  • Bill Erickson post
6. Summary

What to look for in the WordPress Content Block table

Here are some things to consider when choosing a table of contents:

Customizable Header Block - Many options click on the "Table of Contents" header above the actual, logical Content Table. Can you close it or customize it? What is a level header? Having the ability to disable the theme may be required in editing, and selecting levels at the title can help ensure proper HTML semantics.

Choose which topics to include - You probably just want all the
features to make a Table of Contents. Can you do that? Do the footnotes create a “nest” list? Do you want that? Can you close certain levels in the header? Can you tell the block to include only <H2> to <H4>? Are there other things besides titles that you want to be part of?

Add more links - Maybe you want to link to something other than the subject matter. It may have been added to the template by the WordPress custom field, or it is part of the complete template as a comment section. Can you add (or remove) those as topics in the block?

Style options - Personally, I like to bring my style (surprisingly!) And even set up any style sheets (or scripts) that the plugin tries to match to get me hooked. But I can imagine that a lot of people want the Content Table to look good and to be able to manage it nicely from the editor. This means that it can be good to have color block options, fonts, spaces, etc.

Title IDs - For the linked Content List to work, all titles need to have IDs in order to have something to focus on. I would think that any plugin here that deserves its salt can only add to the topics if it doesn’t already, but you might want more of that; if not, you are in danger of breaking existing links or even making style and performance. Also, think about which IDs are generated. For example, I use the Add Anchor Links plugin, which adds a thumbnail link next to all topics to provide access to IDs. The IDs they produce are similar to Table of Contents IDs are generated, causing a duplicate ID problem. It's okay, but just be aware of things like that.

Folding - In the spirit of making the Table Table less annoying, many offer the feature of changing the Table of Blocks between open and closed regions. Do you want that? Are you correct in the fact that it requires a certain JavaScript to run? Does it make conversion accessible? Can it automatically become the desired condition?

Organized Links - Many WordPress Tablet Plugins plugins typically handle all themes literally. Maybe you want to shorten, lengthen, or change a certain link in the Table of Contents; as such, it should not be a direct text of the topic to which we link. Can you do that?

Block Editor Support - That's the point of this blog post. I have not included many options that do not block. But there are certainly older school versions of this based on [short code] or using it in another way. I'm very worried about blocks, though I can easily see a situation where your goal is to place a Table of Contents elsewhere in the template (sidebar, maybe?). Therefore, having more options and modularity can be helpful.

Semantic Button - You may need to check the HTML blocking Content List that you choose to make if it makes sense. I have seen plugins produce HTML lists that do not include lists, for example, but instead add classes to the list of items to make them look close. No thanks. I'm not sure there is an official HTML format suitable for SEO, so a sematic marker is about the best you can do.

Option 1: Use the Dedicated Table of Content Plugin

The Dedicated Table Tabley plugin is a plugin that focuses on nothing but Table Tablets. Nothing else. Here are some solid options.

Simple Table of Contents

Note: "This is not a Block Blocker block!"

I find it hard to control where the Table of Contents goes with this plugin. It looks like it's getting closer to the top of the post, almost immediately after the existing.

LuckyWP Table of Contents

There are many features, but I find it strange that it does not have the usual block controls. Instead, you get this completely custom UI for changing settings - and you can't preview what it looks like in the block itself.

SimpleTOC

Note: "This is my favorite."

I like this one because it does not add any scripts or styles automatically. It just creates a semantic HTML list without headings, links, and that's it. I like to wrap like that.

Table of Contents Heroism

The ability to edit/add/remove topics from a list of content - even after it has been automatically generated - is very powerful and unique to this plugin. It allows you to open and close it (optionally) again, which is good as a goal for these, as they should make links more useful than in-depth content. But be aware that this puts you in a position to add more text and styles that may or may not be comfortable or something you are free to do.

GutenTOC

Sounds like this Table Tablet plugin welcomes the spirit of the WordPress Block Editor, but I find the settings incorrect. The options it offers do not feel awesomely useful (like the square letters of the list? "15th left"?).

Option 2: Expect the Table Table feature to be installed in Core WordPress

As I write, there is an open drag request to allow Table Content block in the Gutenberg plugin. Obviously, if that goes well, it eventually makes it a total. That would be great if you asked me, but it does not help to solve the problem of needing a Table Content block at this moment.

If this feature goes down, I will rely heavily on using it. Hopefully, I can do a search or query to find the existing Content Table blocks all posts, modify them to use the native block, and remove any plugin I have.

Option 3: Use the Block List which is a subset of the WordPress plugin

I would recommend against using a multitasking plugin just because you want to use a small part of it. But hey, if it turns out you can use a lot of stuff in a great plugin, it can be a bonus about managing a few plugins in general.

Yoast SEO Premium

The free version of the Yoast SEO plugin does not have, but for only $ 99 per year, the Yoast SEO Premium plugin also. It probably has no features at all. You just add it as a block, and it goes in. You can edit the title or delete it - it's almost like a "small block."

The list of links is not editable, but it is updated in real-time as you change topics in the content, which most of the others I reviewed did not. Very basic, no style or features, but I am. I wouldn’t use Yoast for this one feature, especially a paid premium, but if you use Yoast anyway (for a long time), you might go this route.

Ultimate Addons for Gutenberg

This is probably the highest Table of the Content block I have ever encountered. Also, I'm tired of using an all-in-one plugin for one feature, but some of the features built into this plugin are things you can use, so a solid option.

Option 4: Roll your own DIY Table of Contents Block

Blogging yourself is out of the question! I did it a few times with create-guten-block, though I can probably access WordPress / create-block these days. This puts you in JavaScript-land, so you'll be splitting the content of the JavaScript post, finding the titles in the content of the post, and building things from there. Kind of a middle ground going forward, I would say. On the one hand, more technical debt, and on the other hand, at least you have complete control as it is your code.

Bill Erickson post - "Access block via PHP using parse_blocks () and render_block () - ultimately which goes into the actual Made a Table of Content Block."

As we focus on building blocks, Advanced Custom Fields has a very powerful way to build custom blocks that restore that energy to the PHP world. That way, if you only worry about creating a Table of Contents from other topic blocks, the code becomes much easier.

Summary

I told you about the basics of my favorite tools that I use. If I was using Yoast SEO Premium on the site, I would just be using it. If not, I will go to SimpleTOC. That's what we did here at CSS-Tricks. If the main feature drops, I can do a rainy day project to submit all posts currently using the Content Table plugin using the main WordPress block (I think that is fun).

Read Also;

9 Best WordPress Books to Learn by 2022 (updated)

3 Ways to View SEO Health News on Your Website

WordPress business SEO: Proven plugins, tips, and tricks

New to SEO? Experts Share 5 Practical Tips

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.