Editing the Loop Within Page Templates

I showed you the basics of creating a new page template in a previous post, but I did not cover creating page templates that include the use of the “Loop” within them. (See The WordPress codex explanation for the “Loop” if you are unsure of what that is.) This post will apply to those who would like to display a given number of recent posts on a static page. This is especially good for creating a splash page.

Creating Your Page Template

Step One: Copy Your Index PHP page. We’ll use the index.php page as our base since we want to display recent posts. So, open your index.php page and add the following just above the top of the code:

<?php
/*
Template Name: splash-page
*/
?>

Now, save it as splash-page.php (or whatever else you want to call it. Just be sure that you have “-page” in the name and that it matches the template name you added to the file so that WordPress recognizes it as a page template.

Step Two: Make Your Edits. Now that you’ve got your new page saved (so you don’t have to worry about messing up your index php page), you can edit it as desired. Let’s go through some possible edits you would want to make.

Limiting the Amount of Posts that Appear
The most common edit is to simply limit the amount of posts that appear on this page. This is a simple query function that will need to be placed before the loop. If you are using an Artisteer generated theme it will look something like the following:

Before Edits

<?php 
				if(have_posts()) {
					
					/* Start the Loop */ 

After Edits (just add one short line of code)

<?php 
				if(have_posts()) {
				query_posts('showposts=3');
					
					/* Start the Loop */ 

Notice that I chose to show just three posts. You can change the number as desired. To see other query function references you can choose, check out the WordPress Codex for Query Posts You’ll see in the Examples there are ways to include or exclude categories, etc.

You can see a working example from a recent site I worked on at http://www.pettitteam.org. This front page also contains a banner area with widget space for a slider and event calendar plugin. This was achieved through the use of conditional code within the header.php file. Basically I just wrapped the conditional code of if it’s the front page, then display these sidebars. View my post on using conditional code.

Creating a Double Loop
On a recent project, I not only needed to limit the amount of posts that showed on the front page, but I also wanted to show the actual content from chosen front page. See the example here. This example contains a top widget area displayed only on the front page through the Widget Logic plugin a tabbed content area in the page itself using the WP-UI plugin, and then the five most recent blog posts just beneath. In order to do this, I needed to create a double loop.

First, I simply made the edit shown above to select the number of posts that I wanted to appear on the home page.

Next, I added the following code, just above that code:

<?php 
				if(have_posts()) {
					
					/* Start the Loop */ 
					while (have_posts()) {
						the_post();
						get_template_part('content', 'page');
						/* Display comments */
						if ( theme_get_option('theme_allow_comments')) {
							comments_template();
						}
					}

				} else {
				
					 theme_404_content();
					 
				} 
		    ?>
<?php rewind_posts(); ?>

You should have two complete loops in your page template now. The important element is the last line of code from the first loop that tells WordPress to “rewind the posts” and start over fresh. That way, it doesn’t get confused.

Removing Post Navigation
Since this page is not the actual blog page, it’s a good idea to remove the navigation links on the home page. All you need to do is delete the following from the code:

/* Display navigation to next/previous pages when applicable */
					if ( theme_get_option('theme_' . (theme_is_home() ? 'home_' : '') . 'top_posts_navigation' ) ) {
						theme_page_navigation();
					}

as well as this code:

/* Display navigation to next/previous pages when applicable */
					if (theme_get_option('theme_bottom_posts_navigation')) {
						 theme_page_navigation();
					}
				
				} else {
				
					 theme_404_content();
					 
				} 

Additional Post Styling
Do you want your posts to appear differently than they do on a regular archive’s page? You can create a different styling by creating and calling to a new post content format. This is the line of code that you will want to edit.

get_template_part('content', get_post_format());

If you simply want the posts to appear without the meta icons, you can choose to call to the page format rather than the post format (so simply change the word “post” above to “page” and you are all set). If you want to style things even more, simply create a new content.php file and name it something like content-splash.php. So, now the code above would look like this:

get_template_part('content-splash', get_post_format());

Note, there are already several different post types available to choose from such as content-aside, content-gallery, content-attachment, so look through these first before creating your own.

Adding Your New Template

When you are happy with your edits to your template, upload the template file to your site’s theme folder. Then, go to the page you’d like to use it on and underneath the “Publish” button you should see a dropdown menu where you can choose your template from. Simply choose your newly created template from the list, and hit “Update” to start using your new template.

© 2012, reflectingthedesigner.com. All rights reserved.

January 15th, 2013 at 2:28 pm

I’m trying this codes in my site, I want to have all my posts to show in the homepage and have page numbers at the bottom ( it will be good if it looks like this sites homepage http://www.dramabeans.com). I’m using an artisteer theme in wordpress.
For any help that you can give me thank you very much.

if(have_posts() ) {

/* Start the Loop */
while (have_posts()) {
the_post();
get_template_part(‘content’, get_post_format());
}

?>

January 15th, 2013 at 2:31 pm

sorry it did not show complete.

if(have_posts() ) {

/* Start the Loop */
while (have_posts()) {
the_post();
get_template_part(‘content’, get_post_format());
}

?>

LEAVE A COMMENT

Powered by sweet Captcha

Anti-Spam Protection by WP-SpamFree