This example is quite similar to the previous example with Page of posts with two columns. However in this case we are going to use child pages instead of posts, and than show them in two columns. Again we are using Twenty Thirteen Theme as an example, for other themes you should adopt css and html…
First of all create the file page_of_childpages_two_columns.php inside of our theme folder.
Change template name to “Template Name: Page Of Child Pages Two Columns” or whatever u like (don’t forget about this, it will be shown later as a template name in page administration).
Again first loop is default Twenty Thirteen Page source code (page.php) with some custom modification.
<?php /* Template Name: Page Of Child Pages Two Columns */ /* This example is for a child theme of Twenty Thirteen: * You'll need to adapt it the HTML structure of your own theme. */ get_header(); ?> <div id="primary" class="content-area"> <div id="content" class="site-content" role="main"> <?php /* The loop */ while ( have_posts() ) : the_post(); ?> <div class="archive-header"> <h1 class="archive-title"><?php printf( __( '%s', 'twentythirteen' ), the_title( '', false ) ); ?></h1> </div><!-- .archive-header --> <header class="entry-header"> <?php if ( has_post_thumbnail() && ! post_password_required() ) : ?> <div class="entry-thumbnail"> <?php the_post_thumbnail(); ?> </div> <?php endif; ?> </header><!-- .entry-header --> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?> <?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- .entry-content --> <?php endwhile; ?> |
Than we need to add some extra code which will select child pages we wanna show and also give as an option to choose posts per page (in this case ‘posts_per_page’ => 4). change 4 to number of posts you wanna show on page
After that we will add second loop which will use our desired settings and show child pages in two columns. We will finish the whole thing with get_sidebar and get_footer.
<!-- Start Code child pages --> <?php $postIDs = array(); $pageChildren = get_pages('child_of=' . $post->ID /*. '&exclude=' . $exclude_page*/ ); if ( $pageChildren ) { foreach ( $pageChildren as $pageChild ) { $postIDs[] = $pageChild->ID; } $paged = (intval(get_query_var('paged'))) ? intval(get_query_var('paged')) : 1; $args = array( 'post_type' => 'page', 'paged' => $paged, 'post__in' => $postIDs, 'posts_per_page' => 4 ); query_posts($args); ?> <?php $col = 1; ?> <article> <div class="entry-content"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <?php if ($col == 1) echo '<div class="entry-content-two-columns-row">'; ?> <div class="post col<?php echo $col;?>" id="post-<?php the_ID(); ?>"> <h2 class="entry-title-medium"> <a href="<?php echo get_permalink(); ?>" rel="bookmark" title="<?php echo $pageChild->post_title; ?>"> <?php the_title(); ?></a> </h2> <div class="entry-thumbnail-medium"> <?php the_post_thumbnail(''); ?> </div> <div class="excerpt"> <?php the_excerpt(); ?> </div> <div class="entry-meta"> <?php wp_link_pages(array('before' => '<p>Pages: ', 'after' => '</p>', 'next_or_number' => 'number')); ?> </div> </div> <?php if ($col == 1) echo '</div>'; (($col==1) ? $col=2 : $col=1); endwhile; wp_reset_postdata(); endif;}?> <!-- End Code child pages --> </div> <!-- entry_content --> </article> <?php twentythirteen_paging_nav(); ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?> |
Save page_of_childpages_two_columns.php and open style.css.
We need to add some custom style, you should add this code to your style.css, somewhere at the end but before media queries.
/* Template Name: Page Of Posts Two Columns */ .entry-thumbnail-medium img { float:left!important; margin-bottom:10px; margin-right:10px; margin-left:0px; max-width:100%; } h2.entry-title-medium { font-size: 28px; margin: 0px 0px 10px; } .entry-title-medium a { color: #000; font-weight:normal; } .entry_content_medium { margin-top:0px; margin-bottom:0px; padding-top:0px; } .entry-content-two-columns-row { clear: both; } .col1 { max-width: 50%; float: left; padding: 0px 15px 0px 0px; } .col2 { max-width: 50%; float: right; padding: 0px 0px 0px 15px; } |
For small screen sizes add this line to the end or integrate it inside existing @media width rule.
@media (max-width: 643px) { /* Template Name: Page Of Posts Two Columns */ .col1 { max-width: 100%!important; float: none; } .col2 { max-width: 100%!important; float: none; padding: 0px; } } |
Now we are finished, we need to add two more functions inside functions.php file (if you didn’t already added with past tutorial ), limit excerpt size and show Read more text instead of […].
// Add custom excerpt lenght if ( ! function_exists( 'mywp_custom_excerpt_length' ) ) { function mywp_custom_excerpt_length( $length ) { return 32; } add_filter( 'excerpt_length', 'mywp_custom_excerpt_length', 999 ); } // Add read more to custom pages if ( ! function_exists( 'mywp_new_excerpt_more' ) ) { function mywp_new_excerpt_more( $more ) { return ' <a class="read-more" href="'. get_permalink( get_the_ID() ) . '">' . __('Read More', 'twentythirteen') . '</a>'; } add_filter( 'excerpt_more', 'mywp_new_excerpt_more' ); } |
That’s it with the coding, now go back to your dashboard / Pages and add a new page, call it as you want. Than add some text if you want, if not nothing will be shown. From the right side under Page Attributes / Template Choose your new template – Page Of Child Pages Two Columns, save and close the page. Than create your child pages as a child pages of a page you created earlier, save and close…
