Wordpress

Display Blog Posts on any Page (with navigation)

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 specified 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 xy.css blog while using a static (post-less) home page. It’s nice because post-navigation works intuitively, like so:

As you can imagine, this is super-useful when setting up custom CMS configurations, 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.

Step 1: Page template

Create a blank page template named “page-blog.php” and include the following code:

<?php 
/*
	Template Name: Blog
*/
?>
<?php get_header(); ?>

	<article>

		<?php // Display blog posts on any page @ http://m0n.co/l
		$temp = $wp_query; $wp_query= null;
		$wp_query = new WP_Query(); $wp_query->query('showposts=5' . '&paged='.$paged);
		while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

		<h2><a href="<?php the_permalink(); ?>" title="Read more"><?php the_title(); ?></a></h2>
		<?php the_excerpt(); ?>

		<?php endwhile; ?>

		<?php if ($paged > 1) { ?>

		<nav id="nav-posts">
			<div><?php next_posts_link('&laquo; Previous Posts'); ?></div>
			<div><?php previous_posts_link('Newer Posts &raquo;'); ?></div>
		</nav>

		<?php } else { ?>

		<nav id="nav-posts">
			<div><?php next_posts_link('&laquo; Previous Posts'); ?></div>
		</nav>

		<?php } ?>

		<?php wp_reset_postdata(); ?>

	</article>

<?php get_footer(); ?>

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 first 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 page-blog.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 configuring WordPress as a customized CMS.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s