Posted in wordpress
174
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
135
This Month
396
This Year
1542

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...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

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
"Let us prepare our minds as if we'd come to the very end of life. Let us postpone nothing. Let us balance life's books each day ... The one who puts the finishing touches on their life each day is never short of time."
Seneca
Random CSS Property

overflow-inline

The overflow-inline CSS property sets what shows when content overflows the inline start and end edges of a box. This may be nothing, a scroll bar, or the overflow content.
overflow-inline css reference