Note: since I migrated away from WordPress for my main website, I don’t plan to maintain this plugin anymore, but I am now using a revamped version designed for integration with Hexo. It reuses a lot of the same CSS and generates similar markup.
During my previous website redesign in WordPress, I was looking for a way to easily display all the pages directly under the current page in the hierarchy, and I couldn’t find one. This plugin does that, displaying page thumbnails and excerpts for a list of results that can easily be styled in different ways. It adds a shortcode,
list-child-pages, which can be used in any page to display the list and is customizable with the following parameters:
- container_element: the element to use as the wrapper for the entire list (defaults to ‘ul’)
- container_id: the desired ID for the container element
- container_class: the desired class for the container element
- item_element: the element to use for each page (defaults to ‘li’)
- item_class: the desired class for each item element
- thumbnail_element: the wrapper element to put each thumbnail image in (defaults to ‘div’, unused if display_thumbnails is false)
- thumbnail_class: the desired class for each thumbnail wrapper
- text_element: the element to wrap the text portion of each result in (defaults to ‘div’)
- text_class: the desired class for each text section wrapper
- title_element: the element to use for each page title (defaults to ‘div’)
- title_class: the desired class for each page title
- excerpt_element: the element to use for each page excerpt (defaults to ‘div’)
- excerpt_class: the desired class for each page excerpt
- link_titles: whether to display links in the page titles (defaults to true)
- link_thumbnails: whether to display links on page thumbnails (defaults to true, but unused if display_thumbnails is false)
- display_thumbnails: whether to display page thumbnails (defaults to true)
The end result when you use the shortcode is a structure like this:
<ul id="container_id" class="container_class"> <li class="item_class"> <div class="thumbnail_class"> <a href="..."><img src="..." /></a> </div> <div class="text_class"> <div class="title_element"> <a href="...">Page title here</a> </div> <div class="excerpt_class"> Page excerpt here </div> </div> </li> </ul>
The reason I chose this structure is because it’s very flexible from a styling standpoint. Here is the same page preview styled different ways:
Large screen style, with a larger thumbnail and designed for a grid layout.
Small screen style, with the thumbnail to the side, designed for a single-column list. This layout is also reminiscent of search results if you’re going for that look.