- This topic has 24 replies, 4 voices, and was last updated 4 years, 7 months ago by
.
-
Posts
-
I have many child pages that I want to show at the bottom of their respective parent's page.
Anybody knows how to automatically show the grid Academy Pro normally shows for posts in archive pages, only for Child pages in Parent pages?
Quick links to Academy Pro demo where you can see the grid:
Author: https://my.studiopress.com/themes/academy/#demo-full
Category: https://my.studiopress.com/themes/academy/#demo-fullThanks a lot in advance,
Regev.Pages do not have an archive like the categories, tags, and the author page.
Need help with customization or troubleshooting? Reach out to me.
Obviously... but I figured there must be a way to customize the code underneath to either automatically list child pages with the same look, or to manually plant a code in a custom-html at the bottom of those pages and have them styled the same way
Pages do not use the archive as I stated - https://demo.studiopress.com/academy/author/admin/ which is what this uses. You'd need custom templates created to display pages in that type of way.
Need help with customization or troubleshooting? Reach out to me.
Is there anything I can add to this code so that it lists Child-Pages on Pages similarly?
`<?php
/**
* This file adds the grid layout for the Academy Pro Theme.
*
* @package Academy
* @author StudioPress
* @license GPL-2.0-or-later
* @link https://my.studiopress.com/themes/academy/
*/// Registers the grid layout for category archives.
genesis_register_layout(
'academy-grid',
[
'label' => __( 'Three-column Grid', 'academy-pro' ),
'img' => get_stylesheet_directory_uri() . '/images/grid.gif',
'type' => [ 'category', 'post_tag' ],
]
);// Adds site layouts back to categories and tags.
if ( function_exists( 'genesis_add_type_to_layout' ) ) {
genesis_add_type_to_layout( 'content-sidebar', [ 'category', 'post_tag' ] );
genesis_add_type_to_layout( 'sidebar-content', [ 'category', 'post_tag' ] );
genesis_add_type_to_layout( 'full-width-content', [ 'category', 'post_tag' ] );
}add_action( 'genesis_meta', 'academy_grid_layout' );
/**
* Sets up the grid layout.
*
* @since 1.0.0
*/
function academy_grid_layout() {$site_layout = genesis_site_layout();
if ( 'academy-grid' === $site_layout ) {
remove_action( 'genesis_after_content', 'genesis_get_sidebar' );
remove_action( 'genesis_after_content_sidebar_wrap', 'genesis_get_sidebar_alt' );
add_filter( 'genesis_skip_links_output', 'academy_grid_skip_links_output' );
add_filter( 'genesis_pre_get_option_content_archive_limit', 'academy_grid_archive_limit' );
add_filter( 'genesis_pre_get_option_content_archive_thumbnail', 'academy_grid_archive_thumbnail' );
add_filter( 'genesis_pre_get_option_content_archive', 'academy_grid_content_archive' );
add_filter( 'genesis_pre_get_option_image_size', 'academy_grid_image_size' );
add_filter( 'genesis_pre_get_option_image_alignment', 'academy_grid_image_alignment' );}
}
add_filter( 'genesis_pre_get_option_site_layout', 'academy_grid_category_layout' );
/**
* Sets the default layout for category and tag archive pages.
*
* @since 1.0.0
*
* @param string $layout The current layout.
* @return string The new layout.
*/
function academy_grid_category_layout( $layout ) {$layout_option = get_theme_mod( 'academy-grid-option', true );
if ( $layout_option && ( is_category() || is_tag() ) ) {
$layout = 'academy-grid';
}return $layout;
}
add_action( 'pre_get_posts', 'academy_grid_posts_per_page' );
/**
* Sets the number of posts in the grid.
*
* @since 1.0.0
*
* @param WP_Query $query The query object.
*/
function academy_grid_posts_per_page( $query ) {$site_layout = genesis_site_layout( false );
$posts = get_theme_mod( 'academy-grid-posts-per-page', academy_get_default_grid_posts_per_page() );
if ( ! $query->is_main_query() ) {
return;
}if ( 'academy-grid' === $site_layout ) {
$query->set( 'posts_per_page', intval( $posts ) );
}}
/**
* Gets the content limit for the grid layout.
*
* @since 1.0.0
*
* @return int The grid content limit.
*/
function academy_grid_archive_limit() {return get_theme_mod( 'academy-grid-archive-limit', academy_get_default_grid_limit() );
}
/**
* Gets the archive thumbnail for the grid layout.
*
* @since 1.0.0
*
* @return bool The grid archive thumbnail.
*/
function academy_grid_archive_thumbnail() {return get_theme_mod( 'academy-grid-thumbnail', true );
}
/**
* Gets the grid image size.
*
* @since 1.0.0
*
* @return string The grid image size.
*/
function academy_grid_image_size() {return 'featured-image';
}
/**
* Gets the grid image alignment.
*
* @since 1.0.0
*
* @return string The grid image alignment.
*/
function academy_grid_image_alignment() {return 'alignnone';
}
/**
* Gets default grid layout posts per page.
*
* @since 1.0.0
*
* @return string Number of posts to show.
*/
function academy_get_default_grid_posts_per_page() {return 6;
}
/**
* Gets default grid layout content limit.
*
* @since 1.0.0
*
* @return string Number of characters to show.
*/
function academy_get_default_grid_limit() {return 200;
}
/**
* Gets default grid layout content limit.
*
* @since 1.0.0
*
* @return string Content display option.
*/
function academy_content_archive_option() {return 'full';
}
/**
* Sets the grid content display type.
*
* @since 1.0.0
*
* @return string The grid display type.
*/
function academy_grid_content_archive() {return get_theme_mod( 'academy-content-archive', academy_content_archive_option() );
}
/**
* Removes skip link for primary sidebar on grid layout.
*
* @since 1.0.0
*
* @param array $links The current skip links.
* @return array The new skip links.
*/
function academy_grid_skip_links_output( $links ) {if ( isset( $links['genesis-sidebar-primary'] ) ) {
unset( $links['genesis-sidebar-primary'] );
}return $links;
}
@regev Agree with Andy on this, wp_list_pages, get_pages and WP_Query all work. I have used these functions to show child pages on parent pages
In relation to your code https://studiopress.community/topic/how-to-have-academy-pros-beautiful-archive-grid-for-pages/#post-498392
I don't think so as i couldn't see any query for pages in that code.
Once you've pulled in the child pages, you can use different CSS methods like display:grid; to output in columns.
Thanks for the kind advise, Brad and Andy 🙂
I'm not sure how to do it technically tho, normally I find little snippets of code in this forum that I can use.
This code will display your child pages AFTER the parent page content area in the before_footer hook with a priority that can be changed if needed. I've used this hook to keep all normal page output untouched with no interference, adding sidebars for example. I haven't used academys grid css , just reproduced the styles with a page-grid class for complete separation and future editing , example , you want to change the CSS for page grid only but leave the default theme post grid untouched.
The excerpt will pull the default wordpress limit (not the theme) - or you can add your own custom excerpts for each page in the new page 'excerpt' meta box
This only shows for pages with children , which is what we want. If a top level page has no child-pages it will display the page as normal. If you have a child of a child , it will show on the parent of that child.
CSS media queries behave the same as the default academy-grid
Add this to the functions.php of your child theme at the very end after the // Register widget areas code.
/**************************************************************************** * * CHILD PAGES DISPLAY * ****************************************************************************/ // Adding excerpt support for pages - for optional child-page-grid custom excerpt add_post_type_support( 'page', 'excerpt' ); add_action( 'genesis_before_footer', 'pl_show_academy_childpages', 15 ); function pl_show_academy_childpages() { global $post; if ( is_page( ) ) { $args = array( 'post_parent' => $post->ID, 'post_type' => 'page', 'orderby' => 'menu_order' ); $child_query = new WP_Query( $args ); // start ONLY if we have some childpages if ($child_query->have_posts()) { // if we have some children, display a wrap (required) echo '<div class="wrap">'; while ( $child_query->have_posts() ) : $child_query->the_post(); ?> <div class="page-grid" itemscope="" itemtype="https://schema.org/CreativeWork"> <header class="entry-header"> <a class="entry-image-link" href="<?php the_permalink(); ?>" aria-hidden="true" tabindex="-1"> <?php the_post_thumbnail('featured-image', ['class' => 'alignnone post-image entry-image']); ?> </a> <h2 class="entry-title" itemprop="headline"> <a class="entry-title-link" rel="bookmark" href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h2> <p class="entry-meta"> posted on <time class="entry-time" itemprop="datePublished"><?php the_date(); ?></time> </p> </header> <div class="entry-content" itemprop="text"><p><?php the_excerpt(); ?></p><p class="more-link-wrap"><a href="<?php the_permalink(); ?>" class="more-link button text">Continue Reading →</a></p> </div> </div> <?php endwhile; echo '</div>'; //Close the wrap } wp_reset_postdata(); } //END if (is_page()) } //end function pl_show_childpages //END Child Pages DisplayAdd this into your childtheme styles.css - add it after the Grid Entries css, somewhere around line 1950 - or anywhere in the style.css but that would be a good place for tidyness.
/* Child Page Grid Entries - child pages --------------------------------------------- */ .page-grid { float: left; margin: 0 1.666666% 30px; width: 30%; background-color: rgba(255, 255, 255, 0); border-radius: 10px; padding-bottom: 40px; transition: all 0.4s; padding-bottom: 30px; } .page-grid:nth-of-type(3n+1) { clear: left; } .page-grid .entry-header { margin-bottom: 24px; } .page-grid .entry-content p { margin-bottom: 12px; font-size: 18px; } .page-grid .entry-title { font-size: 26px; letter-spacing: -0.5px; margin: 40px 0 20px; } .page-grid .entry-title, .page-grid .entry-meta, .page-grid .entry-content { padding: 0 30px; text-align: center; } .page-grid:hover { background-color: rgba(255, 255, 255, 1); border-radius: 10px; box-shadow: 0 35px 70px 0 rgba(0, 0, 0, 0.12); transform: translateY(-5px); transition: all 0.4s; } @media only screen and (max-width: 1023px) { .page-grid { float: none; text-align: center; width: 100%; margin: 0 ; } }You'll need to edit or replace this entry in functions.php if you want to match heights. Replace it with the code below at or around line 73. We are only adding this at the end - .page-grid .entry-content
// Edited to add .page-grid .entry-content class wp_enqueue_script( 'academy-match-height', get_stylesheet_directory_uri() . '/js/jquery.matchHeight.min.js', [ 'jquery' ], CHILD_THEME_VERSION, true ); wp_add_inline_script( 'academy-match-height', "jQuery(document).ready( function() { jQuery( '.half-width-entries .content .entry, .academy-grid .content .entry,.page-grid .entry-content').matchHeight(); });" );Hope that gets what you want
Thank you so much!!!! Your kind effort highly appreciated.
I added everything, but here's how it looks:
What's missing? 🙂
how have you created/arranged the parent pages ? have you added a featured image to child pages ?
I can't help from just the front end , contact me and i'll take a look. It all works fine on my copy of Academy
You haven't' arranged the parent child pages correctly , you may also have a cache plugin running and the CSS is minified and the new entries are not added/showing , and finally no featured images.
Hey man, I just checked it. Apologies for the delay. It actually works great when I visit the page on a Private window. Thank you so much!! It's beautiful. I think it's just my browser cache serving the old CSS file or something.
How do I move it above the footer-cta widget tho? I tried after_content instead of before_footer but then it puts it inside the grey container. In other words, I want to flip the order of the grid/footer-cta.
Is there also an option to simply pull the meta description as the excerpt and get rid of that excerpt section? I feel it's redundant, because I just copy the meta description and paste in each page's excerpt anyway.
Thanks again, mate.
Highly appreciated.I mentioned that i added a priority that can be changed if needed , I've adjusted that in the code to put it above the CTA. Also , If you mean the genesis meta description - Change the code in functions to the code below , I've also removed page excerpt support , you don't need it.
/**************************************************************************** * * CHILD PAGES DISPLAY * ****************************************************************************/ add_action( 'genesis_before_footer', 'pl_show_academy_childpages', 5 ); function pl_show_academy_childpages() { global $post; if ( is_page( ) ) { $args = array( 'post_parent' => $post->ID, 'post_type' => 'page', 'orderby' => 'menu_order' ); $child_query = new WP_Query( $args ); // start ONLY if we have some childpages if ($child_query->have_posts()) { // if we have some children, display a wrap (required) echo '<div class="wrap">'; while ( $child_query->have_posts() ) : $child_query->the_post(); $description = get_post_meta( get_the_ID($child_page->ID), '_genesis_description', true ); ?> <div class="page-grid" itemscope="" itemtype="https://schema.org/CreativeWork"> <header class="entry-header"> <a class="entry-image-link" href="<?php the_permalink(); ?>" aria-hidden="true" tabindex="-1"> <?php the_post_thumbnail('featured-image', ['class' => 'alignnone post-image entry-image']); ?> </a> <h2 class="entry-title" itemprop="headline"> <a class="entry-title-link" rel="bookmark" href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h2> <p class="entry-meta"> posted on <time class="entry-time" itemprop="datePublished"><?php the_date(); ?></time> </p> </header> <div class="entry-content" itemprop="text"><p><?php echo $description ;?></p><p class="more-link-wrap"><a href="<?php the_permalink(); ?>" class="more-link button text">Continue Reading →</a></p> </div> </div> <?php endwhile; echo '</div>'; //Close the wrap } wp_reset_postdata(); } //END if (is_page()) } //end function pl_show_childpages //END Child Pages DisplayHi again Andy,
Is there any particular reason this snippet on the grid-layout.php..."function academy_get_default_grid_posts_per_page() { return 6; }...won't affect the child-pages display? I tried changing it to 12 to include all of the child pages, but it won't work. Cleared all cache as well of course.
Any idea? 🙂
- The forum ‘General Discussion’ is closed to new topics and replies.