Home > Help Center > Applications > WordPress > Display WordPress Posts on Pages

Display WordPress Posts on Pages

If you look for information on how to display posts on a custom page, you will find mostly two types of answers:

  • The default WordPress option to create a static front page from Reading Settings screen.
  • To place a link in the navigation menu to a particular category - this way the template file category.php will generate a list of all posts in that category and one may think this is a static page with their own posts. Well, it's not.

wordpress display posts on pages

Of course, both methods are easily feasible without having to edit any existing code or create a new code.

But what do we do if we want to create a new page to display all posts from custom post type (CPT), for example?

That is what we will show you in this article.

In a previous taxonomy article, we showed you how you can easily create custom post type and associated taxonomies in your WordPress site just by copying the code from the article.

If you have not read the article or have not tested yet the code you can do it now.

Let's create a new page from Administration > Pages > Add New Page screen and name it Books Home Page without adding any content for now.

Because our custom post type is books it's easy to create a page Books and to duplicate the page slug with the custom post type slug so make sure they are different.

Publish the page.

Now let's add a link in the top menu to our new page:

  • Go to Appearance > Menus
  • Click on Pages panel
  • Select Books Home Page
  • Click Add to Menu button and drag the link to your desired position.
  • Click Save Menu

wordpress display posts on pages

If you are not sure how to create a menu in WordPress read our article WordPress Menus.

Now if we click on the menu link we'll see only the page title displayed by the default page template file page.php:

wordpress display posts on pages

Following the WordPress naming conventions and the information from our article WordPress Hierarchy we know we must create a new template file compatible with the custom post type - page-books-home.php.

Create the file and paste within the entire contents of page.php template. Delete everything between <main></main> tags and paste in the next code:

<?php 
$args = array(
    'post_type' => 'books'
);
// The Query
$the_query = new WP_Query( $args );
// The Loop
if ( $the_query->have_posts() ) {
  while ( $the_query->have_posts() ) {
    $the_query->the_post();
    get_template_part( 'template-parts/post/content', get_post_format() );
echo get_the_term_list( $post->ID, 'writers', '<ul class="cpt-style"><h3>Author:</h3><li>', ',</li><li>', '</li></ul>' );
echo get_the_term_list( $post->ID, 'genres', '<ul class="cpt-style"><h3>Genres:</h3><li>', ',</li><li>', '</li></ul>' );
  }
// Restore original Post Data
  wp_reset_postdata();
}
?>

The code is divided in two parts:

  • The first one says: display in reverse chronological order all posts with post type books.
  • The second part says: if there are taxonomies assigned to these posts display them in unordered lists.

Refresh the page - all three posts are now displayed with the corresponding taxonomies:

wordpress display posts on pages

All posts will be displayed in chronological order, from newest Posts at the top to oldest at the bottom.

But is there a way to create static content that will always stay at the top of the page - something like a page header or sticky content?

Let's create some content in our page (not new article in the Books custom post type).

Update the page but do not test in browser yet.

Open the template file page-books-home.php and paste just below the <main> opening tag the following code:

<?php 
// The Query
$args = array(  
    'page_id' => 287
);
$the_query = new WP_Query( $args );
// The Loop
if ( $the_query->have_posts() ) {
  while ( $the_query->have_posts() ) {
    $the_query->the_post();
    get_template_part( 'template-parts/post/content', get_post_format() );
  }
// Restore original Post Data
  wp_reset_postdata();
}
?>

The code simply says: display the content with ID 287.

If you wonder where we got the page_id go to Edit Page screen and click in the address bar:

wordpress display posts on pages

Open the Customizer and paste in the Additional CSS the next styles:

article:nth-of-type(1) {display:block; margin:0; border:1em solid #eee; padding: 1em;overflow:auto;
}
article:nth-of-type(2) {margin-top:5em
}

Now refresh the page:

wordpress display posts on pages

Conclusion

Using few simple steps we were able to customize our WordPress site and to add a dynamic content from CPT posts to our static page.

This information can help you to build even more dynamic websites because now you can design every single category as a micro site with its own custom post types and taxonomies.

This new structure will enable you to focus more precisely your keyword phrases around the taxonomy terms which doubtless will result in better search engine rankings.

Still not finding what you're looking for?

Contact our support team with any additional questions or concerns.

Contact support