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:
![](https://wpdevdesign.com/wp-content/uploads/2020/08/subpages-grid-oxygen-1-756x1024.jpg)
Another parent Page:
![](https://wpdevdesign.com/wp-content/uploads/2020/08/subpages-grid-oxygen-2-1024x878.jpg)
A Page that does not contain at least one subpage:
![](https://wpdevdesign.com/wp-content/uploads/2020/08/subpages-grid-oxygen-3-1024x522.png)
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:
This is a premium members-only content.
To view the rest of the content, please sign up for membership ($47/month or $599 one-time).
Already a member? Log in below or here.