The Loop

Welcome to this lesson where we dive into the mechanism WordPress uses to output posts on a page.

How is the loop used within a theme?

It all starts with the desire to display posts within a page using a theme’s template file.

For example, here we’re looking at a template file for an archive page of a portfolio theme. The loop extracts the data for each post from the WordPress database and inserts the appropriate information in place of each template tag, for example, the title and the excerpt of the post.

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        // Display post content
    endwhile;
endif;
?>

Any HTML or PHP code in the loop will be processed for each post. To put it simply, the loop is true to its name. It loops through each post retrieved for the current page one at a time and performs the actions specified in your theme.

What can the Loop display?

Let’s now take a look at some examples of what the loop can display.

Here we’re looking at a demo site for the Twenty Seventeen theme, which is a classic theme, and they’ve used the loop to display blog posts. This is a blog homepage, and for each of the posts, we see metadata, the post title, the featured image, and the excerpt.

Other examples of using the loop include listing comments on a single post and also pulling data from custom post types and custom fields, which is what we’re going to look at next.

Custom Post Types and Custom Fields

In our next example, we’re going to take a look at a portfolio theme that has the custom post type portfolio, and we’re going to use the loop in order to display the portfolio posts and include a custom field.

So let’s get started.

Here we’re looking at the portfolio posts. Each post has a post title, a project brief, and a featured image.

Let’s take a look at one of these posts in the WordPress dashboard.

In this post, on the right, we see taxonomy for skills and tools, and at the bottom, we see the project brief custom field.

Let’s now take a look at how this was done.

<?php
if ( have_posts() ) : 
	while ( have_posts() ) : the_post();?>
		<div class="cm-post-list mb-5">
			<a href="<?php the_permalink(); ?>"><h2><?php the_title(); ?></h2></a>
			<?php
			if ( ! has_excerpt() ) {
				echo '';
			} else { 
				the_excerpt();
			}?>
			<?php $project_info = get_post_meta( get_the_ID(), 'catmom_textarea', true );
			if ( $project_info ): ?>
			<p class="project-meta"><?php echo $project_info; ?></p>
			<?php endif;?>

			<?php the_post_thumbnail();?>
		</div><?php
	endwhile;
else :
	// When no posts are found, output this text.
	_e( 'Sorry, no posts matched your criteria.' );
endif;
wp_reset_postdata(); ?>

So we start the loop by verifying whether or not there are any portfolio posts, and if there are, then the first thing that gets displayed is the title, and using the_permalink() template tag, we’re making the_title() clickable, so it’s a link.

Next we have an if statement, and it’s verifying whether or not we have an excerpt. The template tag, the_excerpt(), is used to display the excerpt.

Next we have the custom field, which is named catmom_textarea. We’ll take a look at how that was done in a moment, but this if statement here verifies whether or not the project information exists. If there is data within that field, it will get displayed here.

Finally at the bottom, we see the_post_thumbnail() template tag being used in order to display the post featured image.

A plugin was created in order to create the custom field, and it’s actually specifically known as a meta box. This meta box is the project brief, and you can see here using the ID, we’ve got the catmom_textarea field that we’re referencing within the PHP code we just took a look at.

Next steps

To learn more about the loop, refer to the theme handbook available to you on WordPress.org.