In this article I share a Page Template in Genesis for automatically displaying child Pages (if present) of the current Page in a 3-column grid with featured image in default state and title + excerpt on hover similar to that of Agency Pro's featured posts grid.
We shall use get_pages() and loop through each of the sub Page (only the top level ones) to fetch its featured image (if present, otherwise use a placeholder image), title and excerpt. Finally we add the CSS needed to display these in a image with info on hover grid on desktops and info below the image on tablets and mobiles.
While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.
Step 1
Add the following in child theme's functions.php:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
Hi Sridhar, I followed your tutorial but the page is not pulling all the sub pages as should be + it is not showing the featured image properly..
You can see it here: http://seabreezepools.ca/fibreglass-pool-portfolio/
Thank you for your help!
Have you regenerated thumbnails?
Ofcourse I did.
Also, please note my other comment where I tried to implement this on another theme and didnt work at all..
Appreciate your help.
Can you change
add_image_size( 'sub-pages', 380, 380, true );to
add_image_size( 'sub-pages', 387, 387, true );regenerate thumbnails and post back when done?
no changes.
see link here: http://seabreezepools.ca/fibreglass-pool-portfolio/
doesn’t look like the size of featured images is getting regenerated.
Can you send me the WP and FTP logins via https://sridharkatakam.com/contact/? Mention the URL of this page.
Fixed.
See http://seabreezepools.ca/fibreglass-pool-portfolio/.
The problem was that in functions.php, you have pasted the code in such a way that it was all commented out. You can see functions copy.php for the earlier code.
I have also set the min-height of .sub-page to 387px in CSS and regenerated the thumbnails.
I tried to implement this tutorial on a different theme and didn’t get it working either…
Would love to know if this works at all.
thnx
I would love to see the CSS required to achieve this same look in Altitude Pro if anybody has tried it.
Hello Sridhar,
How can I manage the order of pages within the grid ?
I try to set an order to each pages but it does not change anything.
Thanks for your help.
Make sure you’ve ordered the pages using the Page Attributes > Order. Then….
for the Page.php file (line 11), under this line of code …
‘parent’ => get_the_id(), // no grandchildren
you need to add….
‘sort_column’ => ‘ID’
Sorry….wrote that incorrectly. It should be:
‘sort_column’ => ‘menu_order’
This will order the pages according to the sort order you give them.
Hi Sridhar,
I want to be able to control the excerpt that appears so I used the function listed on this page to turn excerpts on for Pages. http://www.wpbeginner.com/plugins/add-excerpts-to-your-pages-in-wordpress/
Can you help me get to the next step by showing what I’d need to change on the page template to make the page excerpt show up instead of the first 40 characters on the page? Thanks!
Sure.
To add manual excerpts for static Pages you just need to add http://pastebin.com/raw/xPRXJz9F to functions.php.
The next step is to replace http://pastebin.com/raw/ER3Xd2Wj with http://pastebin.com/raw/mj2VzJ3N.
http://d.pr/i/10HST
How can this grid be displayed without the featured image overlay? I would like the grid to display like the Home Bottom grid in Agency Pro, with the title and excerpt linked, and the background switches to dark on hover.
Looks like what I’m trying to achieve can be accomplished in this tutorial: https://sridharkatakam.com/automatically-show-grid-sub-pages-static-pages-genesis/. Thanks!
Hmmm, cant seem to get this to work? Copied the code as advised, but css does not seem to affect it! Just normal featured post grid.