this content was originally posted here.

Adding a template to wordpress to show a list of posts on a custom page template

TL;DR So i had a request the other day to add a blog to wordpress that had been converted to a promo site with a static front page.Sounds easy, well it is if you know how to add a template to wordpress...

So i had a request the other day to add a blog to wordpress that had been converted to a promo site with a static front page.

Sounds easy, well it is if you know how to add a template to wordpress.

Adding a template to your wordpress theme

You will need some kind of way to add files to your theme folder in wordpress via cpanel or ftp usually.

I added a file called blog.php with the following code.

<?php
/**
* The template for displaying all pages
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site may use a
* different template.
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package blank
*
* Template Name: Blog Posts
*
*/

get_header(); ?>

<div class='row'>

<div class='large-4 columns'>
<?php get_sidebar(); ?>
</div>
<div class='large-8 columns'>

<div id="primary" class="content-area">
<main id="main" class="site-main">

<?php
// the query
$wpb_all_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>-1)); ?>

<?php if ( $wpb_all_query->have_posts() ) : ?>


<!-- the loop -->
<?php while ( $wpb_all_query->have_posts() ) : $wpb_all_query->the_post(); ?>
<h1><a href="<?php the_permalink(); ?>" style='color: #ef5b00;'><?php the_title(); ?></a></h1>
<?php echo the_excerpt(); ?>
<?php endwhile; ?>
<!-- end of the loop -->


<?php wp_reset_postdata(); ?>

<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

</main><!-- #main -->
</div><!-- #primary -->

</div>

</div>


<?php

get_footer();

To Add a template all you need to do is add the following text into the header commented part of the php file. 

Template Name: Blog Posts

This will then show up when you edit the page in wordpress like the following:

Getting the list of all blog posts

This selects all of the posts from the blog

<?php 
$wpb_all_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>-1));
?>

Check if the query returns any results

if the query returns results start a loop to show each of the items

<?php if ( $wpb_all_query->have_posts() ) : ?>

The Loop

This will loop through each post and display the title with a link and the page summary. This uses the wordpress functions 

  • the_permalink() : which shows the wordpress generated page link
  • the_title() : The title of the post
  • the_excerpt() : A generated excerpt or summary of the post text
<!-- the loop -->
<?php while ( $wpb_all_query->have_posts() ) : $wpb_all_query->the_post(); ?>
<h1><a href="<?php the_permalink(); ?>" style='color: #ef5b00;'><?php the_title(); ?></a></h1>
<?php echo the_excerpt(); ?>
<?php endwhile; ?>
<!-- end of the loop -->