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: