Icon Table of Contents and Menus

Long documents with multiple headings are sometimes difficult to scan, especially on mobile devices. This plugin helps by providing an icon at the top of the page under the main heading which, when expanded, provides a table of contents (ToC) with bookmarks to all of the main headings in the content below (h1 to h4). It can also be used to display WordPress menus using the same icon interface.

How does it work?

To generate the table of contents for the current page content the plugin parses the current page content into a DOMDocument and then uses DOMXPath to find all of the main heading elements (h1 to h4). It adds bookmarks for each of these headings and then builds a nested unordered list linking to them as a DOM fragment. This gets inserted back into the main DOMDocument object. Finally, the generated DOMDocument is returned as a string for output into the main page content.

The menu version of the plugin doesn’t have to parse any content. Instead it just loads in the menu details using the WordPress wp_get_nav_menu_items() function and iterates through them building an unordered list as a string. This is then inserted into a template and displayed on the page.