8/20/2016

DisplayBlogPostsonanyPage(withnavigation)|DiggingIntoWordPress

Book

Blog

Themes

Sign In

by Chris Coyier & Je Starr

BitNami Stack for WordPress

Browser Detection WordPress Plugin

Display Blog Posts on any Page (with navigation)

Posted by Je Starr on January 12th, 2013

By default, your latest WordPress posts are displayed on the home page,
with older posts available via post navigation on /page/2/ , /page/3/ , and
so on. In this DigWP post, we'll explain how to display your blog posts
on any static page using a custom WP_Query loop that works beautifully
with post navigation.
For example, if you're displaying a static page for your front page (as
specied in the Reading Settings), you may want to display your blog posts separately, perhaps on
a custom "blog" page. That's what I ended up doing for the blog at jjjstarr.com while using a
static (post-less) home page. It's nice because post-navigation works intuitively, like so:
http://jjjstarr.com/blog/ -- displays latest blog posts
http://jjjstarr.com/blog/page/2/ -- displays second page of posts
http://jjjstarr.com/blog/page/3/ -- displays third page of posts

..etc..
As you can imagine, this is super-useful when setting up custom CMS congurations, for example
when using the home page as a forum, storefront, or landing page. For such scenarios, here's how
to display blog posts on a custom page (with navigation!).
Update! almost immediately after this article posted, Brian Krogsgard explains an even easier way:
create two pages and then set one as the "front page" and the other as the "posts page" via
Reading Settings. The method here may be useful for further customization (via query
parameters), but using the settings-only method is a better way to do it.
https://digwp.com/2013/01/displayblogpostsonpagewithnavigation/

1/4

8/20/2016

DisplayBlogPostsonanyPage(withnavigation)|DiggingIntoWordPress

Step 1: Page template

Create a blank page template named pageblog.php and include the following code:

<?php
/*

TemplateName:Blog

*/
?>
<?phpget_header();?>

<article>

<?php//Displayblogpostsonanypage@http://m0n.co/l

$temp=$wp_query;$wp_query=null;

$wp_query=newWP_Query();$wp_query>query('showposts=5'.'&paged='.$paged);

while($wp_query>have_posts()):$wp_query>the_post();?>

<h2><ahref="<?phpthe_permalink();?>"title="Readmore"><?phpthe_title();?></a></h2>

<?phpthe_excerpt();?>

<?phpendwhile;?>

<?phpif($paged>1){?>

<navid="navposts">

<divclass="prev"><?phpnext_posts_link('&laquo;PreviousPosts');?></div>

<divclass="next"><?phpprevious_posts_link('NewerPosts&raquo;');?></div>

</nav>

<?php}else{?>

<navid="navposts">

</nav>

<?php}?>

<?phpwp_reset_postdata();?>

</article>

<divclass="prev"><?phpnext_posts_link('&laquo;PreviousPosts');?></div>

<?phpget_footer();?>

https://digwp.com/2013/01/displayblogpostsonpagewithnavigation/

2/4

8/20/2016

DisplayBlogPostsonanyPage(withnavigation)|DiggingIntoWordPress

That's the money shot, just plug it in and take charge with your own parameters for WP_Query
and you're all set. For example, instead of showing 5 posts, you can set showposts=10 or whatever
works best.
Note that the post-navigation is conditional, such that the rst page of posts (i.e., your /blog/
page) doesn't display empty markup/styles for the "next posts" link. Learn more about optimizing
WordPress post navigation.
Note also that the HTML used in this example is rudimentary to keep things simple. You'll
probably need to make a few changes to the markup to synchronize with your theme design.

Step 2: Add New Page

Once pageblog.php is complete and uploaded to the server, log in to the WP Admin and visit the
Add New Page screen. There, create a new page named "Blog" (or whatever you want), and set its
Template as "Blog" from the "Page Attributes" panel.
Done! Now visit the Blog page after publishing and you should see the custom WP_Query loop
working its magic: your latest blog posts will be displayed on the page along with navigation to
previous posts, if they exist ;)

Wrap-up
WordPress makes it easy to display your blog posts just about anywhere. In this post, we explain
how to display posts on any page using a custom WP_Query loop that supports post navigation,
which can be super-useful when conguring WordPress as a customized CMS.

Possibly related
Limit WordPress Post Navigation to Same Author and Category
3 Ways to Reset the WordPress Loop
4 Ways to Loop with WordPress
Thumbnail Based Archives
Next/Previous Post Navigation Outside of the WordPress Loop
WordPress Custom functions.php Template, Part 2
WordPress functions.php Template with 15 Essential Custom Functions

https://digwp.com/2013/01/displayblogpostsonpagewithnavigation/

3/4

8/20/2016

DisplayBlogPostsonanyPage(withnavigation)|DiggingIntoWordPress

Share this article

Tweet

https://digwp.com/2013/01/displayblogpostsonpagewithnavigation/

Like 6

4/4