A common practice when setting up a Wordpress blog might be to create a page and display posts in a certain category on that page. This causes some pages to act very much like category pages.
The first step in creating a page of posts is to create a page template that can be used by the pages. Create a file in your template directory called pageofposts.php and put the following comment in it.
<?php
/**
* Template Name: PageOfPosts
*/
This will cause it to be displayed in the Template drop down on your Wordpress page admin. This isn't going to do a lot so lets add some other functionality. Add the following lines to include everything you need to create a blank Wordpress page.
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Between the get_sidebar() and get_footer() functions add the next code snippet. This basically constructs a query that will be used to get the correct posts from the database. The first if statement is used to detect which page the user has landed on. You will need to hand code this part, but it shouldn't be too difficult. Essentially, the is_page() function returns true if the value passed to it is the id of the current page. The $cat variable is then filled with an array containing the categories to show, this can be a single category or multiple. This is then added to an $args array, which is used to create a new WP_Query object after a simple if statement to detect if we are looking at a page.
<?php
if ( is_page('15') ) {
$cat = array(3);
} elseif ( is_page('20') ) {
$cat = array(4);
} elseif ( is_page('32') ) {
$cat = array(5, 7);
} else {
$cat = '';
}
$args = array(
'category__in' => $cat,
'caller_get_posts' => 1
);
if ( $paged > 1 ) {
$args['paged'] = $paged;
}
$my_query = new WP_Query($args); ?>
The $paged variable contains an integer of the page number we are currently looking at and is set up by Wordpress. Basically, if the $paged variable is greater than 1 we need to include this in the query.
One thing you can include here is to print out the contents of the page you are currently looking at. This following code prints this out.
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
Next we include some code to detect if any posts have been found, and if so, we loop through them and pick out the information for each post. This is a standard Wordpress "The Loop" and can be copied from any other page on your site. Just be sure that you use the $my_query object to call have_posts() as without it the function will return information about the page we are looking at and not the posts we are interested in. The functions have_posts() and the_post() simply run the same function for the global WP_Query object, which is contained in the $wp_query variable. Essentially, they are a short-cut to calling $wp_query->have_posts().
<?php if ( $my_query->have_posts() ) : ?>
<?php while ( $my_query->have_posts() ) :
$my_query->the_post(); ?>
<?php
//necessary to show the tags
global $wp_query;
$wp_query->in_the_loop = true;
?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
</div>
<?php endwhile; ?>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form(); ?>
<?php endif; ?>
There is one thing missing here and that is pagination controls, commonly called next and previous links. This is because they require special consideration due to the fact that the normal functions involved in creating these links (next_posts_link() and previous_posts_link()) only look at the currently held WP_Query object, which in this case contains our page and not the posts we want to navigate through. Copy the following code into the previous block of code, just after the endwhile line.
<div class="navigation">
<div class="alignleft"><?php
if ( !$max_page ) {
$max_page = $my_query->max_num_pages;
}
if ( !$paged ) {
$paged = 1;
}
$nextpage = intval($paged) + 1;
if ( !is_single() && ( empty($paged) || $nextpage <= $max_page) ) {
$attr = apply_filters( 'next_posts_link_attributes', '' );
echo '<a href="' . next_posts( $max_page, false ) . "\" $attr>". preg_replace('/&([^#])(?![a-z]{1,8};)/', '&$1', '« Older Entries') .'</a>';
}
?></div>
<div class="alignright"><?php
if ( !is_single() && $paged > 1 ) {
$attr = apply_filters( 'previous_posts_link_attributes', '' );
echo '<a href="' . previous_posts( false ) . "\" $attr>". preg_replace( '/&([^#])(?![a-z]{1,8};)/', '&$1', 'Newer Entries »' ) .'</a>';
}
?></div>
</div>
Upload all of this code to your content directory and you are ready to go. Every time you want to create a page that shows a bunch of posts just create the page using the Page Of Posts template and make sure that the if statement at the top of the file catches the page and selects the posts from the correct category.
This template is also a good example of how the WP_Query object works and how to create new queries on the page without overriding the currently retrieved items.
Comments
div.hentry {clear:both}Or even on the h2 tag just underneath it. I have tried both methods in firebug and they appear to work.
thanks so much for the detailed explanation! ive been trying to do this for a long time but with no success. At first your instructions werent working for me (possible due to my theme), but I found that I needed to add <?php?> to the 3rd box of code (above): $cat, 'caller_get_posts' => 1 ); if ( $paged > 1 ) { $args['paged'] = $paged; } $my_query = new WP_Query($args); ?>
As the second person to comlpain about the <?php ?> tags I have updated the post to include it. Glad you liked it! :)
This is exactly what I want to do. Unfortunately I have zero experience with coding. Does this only work by writing code? If not, could you point me to an explanation of how to do this using the visual editor? Thanks much from one very, very new to Wordpress!
I dont know PHP, i just plugged this in and tweaked a few things and it just worked. Awesome. Thanks so much!
Dear Philip, above there you have shared a great code-base knowledge indeed, for a half-part it's working, but at the end of post, "next and previous post" sections in my page of post still linked to my Home (main) page ...
I have made template page as your instrustions like this (your code suggestion was customized to suit with my blog-template):
<!--?php
/**
*Template Name: best-deals-guide
*/
?-->
<!--?php get_header(); ?-->
</pre>
<div class="grid_8" role="main"><!--?php
if ( is_page('1823') ) {
$cat = array(3);
} else {
$cat = '';
}
$args = array(
'category__in' =-->$cat, 'caller_get_posts' => 1 ); if ( $paged > 1 ) { $args['paged'] = $paged; } $my_query = new WP_Query($args); ?>; <!--?php if ( $my_query--->have_posts() ) : ?> <!--?php while ( $my_query--->have_posts() ) : $my_query->the_post(); ?> <!--?php
//necessary to show the tags
global $wp_query;
$wp_query--->in_the_loop = true; ?>
<div class="grid_2 alpha mita"><!--?php
if ( has_post_thumbnail() ):
if(get_option('thumbnail_size_w') -->138 && get_option('thumbnail_crop') == 1) { the_post_thumbnail(array(138,138)); echo "<br />
"; }else{ the_post_thumbnail('thumbnail'); echo "<br />
"; } endif; ?> <span><!--?php the_time('F jS, Y') ?--><br />
in <!--?php the_category(', ') ?--> category <!--?php edit_post_link('e', ' [', '] '); ?--></span>
<hr />
<div class="grid_2 alpha"><script type="text/javascript"><!--
google_ad_client = "pub-1883611094826455";
/* 120x600, created 3/10/11 */
google_ad_slot = "4391337471";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script><script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
</div>
<div class="grid_6 omega">
<div>id="post-<!--?php the_ID(); ?-->">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><!--?php the_title(); ?--></a></h2>
<div class="entry"><!--?php the_content('+ Continue Reading'); ?--></div>
<!--?php if(function_exists('stt_terms_list')) echo stt_terms_list() ;?-->
<p class="postmetadata"><!--?php the_tags('Tags: ', ', ', '<br /-->'); ?> <!--?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?--></p>
</div>
<!--?php endwhile; ?--><!--?php else : ?-->
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<div class="navigation">
<div class="alignleft"><!--?php
if ( !$max_page ) {
$max_page = $my_query--->max_num_pages; } if ( !$paged ) { $paged = 1; } $nextpage = intval($paged) + 1; if ( !is_single() && ( empty($paged) || $nextpage <= $max_page) ) { $attr = apply_filters( 'next_posts_link_attributes', '' ); echo '<a href="' . next_posts( $max_page, false ) . ">". preg_replace('/&([^#])(?![a-z]{1,8};)/', '&$1', '« Older Entries') .'</a>'; } ?></div>
<div class="alignright"><!--?php
if ( !is_single() && $paged -->1 ) { $attr = apply_filters( 'previous_posts_link_attributes', '' ); echo '<a href="' . previous_posts( false ) . ">". preg_replace( '/&([^#])(?![a-z]{1,8};)/', '&$1', 'Newer Entries »' ) .'</a>'; } ?></div>
</div>
<!--?php endif; ?--></div>
</div>
<!--?php get_sidebar(); ?--><!--?php get_footer(); ?-->
but still, my best-deals-guide's page of post, in the end, linked to my home (main) page. I have tried this code in my localhost server. But next if i succeed (and big big hope you kindly help me) i'll be show it up in my live blog www.bestdealscomputers.net
Can you tell me what is going on?
thanks
I think there are a couple of issues with the code you have posted that might point you in the right direction.
The first is that you have added your pagination display links outside of The Loop, which means there is no context for the link functions to look at when creating the URL.
Also, your pagination is displayed in the section that is printed if no pages are found. I'm not sure if this is what you are trying to do, but it might be causing you some issues?
Hello Philip, thank you very much for your attention, you really have very much helped me ... page that dream has been live on my blog, look at this... haha.
Yes indeed it was actually copy-paste from cNet, but the important thing I want to show you, that all I have carried out your instructions ... and the results are wonderful.
But there is little problem, when i'm in page Best Deals Guide, then follow the post title-link (according to me, it means entering into the single post page) ... in it, the pagination section still showing previous post in main page (that means also still bring up a link to a post from another category).
I have a few more questions, if you do not mind,
- Can it be, when entered into the single post page, the pagination does not create a link previous post from the main page (which is actually from another category). Here I show the code from my blog, single.php file
<?php
get_header();
?>
<div class="grid_8" role="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<div class="grid_2 alpha mita">
<?php
if ( has_post_thumbnail() ):
if(get_option('thumbnail_size_w') > 138 && get_option('thumbnail_crop') == 1) {
the_post_thumbnail(array(138,138));
echo "<br />";
}else{
the_post_thumbnail('thumbnail');
echo "<br />";
}
endif;
?>
<span><?php the_time('F jS, Y') ?><br />By <?php the_author() ?> Posted in <?php the_category(', ') ?> <?php edit_post_link('e', ' [', '] '); ?></span>
<br class="clear" />
<hr />
<div class="grid_2 alpha">
<script type="text/javascript"><!--
google_ad_client = "pub-1883611094826455";
/* 120x600, created 3/10/11 */
google_ad_slot = "4391337471";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
<div class="grid_6 omega">
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_content('<p class="serif">Read the rest of this entry »</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
<div class="postmetadata alt">
<div class="sharer">
<span class="febe">
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</span>
<span class="meme">
<script type="text/javascript">
tweetmeme_url = '<?php the_permalink() ?>';
tweetmeme_source = 'WPTricksNet';
tweetmeme_service = 'bit.ly';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</span>
</div>
<?php the_tags( '<span>Tags: ', ', ', '</span><br />'); ?>
<?php if ( comments_open() && pings_open() ) {
// Both Comments and Pings are open ?>
You can <a href="#respond">leave a response</a>,<br />or <a href="<?php trackback_url(); ?>" rel="trackback">trackback</a> from your own site.
<?php } elseif ( !comments_open() && pings_open() ) {
// Only Pings are Open ?>
Responses are currently closed, but you can <a href="<?php trackback_url(); ?> " rel="trackback">trackback</a> from your own site.
<?php } elseif ( comments_open() && !pings_open() ) {
// Comments are open, Pings are not ?>
You can skip to the end and leave a response. Pinging is currently not allowed.
<?php } elseif ( !comments_open() && !pings_open() ) {
// Neither Comments, nor Pings are open ?>
Both comments and pings are currently closed.
<?php } edit_post_link('Edit this entry','','.'); ?>
</div>
</div>
<div class="clear"></div>
<div class="navigation">
<div class="alignleft">
<?php previous_post_link('<span>previous</span>%link') ?>
</div>
<div class="alignright">
<?php next_post_link('<span>next</span>%link') ?>
</div>
</div>
<br class="clear" />
</div>
</div>
<?php comments_template('', true); ?>
<?php endwhile; else: ?>
<p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
- Can it be, when entered into the Best Deals Guide Page, its pagination using plugin WP-PageNavi (which can make the display of pagination more beautiful)
- Can it be, category Deals Guide that appear in the list of categories on the right sidebar is hidden, because the contents of that category has been entered into the Best Deals Guide page, so if the situation remains as it is now, is a bit confusing: the same content in two different positions.
Philip, Thank you so much if you can help, and I apologize if I have a lot of hassle you.
NB: Here is the code Best Deals Guide page template that I have revised according to your advice
<?php
/**
*Template Name: best-deals-guide
*/
?>
<?php get_header(); ?>
<div class="grid_8" role="main">
<?php
if ( is_page('1837') ) {
$cat = array(680);
} else {
$cat = '';
}
$args = array(
'category__in' => $cat,
'caller_get_posts' => 1
);
if ( $paged > 1 ) {
$args['paged'] = $paged;
}
$my_query = new WP_Query($args); ?>
<?php if ( $my_query->have_posts() ) : ?>
<?php while ( $my_query->have_posts() ) :
$my_query->the_post(); ?>
<?php
//necessary to show the tags
global $wp_query;
$wp_query->in_the_loop = true;
?>
<div class="grid_2 alpha mita">
<?php
if ( has_post_thumbnail() ):
if(get_option('thumbnail_size_w') > 138 && get_option('thumbnail_crop') == 1) {
the_post_thumbnail(array(138,138));
echo "<br />";
}else{
the_post_thumbnail('thumbnail');
echo "<br />";
}
endif;
?>
<span><?php the_time('F jS, Y') ?><br />in <?php the_category(', ') ?> category <?php edit_post_link('e', ' [', '] '); ?></span>
<br class="clear" />
<hr />
<div class="grid_2 alpha">
<script type="text/javascript"><!--
google_ad_client = "pub-1883611094826455";
/* 120x600, created 3/10/11 */
google_ad_slot = "4391337471";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
<div class="grid_6 omega">
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_content('+ Continue Reading'); ?>
</div>
<?php if(function_exists('stt_terms_list')) echo stt_terms_list() ;?>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></p>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php
if ( !$max_page ) {
$max_page = $my_query->max_num_pages;
}
if ( !$paged ) {
$paged = 1;
}
$nextpage = intval($paged) + 1;
if ( !is_single() && ( empty($paged) || $nextpage <= $max_page) ) {
$attr = apply_filters( 'next_posts_link_attributes', '' );
echo '<a href="' . next_posts( $max_page, false ) . "\" $attr>". preg_replace('/&([^#])(?![a-z]{1,8};)/', '&$1', '« Older Entries') .'</a>';
}
?></div>
<div class="alignright"><?php
if ( !is_single() && $paged > 1 ) {
$attr = apply_filters( 'previous_posts_link_attributes', '' );
echo '<a href="' . previous_posts( false ) . "\" $attr>". preg_replace( '/&([^#])(?![a-z]{1,8};)/', '&$1', 'Newer Entries »' ) .'</a>';
}
?></div>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php endif; ?>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Thank you for your tutorial, it's help me a lot. Cheers.
is there ant plugin for this,i actually need pages in posts
looking if some one help me
thank you
Why can't this be made into a plugin? I'm very new to code and wish someone would make a simple plugin since it's been figured out for so long.
Spent a few nights serching for this solution. I'm working with a small scale ecommerce site that necesitated creating product pages with items to add to a cart and also include yummy client accessable SEO content. I looked at category templates as an alternative but then how to include the client accesable content? Well back to my original search and FINALLY this page pops up in my SERPs. Thank you very much, now I can get back to my build
How could you get the posts to output alphabetically instead of chronologically?
The WP_Query object constructor takes a few arguments, one of which is the order and orderby parameters. Basically, what you need to do is this:
$args['orderby'] = 'title'; $args['order'] = 'ASC'; $my_query = new WP_Query($args);
This page on the codex should help you out:
http://codex.wordpress.org/Class_Reference/WP_Query#Order_.26_Orderby_Parameters
thank you!
like a few others said, I couldn't find anyone to explain the code, but it worked for my page of posts. THX
I just wanted to say thank you SO much. I was having an issue with the same posts pulling up on a custom blog template. Your code came at just the right moment. Cannot say thank you enough!
Hi,
I'm really new so please be patient. I sort of have this working but I have issues:
1. The posts are showing on the page that I want them to show on but they are also showing on the main blog page. I just want them on the /blog/recipes page
2. The pagination is not showing up at all. To be honest I'm not really sure what 'The Loop' is.
3. I am using a plugin for user-submitted posts and so the posts are appearing way down the page.
Any help you can offer would be greatly appreciated
<?php
/**
*Template Name: PageOfPosts
*/
?>
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php
if ( is_page('47') ) {
$cat = array(5);
} else {
$cat = '';
}
$args = array(
'category__in' => $cat,
'caller_get_posts' => 1
);
if ( $paged > 1 ) {
$args['paged'] = $paged;
}
$my_query = new WP_Query($args); ?>
<?php if $my_query->(have_posts()) : while $my_query->(have_posts()) : $my_query->the_post(); ?>
<?php
//necessary to show the tags
global $wp_query;
$wp_query->in_the_loop = true;
?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
<?php if ( $my_query->have_posts() ) : ?>
<?php while ( $my_query->have_posts() ) :
$my_query->the_post(); ?>
<?php
//necessary to show the tags
global $wp_query;
$wp_query->in_the_loop = true;
?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php
if ( !$max_page ) {
$max_page = $my_query->max_num_pages;
}
if ( !$paged ) {
$paged = 1;
}
$nextpage = intval($paged) + 1;
if ( !is_single() && ( empty($paged) || $nextpage <= $max_page) ) {
$attr = apply_filters( 'next_posts_link_attributes', '' );
echo '<a href="' . next_posts( $max_page, false ) . "\" $attr>". preg_replace('/&([^#])(?![a-z]{1,8};)/', '&$1', '« Older Entries') .'</a>';
}
?></div>
<div class="alignright"><?php
if ( !is_single() && $paged > 1 ) {
$attr = apply_filters( 'previous_posts_link_attributes', '' );
echo '<a href="' . previous_posts( false ) . "\" $attr>". preg_replace( '/&([^#])(?![a-z]{1,8};)/', '&$1', 'Newer Entries »' ) .'</a>';
}
?></div>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form(); ?>
<?php endif; ?>
<?php get_footer(); ?>
I managed to fix the first issue and I have figured out an acceptable work around for the 3rd issue. I still can't get the pagination to show up. Any help would be appreciated.
Thank you! :)
Hello,
Thanks again for constructing this guide. One quick question for you.
Is there a quick line of code that can excude a specific category from the main blog page so that I can utilize your above code to parse it out to the category specific pages and not repeat the content throughout my site?
Thanks to you, I'm almost there!
Cheers,
-B
This is perfect, thank you so much for sharing this.