Subpages Grid in Oxygen

Update on October 05, 2020: Added instructions near the end to make the tutorial work for singular pages of Custom Post Types.

This members-only tutorial provides the steps to display a grid of child Pages (if present) when viewing a static Page in Oxygen.

A parent Page:

Another parent Page:

A Page that does not contain at least one subpage:

We shall set up the Template that applies to all Pages to show the title, content and then the list of all Pages using a Repeater filtered via pre_get_posts for setting the parent to the current Page ID.

3 lines of code and we will have the Pages list appear as a responsive grid using the magic of CSS Grid.

For ensuring that the subpages grid appears only if the current Page has at least 1 child Page, we shall create a custom function and use it via the built-in Dynamic Data condition.

Step 1

Let us register a custom image size for the images in the child Pages grid.

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Custom image sizes

Code:

add_image_size( 'subpage-thumb', 500, 333, true ); // 3:2 ratio.

Set the snippet to run everywhere. Save changes and activate.

If you have set featured images for the Pages before implementing this tutorial, regenerate thumbnails.

Let us define a custom function that returns true if the current Page is a parent. Add another snippet.

Title: [Function] Check if Page is a Parent

Code: