Posted in wordpress
3118
1:40 am, April 17, 2018
 

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

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 -->
View Statistics
This Week
77
This Month
336
This Year
1177

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Articles
Search Articles by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Our brains are wired to find things we are looking for - if your always cynical or waiting for things to go wrong, then your life will reflect that. On the other hand, having a positive outlook on life will bring you joy and provide you with inspiration when you least expect it ☀️🍉🌴
Unknown
Random CSS Property

:left

The :left CSS pseudo-class, used with the @page at-rule, represents all left-hand pages of a printed document.
:left css reference