Posted in wordpress
3055
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
354
This Year
1114

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
All of humanity's problems stem from man's inability to sit quietly in a room alone, wrote Blaise Pascal.
Unknown
Random CSS Property

::backdrop

The ::backdrop CSS pseudo-element is a box the size of the viewport which is rendered immediately beneath any element being presented in fullscreen mode. This includes both elements which have been placed in fullscreen mode using the Fullscreen API and <dialog> elements.
::backdrop css reference