WebspaceWorks Resources

Multi-level page navigation with Fold Page List

There is a problem in generating multi-level navigation lists in wordpress because each page only carries a reference to its parent. There is therefore no direct means of establishing the grandparent of a page, and so no means of constructing a navigational list based upon that relationship.

In many cases though this isn’t a problem:

• All page navigation is held in a single list
• Pages only run to two levels, so a simple parent-child relationship is enough to cover the whole site

More than two levels in separate navigation lists

Where problems can arise are in situations where page navigation is split across more than one navigation list with the total depth of the site exceeding two levels.

Splitting things across two or more separate lists requires an equal number of calls to build the navigation. Typically the main navigation will be limited to a single level, and sub-navigation can be run a several single level lists, or a single multi-level list, or some combination of the two.

What is needed is a means of easily identifying the ancestral tree for any displayed page, so that navigation lists can be built reliably, and without having to rewrite code if a new level is added.

Getting the ancestral tree of pages

Requires at least to work as described below.

Fold Page List needs ancestral information internally to maintain styling across the whole hierarchy, so it comes with the necessary functions to provide it… It’s just a question of putting them to use.

The key is the _wswwpx_page_get_ancestor_ids function, which provides a full hierarchy of page IDs from the root of the site to the current page.

The steps are to:

1. Get the ID of the current page
2. Get all ancestors of this page

Thus:

$g_page_id = $wp_query->get_queried_object_id();
$ancestorIDs = _wswwpx_page_get_ancestor_ids($g_page_id);

At this point $ancestorIDs is an array containing the complete ancestral
tree for the current page.

$ancestorIDs[0] is the root of the site
$ancestorIDs[1] is the section parent
$ancestorIDs[2] is the child of [1] and the parent of [3]
$ancestorIDs[3] is the child of [2] and the parent of [4] (if present)

and so on…

If you run a navigational system that has main section pages in one list, with sub-navigation in a separate list, then the sub-navigation of any of the main sections will always be a child of its section parent. In other words, it will be a child of $ancestorIDs[1] in its ancestral tree… always!

Using the ancestral list means that navigation can be built independent of your current location in the site hierarchy… it doesn’t matter whether you are 2 levels or 10 deep, the navigation is always built using the correct ancestral relationship.