In the members-only forum, a user asked:
Hi Sridhar,
What do you think about a Tutorial either using ACF or another method to create a Services Page/Template.
For example, if you have several services where you are using a Page per Service to provide further information about the service.
It’s likely you would like to set those Pages as Childs to a Services Page, resulting in a Permalink Structure like: example.com/services/example-serviceHow could you go about having a solution which would automatically add these ‘Service Pages’ to the Service Page/Template, pulling in the Featured Image and either a Content Limit or Excerpt then a Button to the Service Page for further information…
Wouldn't it be handy to have a grid of child Pages automatically appear below the content on static Pages in your Genesis site? In this article I share the code that will do just that in an elegant 3-column grid showing linked featured image (if present, otherwise a placeholder), linked title, value of a custom field called "Custom Page Excerpt" (created using ACF) if present, otherwise the automatic excerpt.
The default sort order of the sub Pages is alphabetically by their titles. This can be changed to custom order by specifying Page Order.
Pages that do not have child pages continue to appear like before.
We are going to add page.php to the child theme which works for all Pages rather than a custom Page template which would need to be manually applied.
Step 1
Install and activate Advanced Custom Fields plugin.
Add a field group named say "Page Meta" having a Wysiwyg field called Custom Page Excerpt.
Step 2
Set featured images for your sub Pages. In this example we are using images sized 800 x 389.
If you would like control on how exactly how much text should appear in the grid or if you'd like to display formatted HTML (bold, links etc), populate the Custom Page Excerpt field for the sub Pages.
Step 3
Add the following in child theme's functions.php:
THANK YOU! I need something just like this!
Question: If I don’t want to apply this to all pages, I know I can create a CPT and then manually apply it (for example, create sub-pages.php and upload it to the child theme). If I do that, will I need to make additional adjustments to the code?
What you need to do is use the code as a Page Template.
Rename
page.phpto say,template_subpages.phpand add the comment header at the top like this: http://pastebin.com/raw/26CWRc5K. Then edit the Pages for which you’d like to automatically display the sub Pages and apply that template.Thanks!
Thanks for this tutorial. Worked nicely for me!
very nice, thank you!
I implemented it as a page template. The only problem I’m having is that Social Sharing buttons (Monarch or Genesis Simple Share) that are set to display ‘after content’ are inserted before the sub-pages div, so the social sharing buttons are in the middle of the page before the sub-pages grid. Any way I can insert the sub-pages div before the social sharing buttons or the social sharing buttons after the sub-pages grid?
You can disable automatic placement on Pages and use those plugin’s function calls to manually place after the grid.
Ex.: https://gist.github.com/srikat/139c2f4a0fb00b3b77ec37625a11e50c#file-page-php-L94-L97
(also add this in style.css: https://gist.github.com/srikat/139c2f4a0fb00b3b77ec37625a11e50c#file-style-css)
to get http://d.pr/i/19Pjx
Source: https://github.com/copyblogger/genesis-simple-share/wiki/Usage-Tips#examples
Thanks, Sridhar. Worked great.
Weird issue; only 1 of the 6 sub page are showing. Any idea why? http://esiincpa.wpengine.com/services/
I see that it’s fine now. Guess you managed it?
Yup
Hello everyone,
As I can prodecer to make a page of 9 subpages for each post and view as your page?
On the other hand I would like a random change pages recharges whenever a user enters or conduct. both random and paging in the subpages, thanks
I am not sure what your question is. Can you elaborate?
How would I only implement this on one or an array of multiple pages that has child pages?
In Step 4 instead of naming the file as page.php name it as something like template_custom-page.php. Inside the file after the opening PHP tag, place a comment header having the name of the template. Ex.: http://d.pr/i/18PCh
Then manually apply this template to your desired Pages.
perfect thank you!
One last question – what if there are not child pages but you wanted to use the same template style to show specific pages?
Why do you use ACF for the page excerpt?
To have rich text formatting ability in the output on the front end.
Oh, okay. I’ve used this plugin https://wordpress.org/plugins/rich-text-excerpts/ instead (assuming that’s accomplishing the same thing).
Cool. Favourited it. Will try next time I need this functionality.
Great tutorial as always, I have used this to display sub-pages as categories everything works great but when I click through to one of my sub pages I’am using another of your tutorials to display the featured images full width below the header so my question is how do I set up ACF to use an alternative featured image for the sub-page thumbnails displayed on the Parent page using page.php template?
Any answer greatly appreciated – Alistair
Hi Sridhar I have had to turn on debugging for a seperate issue but it is throwing up the following in page.php
Notice: Undefined variable: post in /home/testymctes/domains/iwsandbox.co.uk/public_html/on-trend/wp-content/themes/on-trend/page.php on line 12
Notice: Trying to get property of non-object in /home/testymctes/domains/iwsandbox.co.uk/public_html/on-trend/wp-content/themes/on-trend/page.php on line 12
which is the following two lines
if ( ! $post-> post_parent ) { // if this is a parent Page
$classes[] = ‘sub-pages-grid’;
any idea why this is showing and if so how to fix
regards Alistair
Try adding
global $post;above that if condition.
[…] How to automatically show a grid of sub Pages on static Pages in Genesis, a member […]
I am using this on two projects right now and neither seems to be working. What it’s doing is spitting out the first paragraph of the parent page twice. I copied the code exactly. I would be willing to pay for some help with this issue since it is something I think would be useful for future projects.