I often want a page containing an automatically generated grid of subsidiary pages, with featured images and excerpts, without having to work hard to make it happen. For instance, I’ve just been working on a demo political candidate website, and I wanted a page titled “Issues” where the candidate could write position papers on various subjects and they would automatically be collected on the “Issues” page.
An additional requirement is it should be easy for someone who’s not a web developer to author these position papers and control the order in which they’re listed (assuming the candidate doesn’t want them alphabetical or by date written). This lets the web developer spend time on website design while others enter content.
How to set this up
To create this design, I used the plugin CC Child Pages by Caterham Computing. It uses a shortcode to control formatting, with many options for what to include, how to sort, etc. It’s a way to create something like a post grid or list, but instead of posts it shows the pages that have the current page as their “parent”.
I’d like to see this capability as a block rather than a shortcode, or to have it added to the existing Query Loop block in the base WordPress code, since that allows more flexibility in formatting and controlling the order of the elements. But this does the job pretty well.
To get the screen shown above, I used the following shortcode:
[child_pages posts_per_page="99" cols="2" more="More…" link_titles="true" thumbs="true" link_thumbs="true" truncate_excerpt="false"]
How to create the child pages
These are the instructions I’d give to the content author:
- Create a New Page from the top bar.
- Enter the title and text of the document, along with any illustrations.
- Decide how much of this text you want to appear in the grid along with the title and picture. Insert a “More” block at the point you want this excerpt to end. If you don’t do this, it’ll cut off after a certain number of words (55 by default). (also see note below)
- On the right side of the editing screen, under the Page tab:
- Designate one of the illustrations as the Featured image.
- (If not sorting alphabetically) Enter a number in the Page Attributes > Order field to control what order the entry will appear in.
- In Page Attributes > Parent Page, select the parent page Issues.
- In the SEO options, enter metadata, choose images for social media, and do whatever other settings seem appropriate for this content. As always, consider the SEO tool’s language analysis and address anything that seems like a real issue.
- Publish, and confirm you want to publish now.
- Visit the Issues page of the website and make sure the new page shows up as you want it to.
You may be able to enter text in a separate Excerpt field to override the automatic excerpt taken from the beginning of the page. This is always possible with Posts, but some themes don’t support it with Pages. If the theme you’re using is one of those, and you want to give your users that ability, There’s a plugin for that.
If manually controlling ordering, there are plugins that let you drag pages around in the Pages list to control their Order value. Or might suggest people enter the number initially in increments of 10 to allow space to insert other pages between. The numbers only control sorting, and aren’t visible anywhere on the website.
As an alternative to using child pages, you can create a custom post type. The plugin Custom Post Type UI by WebDevStudios lets you define new post types easily, which by default work like Posts except they have their own list in the dashboard and don’t appear mixed in with blog posts. So in this example you could create a post type called Issue and in your instructions, tell the content editors to use New > Issue instead of New > Page. The user no longer has to choose a parent page because the grid will be programmed to select all Issue posts regardless of parentage. The Query Loop block can select custom post types, which gives you more options for how to format the entries.
If you find this website helpful, subscribe for email updates!
Your information will not be shared (except with MailChimp, who manages the subscriber list).