Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Portfolio Template using Static Child Pages
<?php
/**
* The template used for displaying portfolio items.
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<a href="<?php the_permalink(); ?>" rel="bookmark">
<?php the_post_thumbnail( 'medium' ); ?>
</a>
<header class="entry-header">
<?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
</header>
</article>
/**
* Displays static pages in a grid layout.
*/
function theme_slug_child_page_grid() {
// Get current page ID.
$page_id = get_the_ID();
// Get Child Pages from Database.
$query_arguments = array(
'post_type' => 'page',
'post_parent' => (int) $page_id,
'posts_per_page' => -1,
'no_found_rows' => true,
'orderby' => 'menu_order title',
'order' => 'ASC',
);
$portfolio_query = new WP_Query( $query_arguments );
// Check if there are child pages.
if ( $portfolio_query->have_posts() ) : ?>
<div class="child-page-grid">
<?php while ( $portfolio_query->have_posts() ) : $portfolio_query->the_post();
get_template_part( 'template-parts/content', 'portfolio' );
endwhile; ?>
</div>
<?php
endif;
// Reset Postdata.
wp_reset_postdata();
}
/*======================================
Theme Name: TwentySixteen Child
Description: Child Theme of TwentySixteen
Version: 1.0
Author: ThemeZee
Author URI: http://themezee.com
Template: twentysixteen
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
======================================*/
/* You can start adding your own styles here. Use !important to overwrite styles if needed. */
.child-page-grid {
display: flex;
flex-wrap: wrap;
margin-right: -2em;
}
.child-page-grid .type-page {
width: 33.33333333333%;
box-sizing: border-box;
padding-right: 2em;
padding-bottom: 2em;
}
.child-page-grid .type-page .entry-title {
margin: 1em 0 0;
font-size: 20px;
font-size: 1.25rem;
}
<?php
/**
* Template Name: Portfolio
*
* @package Twenty Sixteen Child
*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
// Start the loop.
while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header><!-- .entry-header -->
<?php twentysixteen_post_thumbnail(); ?>
<div class="entry-content">
<?php
the_content();
// Display Portfolio.
theme_slug_child_page_grid();
?>
</div><!-- .entry-content -->
</article>
<?php
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
// End of the loop.
endwhile;
?>
</main><!-- .site-main -->
<?php get_sidebar( 'content-bottom' ); ?>
</div><!-- .content-area -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.