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:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: