A new way of displaying child pages is coming...

Article by:
Date Published:
Last Modified:

With this site getting rather large (536 published pages as of March 2015), and being designed in a hierarchical manner (i.e. predominately using Wordpress Pages rather than Posts), it was becoming harder and harder to manage the navigation in a user friendly way.

The current design uses a Mega Menu as the primary and pretty much only way of navigating to the correct page. In most cases, the only pages on this site which have any material on them are the pages which have no children of there on (i.e. the end-points), while the parent pages are blank and just used to group pages into a logical hierarchy.

Screenshot of the large 'mega menu' structure on mbedded.ninja.

Screenshot of the large ‘mega menu’ structure on mbedded.ninja.

The new design will not replace the Mega Menu, but rather to provide material for the mostly blank parent pages and make it easy to navigate from them to the child pages. I want this to happen in the most autonomous fashion possible. For this reason I looked at plugins which can automatically create lists of child pages and insert them into parent pages.

Most of them provided shortcodes for the user to insert into a page, which would automatically generate a list of all the child pages. I tried a few, like List Pages Shortcode and Child Pages Shortcode. Then I came across SB Child List. The selling point was it’s powerful templating feature, which let me customise the way the child page list looked. I wanted a table-based design, using the title of the page, it’s featured image, and it’s excerpt to create a listing. I did this with the following code:

A screenshot of the SB Child List template code for mbedded.ninja.

A screenshot of the SB Child List template code for mbedded.ninja.

The child pages menu is then inserted into the parent with the shortcode:

[sb_child_list template="2"]

I have currently tested this on the Altium pages, below is a screenshot of what the Altium page looks like, which is the parent for things like the popular Altium Tricks And Standards, Altium Bugs and Altium Simulation pages.

Screenshot of the new child page design for mbedded.ninja.

Screenshot of the new child page design for mbedded.ninja.

One of the target areas of the site for this new design will be the Component Packages page. Currently, most of the packages are on the one page, and as the number of components listed there grew, it just got too big! This plugin will allow me to add all the information about a component package to it’s own child page, and then easily list all the components in a table on the parent page. However, this will take sometime to implement (there are currently over a 100 packages on there).


Geoffrey Hunter

Dude making stuff.

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License .

Related Content


comments powered by Disqus