DJ-TOC - WordPress Plugin

How to Configure DJ-TOC for Long-Form Content in WordPress

DJ-TOC is not just a way to drop a nice-looking list of links above an article. When used with WordPress and YOOtheme Pro, it helps turn a long piece of content into a manageable page: readers can see the structure, jump straight to the section they need, and the site owner can control the table of contents in the same visual builder used to assemble the page itself.

In this guide, we will focus on the practical side: what to check before installation, how to add the element to a YOOtheme Pro layout, why the content area ID matters, which settings are worth changing right away, how to test the outcome on the live page, and what to do if the table of contents does not appear or shows the wrong structure.

This article is intended for a site owner, editor, content manager, or webmaster who already works with WordPress and YOOtheme Pro. It does not cover purchasing, licensing, or bypassing limitations. The focus here is on configuring an existing product, testing it safely, and using it properly on real pages.

What Problem the Table of Contents Solves in YOOtheme Pro

A table of contents becomes useful when a page stops being linear. If the text only takes up a couple of screens, readers can simply scroll through it. But once you have multiple heading levels, long blocks of settings, rules, pricing details, instructions, or documentation, basic scrolling becomes inconvenient. DJ-TOC pulls headings from a selected area and turns them into a clickable structure, and it can also display reading progress.

The official product page describes it as a YOOtheme Pro element that builds a table of contents from h1 - h6 headings. That detail matters: the plugin does not create structure from paragraphs, lists, or cards on its own. It depends on an existing heading hierarchy. If an article does not use proper H2/H3 headings, or if headings are faked with bold text inside a regular paragraph, the automatic table of contents will have nothing to build from.

In a WordPress setup, DJ-TOC works especially well on pages built in the YOOtheme Pro visual builder: guides, knowledge base articles, instructions, policies, help pages, long product overviews, landing pages with a large FAQ block, or technical documentation. Its strength is not global automatic insertion across all posts on the site, but precise placement inside a layout, where the page owner decides which column it belongs in, which content it sits next to, and how it should look.

That is what sets DJ-TOC apart from many general-purpose TOC plugins for WordPress. Generic solutions often insert a table of contents before the first heading, after the first paragraph, through an editor block, or via shortcode. DJ-TOC works as a YOOtheme Pro element: you build the layout, add the text area, add the table of contents element, and connect it to a specific area through a selector. That approach requires a bit more attention during setup, but it gives you much tighter control over the page layout.

Main takeaway: DJ-TOC works best when the page structure is already well thought out. Clean up the headings and the content area first, then add the table of contents and test it on the live page.

Who DJ-TOC Is For, and When Another Approach Makes More Sense

Before installing it, it is worth being honest about why the page needs a table of contents in the first place. If the site runs on YOOtheme Pro and most of the important content is built through its visual builder, DJ-TOC fits naturally into that workflow: the element is added alongside regular sections, rows, columns, and other builder elements. The editor can see the layout, place the table of contents to the left of the text, move it into a top section, or style it as part of the page.

The plugin is a good fit for sites where long-form content has lasting value: product documentation, educational articles, legal text, policy pages, installation instructions, or service reference pages. In these cases, users often do not read from top to bottom. They are looking for a specific section such as "post-installation setup," "display error," "theme compatibility," or "how to verify the result." A table of contents shortens the path to that information and makes the page more predictable.

DJ-TOC can also be convenient for agencies. If a client's site is already built on YOOtheme Pro, there is no need to add a separate block system just for a table of contents. You can configure the element in the builder interface the client already understands and explain the basic rule: keep the heading hierarchy intact, do not change the area ID unless necessary, and test the result after major text edits.

That said, there are cases where it is worth rethinking the choice. If the site uses the standard WordPress block editor without YOOtheme Pro, this product will be unnecessary because it is officially tied to YOOtheme Page Builder. If you need an automatic table of contents across hundreds of older posts without manually configuring each page layout, a plugin with global insertion rules will be more practical. And if the team only publishes short news posts or product cards without long sections, a table of contents may just add visual noise without giving users any real benefit.

A good rule of thumb is simple: if you already design pages as layouts with columns, sections, and YOOtheme Pro elements, DJ-TOC gives you precise control. If you want a table of contents to appear automatically on every WordPress post without layout work, another plugin may be the more practical option.

What to Check Before Installation

Preparation saves more time than it may seem. DJ-TOC has a clear dependency: it only works with YOOtheme Page Builder. So the first check is not "Do I have WordPress?" but "Do I have an active YOOtheme Pro setup where I can open a post or page in the builder?" If not, the element may not appear where you expect after installation.

Platform and Access Rights

Make sure you have administrator access or a role that includes permission to install and activate plugins. WordPress documentation specifically notes that plugin management is handled through the plugins screen, where installation, activation, updates, and deletion are available. For YOOtheme Pro, access to theme settings and layouts also matters. If an editor cannot see the builder options they need, the issue may be permissions rather than DJ-TOC itself.

• Check that you have access to Plugins and can upload the plugin ZIP file.
• Make sure YOOtheme Pro is active and the Builder opens for the relevant post type.
• Confirm that the page or post is actually edited through YOOtheme Pro, not just through the standard WordPress editor.
• Create a backup before installing or updating, especially on a production site.

Heading Structure

DJ-TOC builds the table of contents from headings. That means before configuring the element, you need to review the content itself. Ideally, the page should have one main page title provided by the theme or template, while the content uses a consistent H2/H3/H4 structure. Do not start the internal structure with H4, skip levels for no reason, or create decorative headings just for font size.

In the WordPress block editor, headings support levels H1-H6, and the heading block supports anchors. In YOOtheme Pro, you need to confirm the same principle at the element level: a heading should be a real heading, not just styled text. If an element looks like a heading visually but renders as a div or p in HTML, the table of contents may leave it out.

Page Layout

The official WordPress example uses a simple two-column grid: one column contains the text with headings, and the other contains the DJ-TOC element. This layout works well for documentation and guides because the table of contents does not interrupt the reading flow and stays next to the text. But on narrow screens, the columns may stack, so think ahead about where the table of contents should appear on mobile: before the main text, after the introduction, or inside a compact section.

Do not start with fine-tuned styling. First make sure the element sees the correct headings, the links scroll to the right places, and the reading progress bar does not overlap the site header. Colors, icons, and spacing are better adjusted after the functional check.

Installing It in WordPress and Running the First Check

DJ-TOC is distributed by DJ-Extensions and does not look like a typical free plugin from the WordPress.org directory. So the basic installation path in WordPress is to upload the ZIP archive through the admin panel and then activate the plugin. The overall process is the same as any uploaded plugin installation: open Plugins, choose Add New, click Upload Plugin, select the archive, install it, and activate it.

After activation, do not go straight to the live page expecting it to appear automatically. It is more important to confirm that the element has been added to the YOOtheme Pro library. The official WordPress usage guide shows exactly that flow: create or open a post, open the web builder, create a new layout, choose a structure, and add the DJ-TOC element to the appropriate column.

A Safe Installation Sequence

1. Back up the site, or at least confirm that your hosting provider has a recent backup available.
2. Open Plugins - Add New in the WordPress admin panel.
3. Use Upload Plugin and upload the DJ-TOC ZIP archive.
4. After the installation succeeds, click Activate Plugin.
5. Open a test post or page that can be edited in YOOtheme Pro.
6. Check that the DJ-TOC element appears in the builder's element list.

If the element is not visible in the YOOtheme Pro library, do not jump to styling or CSS. First check the YOOtheme Pro dependency, the plugin activation state, the current user's permissions, and the type of page being edited. Sometimes an administrator opens the standard post editor and expects to see a Gutenberg block, even though the product is built for the YOOtheme Pro interface.

A Low-Risk First Test

The best first test is a separate draft post. Add a few headings at different levels, such as H2, H3, and H4, then open the Builder and create a simple layout. This kind of test does not affect published content and gives you room to see how DJ-TOC responds to the page structure.

How to verify the result: after saving the layout, open the page in a private browser window. The table of contents should show the actual headings from the selected area, and clicking an item should take the reader to the matching section.

Basic Layout Pattern: Two Columns and the Area DJ-TOC Reads

The most important part of configuring DJ-TOC is connecting the table of contents element to the part of the page that contains the headings. In the official WordPress instructions, this is done with a two-column layout: the right column contains the article, and the left column contains the DJ-TOC element. Then the element settings define the table of contents title and the area selector, and that selector is copied into the settings of the content column.

This may sound technical, but in practice it protects you from extra noise. A page may contain headings in the header, footer, cards, related content, menus, or promotional blocks. If you do not limit the source area, the table of contents may collect items you do not want. The selector tells the plugin: "Use only this column or this block with the main content."

How to Build a Working Layout

1. Open the target post or page and switch to YOOtheme Pro Builder.
2. Click New layout if there is no layout yet, or work with an existing layout on a copy of the page.
3. Create a section with a two-column row: a narrow column for the table of contents and a wide column for the main content.
4. Add the text elements and headings that should appear in the table of contents to the wide column.
5. Add the DJ-TOC element from the installed YOOtheme Pro elements to the narrow column.
6. Open the DJ-TOC element settings and enter a table of contents title if the page design needs one.
7. Copy the value from Selector of TOC (ID) and paste it into the settings of the area that contains the content.
8. Save the layout and refresh the live page.

An important detail: do not name the ID something too generic like content if similar identifiers may already exist on the page. Use a clear, unique value instead, such as guide-content, article-toc-source, or another short descriptive ID. If the page ends up with two identical IDs, the browser and scripts may behave unpredictably.

Why the Table of Contents Works Better Beside the Text Than Inside It

On a reference page, a table of contents in a separate column often works better than a large block above the text. Readers can see the structure while reading, jump quickly to a nearby section, and understand how much content is left. But on mobile, that separate column usually becomes part of the vertical flow, so you need to check the block order. If the table of contents ends up below the entire article, it will not be very useful.

For mobile, a simpler option often works better: place the table of contents right after the introduction or before the first major section. If the theme makes the sidebar sticky, make sure it does not overlap the header, conflict with the mobile menu, or take up too much screen height.

Configuring the DJ-TOC Element After Adding It

Once the table of contents appears and correctly detects the headings, you can move on to styling and behavior. The official documentation highlights three groups of settings: styles and icons for table of contents levels, the style of the block heading itself, and the style of the progress bar. In practice, that is enough to make the table of contents visible without making it intrusive.

TOC Title and Source Selector

Start with the functional settings. The TOC Heading field controls the label of the table of contents block. On an English-language site, options like "Contents," "On this page," or "Guide sections" usually work well. For documentation-style pages, "Contents" reads neutrally. For a marketing page with long content blocks, "On this page" often feels softer.

The Selector of TOC (ID) field matters even more. It connects DJ-TOC to a specific area. If the value does not match the ID of the content column or section, the table of contents may stay empty or pull the wrong set of headings. Any time you rename the ID, repeat the check: save the layout, refresh the page, and click a few table of contents items.

Levels, Styles, and Icons

DJ-TOC can work with headings at multiple levels, and the documentation mentions style and icon settings for each table of contents level. That is useful when the content has a nested structure: H2 for major sections, H3 for steps and settings, H4 for more specific checks. But do not enable every level just because the plugin supports it. An overly deep table of contents turns into a long indented ladder, especially on mobile.

For most guides, showing H2 and H3 is enough. H4 is worth including only where it genuinely helps the reader choose a precise subsection, such as in a troubleshooting block with separate causes and actions, or in technical documentation where the nesting itself matters. If the table of contents ends up longer than the visible top of the page, consider leaving some of the smaller H4 items in the article text only.

A Practical Level Strategy

• H2: the main sections of the guide and essential in the table of contents.
• H3: key actions, settings, use cases, and checks, usually useful in the table of contents.
• H4: more specific subpoints that should only be included in very long documents.
• H5-H6: best used sparingly, because they often overload navigation on the live page.

Use level icons as a visual cue, not decoration. For example, one style for H2 and a quieter style for H3 can make it easier to distinguish a major section from a subpoint. If the site uses a strict documentation style, you can skip bold icons entirely and rely instead on spacing, font size, and active link color.

Reading Progress Bar

The DJ-TOC demo page shows that a progress bar can appear at the top of the page while the user scrolls. According to the official documentation, the element settings let you control the height and color of that bar. It is useful on long-form content where readers want a sense of how far they have gone. But it should stay thin and subtle, otherwise it can clash with the site header or notification bars.

For a typical site, start with a small height and a color already used in the interface, such as an accent link, button, or navigation element. Do not introduce a brand-new bright color just for progress. If the site has a sticky header, check exactly where the bar appears: above the header, below it, or in empty space within it. If it creates a conflict, it is usually better to reduce the height, change the color, or disable the effect where it gets in the way.

Minimum Settings for the First Launch

If you want to get a table of contents running quickly on a single page, do not configure everything at once. First make sure the behavior is reliable, then improve the styling step by step. A good sequence is: source selector, block title, heading levels, basic typography, active link color, then the progress bar.

Quick takeaway: the best DJ-TOC settings do not start with color. First verify the heading source and the depth of the table of contents, then style the levels, icons, block title, and progress bar.

How to Prepare Content So the Table of Contents Is Actually Useful

DJ-TOC does not fix weak content structure. If an article uses too many generic headings, if H3 is used in place of H2 just to make the text look smaller, or if important sections have vague titles, the table of contents may appear technically but still fail to help the reader. So part of the setup happens not in the plugin, but in the editing of the article itself.

Make Headings Stand on Their Own

A table of contents item should make sense without the paragraph next to it. A heading like "Settings" says very little if the page contains several different types of settings. "Configuring heading levels" or "Setting up the progress bar" is much clearer. At the same time, you do not need to force the product name into every heading. It is enough that the page is clearly about DJ-TOC overall while the headings describe actions and outcomes.

Pay extra attention to long commercial pages. They often use decorative section headings such as "Why us," "Benefits," "Features," or "FAQ." If DJ-TOC collects that structure, readers see general marketing language instead of a task-based route through the page. For a reference page, it is better to use headings that answer a real question: "What to check before installation," "How to connect the table of contents to the content column," or "Why items are missing."

Do Not Include Unnecessary Blocks in the Source Area

If the selected source area includes not only the main text but also related content cards, banners, reviews, or footer blocks, the table of contents may pull in headings you do not want. That is why the source selector should point to the container that holds the main article. In YOOtheme Pro, it is convenient to assign the ID directly to the column or section that contains the guide text.

If the page contains several independent long-form blocks, it is not always a good idea to combine them into one table of contents. In some cases, it is better to define one main source area for the article and keep secondary blocks outside the structure. Readers expect the table of contents to guide them through the main article, not jump into cards, forms, and technical page elements.

Check Anchors and Repeated Names

Table of contents navigation relies on anchors. If several headings share the same text or manually assigned ID, link behavior can become confusing. In WordPress, the heading block supports anchors, and in YOOtheme Pro you can use IDs and additional attributes at the section or element level. That is useful, but it requires care.

A practical approach is to assign unique IDs only where they are truly needed and not to duplicate the same block without checking its advanced settings. After copying a section or column in the builder, look to see whether the old ID came along with it. A repeated identifier is one of the reasons a table of contents link can land in the wrong place.

TOC Depth: How to Choose Between H2, H3, and H4

The most common editorial mistake with tables of contents is assuming that more visible levels always make things better. DJ-TOC can technically work with a wide range of heading levels, but users do not see a technical capability - they see a navigation list. If that list becomes too detailed, it turns into a long document inside the page. This is especially obvious in YOOtheme Pro, where the table of contents often sits in a sidebar and competes with the main text for space.

Start with one question: which items should the user see immediately to decide where to go? In a guide, that usually means H2. In an instruction page with longer stages, H3 can also be helpful. H4 is only necessary when an H3 section contains distinct options, checks, or errors of its own. For example, in a troubleshooting section, an H4 like "How to fix it" makes sense because the reader came for an action. But an H4 like "Small detail" in every section probably does not belong in the table of contents if it does not improve navigation.

The Logic of a "Short Table of Contents"

A short table of contents does not mean a shallow page. It means the visible list gives the reader the major route, while details stay in the article text. For most commercial and reference pages in WordPress, a good pattern is: H2 for major stops, H3 for important actions, H4 for local structure inside the text without requiring a place in the list. If DJ-TOC shows every level in your configuration, reduce the actual depth of headings in the article: some H4 items can be turned into strong emphasis in a paragraph or a short list instead.

For example, a section called "Configuring the element" might use H3 headings for "TOC title and source selector," "Levels, styles, and icons," and "Reading progress bar." That is enough for navigation. Within those subsections, smaller notes are often better handled as paragraphs, lists, or blockquote elements instead of turning every tip into a new heading. That way, the table of contents stays useful and does not overload the sidebar.

The Logic of a "Deep Table of Contents"

A deeper table of contents makes sense in technical documentation, where the reader is looking for a very specific point. For example, if the page describes document formatting rules, API responses, a long policy, or several independent configuration workflows, H4 headings may be worth including. But in that case, you need much tighter control over the wording: each subpoint should be short, specific, and clearly distinct from its neighbors. If the table of contents shows "Check," "Check," and "Check" in sequence, that is a sign the headings were written for the author, not the reader.

Before publishing, open the page and read only the table of contents, not the article. If it tells you the route through the material, the depth is right. If you would need to open sections at random, go back to the headings. DJ-TOC only reflects the structure you give the page.

How Not to Hurt SEO with Headings

Do not turn headings into a bundle of search phrases. A heading like "DJ-TOC setup WordPress YOOtheme Pro guide" reads much worse than "Basic layout pattern: two columns and the area DJ-TOC reads." The second version naturally carries the product meaning while still sounding human. For SEO, a clear structure and a solid answer to the user's question are more valuable than repeating the product name in every heading.

If you want to strengthen the search angle, do it inside the section text, image captions, FAQ, and natural explanations. For example, the query "DJ-TOC is not showing headings" is better handled in a troubleshooting block with the symptom, cause, check, and fix. There is no need to turn it into an artificial H2 if you already have a natural section heading about why the table of contents breaks.

Practical Example: A Table of Contents for a Large Instruction Page

Let us look at a concrete use case. Imagine a site has a long page titled "How to submit a service request." It includes sections on document preparation, filling out the form, processing times, common mistakes, and FAQs. The page is built in WordPress with YOOtheme Pro, and the site owner wants visitors to jump to the right section quickly and see their reading progress.

Goal

The goal is a page where the table of contents sits on the left and the main instruction text sits on the right. The table of contents should collect H2 and important H3 headings from the right column, ignore headings in the header and footer, and display a progress bar that is noticeable without getting in the way of reading.

Preparation

Before configuring it, create a copy of the page or a draft version. Check the structure: the main H1 is provided by the theme, and the page content should use H2 for major stages and H3 for supporting steps. Remove decorative pseudo-headings from the area that DJ-TOC will read, or turn them into regular text if they should not appear in navigation.

Setup Steps

1. Open the page in YOOtheme Pro Builder and create a section for the guide.
2. Add a two-column row: a narrow left column for navigation and a wide right column for the text.
3. Move the article content into the right column with proper H2/H3 headings and check the order of sections.
4. Assign the right column a unique ID, such as service-guide-content, if the builder interface requires a manual ID.
5. Add the DJ-TOC element to the left column and open its settings.
6. In the TOC Heading field, enter "Guide Contents" or another short title.
7. In the Selector of TOC (ID) field, use the same identifier as the text area.
8. Keep H2 and H3 in the table of contents if H4 is too granular for navigation.
9. Adjust the link color and progress bar to match the site's main color palette.
10. Save the layout and open the page as a regular visitor.

Expected Outcome

On the live site, a table of contents block should appear on the left. It should show the main stages of the guide and nested subpoints. Clicking an item should scroll the page to the matching heading. As the reader moves through the long article, the progress bar should help show how far they have progressed.

The Most Common Friction Point

If the table of contents is empty even though the page contains headings, do not start by checking styles. Start by checking the connection between the element and the content area. The most common issue is simple: the selector in DJ-TOC does not match the ID of the column or section that contains the headings. The second common issue is that the headings may look like H2/H3 visually, but technically they are just regular text or part of a more complex element that the plugin does not recognize as a heading.

Post-setup check: click the first, middle, and last items in the table of contents. If all three links land in the right places, the basic connection is configured correctly. If one link lands above or below where it should, check the sticky header, repeated IDs, and the top spacing on the sections.

Testing the Result on the Live Site

Testing does not end once the table of contents is visible in the builder. The visual editor may show the page in a preview mode where scripts, sticky areas, cache, and access rules behave differently. That is why the final check should always happen on the live site, ideally in a different browser or a private window.

What to Check First

• List completeness: the table of contents should include the key H2 and H3 headings from the main article, without pulling in headings from the header, footer, or unrelated blocks.
• Order: the items should appear in the same order as the sections on the page. If the order looks wrong, check the actual order of elements in the layout.
• Item clicks: each link should jump to the right section, and the heading should not disappear under a sticky header.
• Mobile display: the table of contents should not take over the entire top of the page without adding value, and it should not disrupt the reading flow.
• Reading progress: the bar should appear where it is useful and should not cover navigation, notices, or the admin bar.
• Performance: the page should not noticeably lag while scrolling because of an overly complex layout or script conflicts.

It is better to test on a page with realistic length than on a short demo with three headings. Almost any table of contents looks fine in a tiny test. On a real article, you will immediately see whether too many levels are enabled, whether some heading titles should be shortened, whether the sidebar gets in the way, and whether the progress bar behaves correctly.

How to Judge Usefulness, Not Just Correctness

A technically working table of contents can still be useless if it is too long or filled with internal-only headings. Look at it from the visitor's perspective. Can someone tell within a few seconds where the section they need is located? Are there repeated items? Did things like "Block 1," "Content," "Description," or "Additional" slip into the list? If so, the issue is in the article structure, not just the DJ-TOC settings.

Another good check is the user's route through the page. Open the page, find a troubleshooting or FAQ item in the table of contents, jump there, then return to one of the upper sections. If the navigation feels natural, the block is working as part of the page. If every jump requires extra scrolling afterward, the table of contents is placed or configured poorly.

Mobile Display and Long Sidebar Navigation

A table of contents in a sidebar has an obvious advantage on a wide screen: readers can see the structure right next to the article. On a mobile screen, that same design can become a problem. The column moves into the vertical flow, and users either see an overly long block before the text or do not reach the table of contents until the end of the page. That is why mobile testing is essential for DJ-TOC, even if the product is described as responsive and the demo looks polished.

Check two states: the first time a visitor opens the page and a visit that starts from the middle of the article. On first entry, the table of contents should not push the entire introduction off the screen. Readers need to understand where they landed before they start choosing a section. When arriving in the middle of the article, the table of contents should help them regain orientation instead of forcing endless upward scrolling.

Where to Place the Table of Contents on Narrow Screens

If the left column becomes the first element on mobile, the table of contents will appear before the article text. That works well for reference content where users arrive to choose a section. But for instructional guides, it is often better to lead with one or two introductory paragraphs and then show the table of contents. In YOOtheme Pro, this can be handled through section composition: keep a short introduction above the two-column block and place the TOC inside the main section.

If the table of contents column moves below the text, the block loses its purpose. In that case, reorder the columns or use a separate mobile placement through layout options if your configuration supports it. Do not try to solve the problem only by shrinking the font. A tiny table of contents on a phone is worse than no table of contents at all.

How to Test Tap Targets and Scrolling

On a phone, it is not enough for the items to be visible - they also need to be easy to tap. The links should have enough space between them, and nested levels should not become so narrow that long headings wrap onto four lines. Test the first few items, one item from the middle, and the last item. After the jump, the heading should remain visible and not be hidden under a fixed header.

If the reading progress bar is enabled, test it alongside the mobile header, cookie notices, the admin bar, and any pop-up site elements. A thin progress bar usually does not cause trouble, but several fixed bars combined can cover too much of the screen. In that case, it is better to disable the questionable visual effect than to make the whole page harder to read.

Mobile standard: users should see the introduction, understand the topic of the page, open the table of contents or start reading right away, and reach the section they need without effort. If the table of contents makes them fight the screen, the setup needs work.

Compatibility with the Theme, Cache, Editors, and Long Pages

DJ-TOC sits at the intersection of several layers: WordPress, the active YOOtheme Pro theme, the builder layout, the headings inside the content, the scrolling scripts, and the styles on the live site. That is why troubleshooting should not reduce everything to a single plugin. In many cases, the problem appears because one layer changes the HTML or scroll behavior while another layer is already expecting a different structure.

YOOtheme Pro as a Required Environment

Official sources link DJ-TOC directly to YOOtheme Pro. It is not a universal block for any editor, and it is not a standalone navigation system that behaves the same in every theme. If the page is not edited through YOOtheme Pro, or if the post is rendered through a standard template without a builder layout, the element may be unavailable or may not have the area it is supposed to connect to.

YOOtheme Pro documentation explains layout structure in terms of sections, rows, columns, and elements. For DJ-TOC, that is not just background knowledge - it is the practical foundation. The table of contents usually sits in one column and reads headings from another. If sections were moved, copied, or nested differently during a page redesign, check whether the heading source changed.

Cache and Optimization

Cache plugins, minification tools, and deferred script loading can affect elements that calculate page structure after load. You should not claim in advance that a specific cache plugin conflicts with DJ-TOC unless a source confirms it. But the safe test is simple: temporarily clear the page cache, disable script combining or deferred loading for a test page, check the table of contents, and then restore the settings one by one.

If the table of contents starts working after the cache is cleared, treat that as a sign of an optimization conflict. Do not disable all caching permanently. It is better to find the specific setting that breaks the scroll behavior or script execution and add an exception only for the problem file or page, if your optimization tool supports that. If you cannot create a clean exception, use a more conservative optimization setup for pages with long-form documentation.

SEO and Accessibility

A table of contents by itself does not guarantee better rankings. It helps page structure and reading usability, but the outcome depends on content quality, heading quality, internal linking, speed, and overall relevance. For SEO, what matters more is that headings are logical, do not repeat each other, and genuinely reflect the sections. If you start splitting the text into dozens of headings just for the sake of the table of contents, the page may become worse.

From an accessibility perspective, check link contrast, active state visibility, keyboard focus after navigation, and readability on mobile. If you use icons for heading levels, they should not be the only way to understand nesting. Spacing, size, and text order should stay clear even without decorative markers.

Editorial Guidelines for a Team

If one person manages the site, the rules for working with DJ-TOC can stay in their head. If a team edits the pages, you need a short set of guidelines. Otherwise, one editor will add headings correctly, another will copy a section with someone else's ID, a third will turn a decorative heading into plain text, and a fourth will enable every level in the table of contents. The result is a plugin that looks unstable even though the real issue is in the publishing workflow.

The guidelines do not need to be a long document. It is enough to define a few rules: where the source area for the table of contents lives, which heading levels should be used, how IDs should be named, who checks the mobile display, and what to do after major text changes. These rules are especially important for knowledge bases, where older articles are constantly expanded with new steps, warnings, and answers.

Editor Checklist

• Before adding DJ-TOC, the content is divided into clear H2 and H3 headings, and decorative labels are not turned into headings without a reason.
• The table of contents is connected only to the main content container, not the entire page.
• The source ID is unique within the page and was not copied from another block.
• The list does not include headings from forms, related content, the footer, cards, or promotional sections.
• On mobile, the table of contents appears in a logical place and does not take up excessive space.
• After editing headings, at least three jumps are tested: the top item, a middle item, and the bottom item.

This checklist can live inside the editor's task or in the YOOtheme Pro template description. It does not replace testing, but it reduces the chance of repeated mistakes. The important part is that the team understands why each item is there. For example, the ID check is not a formality - it ensures DJ-TOC reads the correct column.

When to Hand the Task to a Developer

An editor can fix heading structure, block placement, table of contents depth, and the basic look and feel. A developer is needed if the issue appears only after a certain optimization step, if a sticky header requires offset calculation when jumping to anchors, if the theme overrides scroll behavior, or if you need a reusable template for dozens of articles with different display conditions.

Before handing it off, collect a short report: the page URL, what was expected, what actually happened, which heading levels are enabled, which ID is used, whether the issue repeats without cache, and whether it appears in a private window. That report saves hours because the specialist does not have to guess which layer is failing.

Safe Styling Without Editing Plugin Files

Sometimes the built-in settings are enough. But if you need to fine-tune the look of the table of contents to match the site's design, it is safer to use YOOtheme Pro settings and a small amount of page-level CSS or child-theme CSS instead of editing DJ-TOC files directly. YOOtheme Pro documentation allows custom CSS for sections through the special .el-section selector, and in WordPress you can usually use a child theme or a safe code snippet tool.

This approach makes sense only after functionality is already confirmed: the items are there, the links work, and the progress bar does not conflict with the header. CSS should not be used to fix an empty table of contents. It should only handle visual details such as spacing, borders, active link color, or compactness on mobile.

Example of a Light CSS Adjustment

Below is a cautious example for a case where you assigned the class guide-toc-box to the table of contents column in YOOtheme Pro advanced settings. The internal DJ-TOC classes may differ in your version, so do not rely on unconfirmed plugin class names. The styles are applied to a container you control yourself.

/* Column or section container where the DJ-TOC element is placed */
.guide-toc-box {
  border: 1px solid rgba(40, 40, 40, 0.12);
  border-radius: 8px;
  padding: 18px;
  background: #ffffff;
}

/* Links inside the table of contents keep a readable size and calm spacing */
.guide-toc-box a {
  line-height: 1.45;
  text-decoration: none;
}

/* On narrow screens, the block should not feel like a heavy sidebar */
@media (max-width: 768px) {
  .guide-toc-box {
    padding: 14px;
    margin-bottom: 24px;
  }
}

The check is straightforward: open the page on desktop and on a phone, make sure the table of contents does not overlap the text, the links are visible, and the spacing does not break the YOOtheme Pro grid. Rolling back is also safe: remove the guide-toc-box class or the CSS snippet, save the page, and clear the cache.

When It Is Better Not to Add Code

Do not add CSS if the real problem is that the table of contents is not collecting headings. Do not add JavaScript to "fix" jumps until you have checked the built-in element settings, the area ID, and possible cache conflicts. And do not edit plugin or theme files directly: updates can wipe out your changes and make troubleshooting harder.

If you need more advanced behavior - a sticky table of contents, collapsible nested levels, or custom scrolling that accounts for header height - first check whether YOOtheme Pro can handle it through built-in section, column, and style settings. Only after that does it make sense to involve a developer and document the customization in a child theme.

Ideas for Using It on Different Types of Pages

The same DJ-TOC element can be used in different ways. The important thing is not to place a table of contents on every long page automatically, but to choose pages where it truly shortens the user's path. On a WordPress site running YOOtheme Pro, that usually means pages where visitors arrive with a specific question and want to find the answer quickly.

Knowledge Base and Documentation

In a knowledge base, the table of contents can become the main navigation tool inside the article. Sections such as "preparation," "configuration," "verification," "errors," and "FAQ" are visible right away. In this setup, show H2 and H3, and only include H4 for technical materials. If the articles share a similar structure, create a layout template in YOOtheme Pro and use it as a starting point, but always check the area ID and the actual headings each time.

Legal and Policy Pages

For terms of use, privacy policies, and internal policies, a table of contents is especially useful because users rarely read these pages from start to finish. They are looking for the section about data storage, deadlines, liability, or the request process. In this case, it is better to use a restrained style without bright icons so the block feels like navigation rather than a promotional feature.

Long Product Pages

On a product page, a table of contents can help if the page contains real sections: features, examples, limitations, compatibility, questions, and instructions. But if the page is made up of short marketing sections, the list of items may feel forced. In that case, improve the structure of the page into more useful content blocks first, and only then add DJ-TOC.

Tutorials and Courses

For lessons, a table of contents works well when the material is split into steps and validation blocks. Add action-based headings to the structure: "Prepare the layout," "Add the element," "Check the links," and "Fix the errors." That way, readers can return to the exact step they need without searching through the page again.

Practical Combinations with WordPress and YOOtheme Pro Mechanisms

DJ-TOC does not need to work in isolation. Most often, it is useful as part of a clean editorial system: WordPress stores posts and pages, YOOtheme Pro controls the layout, DJ-TOC builds navigation from headings, and cache plus styles should not get in the way of the outcome. There is no need to describe these combinations as official integrations unless the developer explicitly does so. This is simply a practical setup based on normal WordPress behavior and documented YOOtheme Pro capabilities.

Template for a Knowledge Base

If you have many similar help articles, create a base layout in YOOtheme Pro: an intro block, two columns, a table of contents column, a content column, a result-check block, and an FAQ. Then use it as a model for new articles. DJ-TOC's role is to build fast navigation for each specific article, while the layout's role is to preserve a consistent and usable structure without rebuilding everything from scratch each time.

The main conflict point is ID duplication. If you duplicate a page, check whether identical identifiers ended up on multiple independent blocks within the same layout. The expected outcome is that each page has its own table of contents source and that the list of items matches only that page's content.

Editorial Check Before Publishing

Add DJ-TOC to the publishing checklist for long-form content. Before publication, the editor should check not only spelling, but also the H2/H3 structure, the correctness of the table of contents, link jumps, mobile display, and the absence of unwanted items. It is a simple process, but it sharply reduces the number of issues that appear after content updates.

If the site uses an SEO plugin, use it to review headings and metadata, but do not expect it to replace a visual check of the table of contents. An SEO tool may point out a structural issue, while DJ-TOC shows how a real visitor will experience that structure.

Cache and Separate Rules for Documentation

For knowledge base pages, you may want a more conservative optimization setup than for standard landing pages. For example, you might avoid aggressive script combining on pages where interactive navigation matters, or clear the cache after structural edits. The test is simple: after publication, open the page as a guest, click several table of contents items, and scroll to the end with the progress bar enabled.

When DJ-TOC Is the Right Choice

DJ-TOC is worth using when you have a WordPress site built on YOOtheme Pro and genuinely long content where heading-based navigation helps readers complete a task. The strongest use case is not "add a table of contents for SEO," but building a genuinely usable reference page: the main article in one area, the table of contents beside it or before it, clear H2/H3 levels, a subtle progress bar, and tested anchor jumps.

Before publishing, run a short validation route: the page opens correctly for a guest, the table of contents includes only the right sections, the links land on the correct headings, the mobile view holds up, the progress bar does not cover the interface, and the cache does not change the behavior. If all of that checks out, you can move ahead with the production page and, if needed, download DJ-TOC from the download block on this page.

If the site does not use YOOtheme Pro, if you need mass automatic insertion across older posts, or if the content is short, do not force the product into the wrong job. Choose a block-based or global TOC plugin instead, and reserve DJ-TOC for pages where its connection to YOOtheme Pro genuinely gives you control over the layout and the outcome.