Documentation navigation shortcodes

Three shortcodes build the reading experience of the documentation site: the product menu, the page index, and the product call to action.

They are meant for the documentation article template, beside the article content. Place them in a template or builder field that processes WordPress shortcodes.

What they have in common

  • They render nothing when they cannot resolve what to show, so they are safe to leave in a template that also renders documents without categories.
  • They ship no CSS. The navigation reuses the theme's accordion markup and the page index reuses the theme's navigation classes, so both inherit the site's styles and can be refined from the site stylesheet.
  • They work out which product they are in from the document being read: the deepest documentation category assigned to it, and that category's highest ancestor, which is the product.

A document assigned only to a deep child category therefore still resolves to its product correctly.

[pom_docs_nav]

The documentation menu of the current product: every category below the product, recursively, with the published documents of each.

Its behavior:

  • Categories are collapsible panels, not links.
  • Documents are links, and the one being read is marked as the current page.
  • The categories leading to the current document are expanded; the rest start collapsed.
  • Other products never appear.
  • Categories with no published document anywhere below them are skipped.
  • A document in several categories is listed once, under its deepest.
  • Order follows the category order used by the Docs library, and then each document's own order, then its title.
  • Documents assigned directly to the product root appear before its child categories.

The panels use the theme's accordion markup, including its collapsed and expanded icons, so they behave exactly like every other accordion on the site.

Attribute Default Description
el_class empty Extra classes for the navigation element

[pom_docs_toc]

An "On this page" index of the article being read, highlighting the current section as the reader scrolls.

The list is built in the browser from the rendered article, because documentation bodies come from synchronized Markdown as well as from the page builder. Headings without an anchor are given one derived from their text; existing anchors are kept, and heading levels nest.

The index stays hidden until it has entries, so an article with no headings shows nothing. Its default presentation is desktop-oriented and hidden at smaller responsive breakpoints; the main article remains available on every device.

Attribute Default Description
el_class empty Extra classes for the navigation element
content #content .doc-content Selector of the element holding the article
headings h2, h3 Which headings to index
offset 100 Scroll offset in pixels, to clear a sticky header
title On this page Heading shown above the list

Change offset if your header overlaps the highlighted section, and headings if your articles use a different structure.

[pom_docs_cta]

The product call to action for the documentation branch being read: a link to the product page, a link to its purchase page, and a link to its changelog.

The destinations are declared per product and are translatable together with their labels, so each language points at its own pages. A product with no declared destinations renders nothing — which is what you will see on a new product until its links are added.

Attribute Default Description
el_class empty Extra classes for the wrapper

Putting them in a template

A typical documentation layout uses all three: the navigation in a sidebar, the index beside the article, and the call to action at the end of the content or below the navigation.

Because each renders nothing when it has nothing to show, one template serves every product and every article.

Verify

  1. Open a published article deep in a product's structure on the documentation site.
  2. Confirm the navigation shows that product only, expanded to the current document.
  3. Confirm the current document is marked as current.
  4. Confirm the page index lists the article's headings and follows your scrolling.
  5. Confirm the call to action points at the right product.
  6. Open an article with no headings and confirm the index is absent rather than empty.

Troubleshooting

  • A shortcode renders nothing: confirm you are on the documentation site, the document has an assigned product category and the relevant product mapping exists.
  • A document appears in an unexpected branch: review all assigned categories; navigation chooses the deepest assignment.
  • The current branch does not expand: confirm the current document is published and included below the resolved product root.
  • The page index is empty: confirm the content selector matches the rendered article and the article contains headings selected by headings.
  • A heading is hidden under the sticky header: increase offset.
  • The call to action is absent: the product may not yet have declared landing, purchase and changelog destinations.

Limits

The navigation and call to action depend on the documentation site's category structure and supported product mappings. They are not general-purpose menus for arbitrary sites or post types.