The Loop – WordPress Theme Tutorial

In this tutorial, we’ll be discussing how to use the WordPress loop. The loop is PHP code by WordPress that displays posts for us. It’s quite simple to use and it gives us tons of information about a post. It allows us to display and format posts in any way we want.

Let’s open up our functions.php file and add this bit of code.

add_theme_support( 'post-thumbnails' );

This allows us to use the featured images feature and allows us to upload images for our posts. If you try to edit or create posts, then you should see this become available to you on the side. Start uploading some featured images for your posts before we get started.

Using The Loop

Getting started with the loop is fairly simple. Open your index.php file and look for the <div> tags with the ID main and replace it with this.

<!-- main -->
<div id="main">
	<?php
		if( have_posts() )
		{
			while( have_posts() )
			{
				the_post();
			}
		}
		else
		{
			echo 'No posts were found!';
		}
	?>
<!-- /main -->
</div>

We first check if the page has posts by using the have_posts() function. This function checks the current page and see if it has any posts. If we were viewing a post and not the index page, then this function would return 1 post instead of all our posts. We then loop through all the posts using the same function. The the_post() function returns the current post and all it’s information that can now be used. If no posts were found, then we just echo out a message saying no posts were found.

Let’s look inside our loop and update it to this.

while( have_posts() )
{
	 the_post();
	 ?>

	 <article class="post">
		  <div class="primary">
				<h2>
					 <a href="<?php the_permalink(); ?>">
						  <?php the_title();?>
					  </a>
				</h2>
				<p class="post-info">
					 <span>filed under</span> <?php the_category( ',' ); ?>
				</p>

				<div class="image-section">
					 <?php the_post_thumbnail(); ?>
				</div>

				<?php the_content(); ?>
		  </div>

		  <aside>
                               <p><?php the_time('M'); ?><span><?php the_time('d'); ?></span></p>
				<div class="post-meta">
					 <h4>Post Info</h4>
					 <ul>
						  <li class="user"><a href="#"><?php the_author(); ?></a></li>
						  <li class="time"><a href="#"><?php the_time(); ?></a></li>
						  <li class="comment"><a href="#"><?php comments_number() ;?> </a></li>
						  <li class="permalink"><a href="<?php the_permalink(); ?>">Permalink</a></li>
					 </ul>
				</div>
		  </aside>
	 </article>

	 <?php
}

We’ve updated our loop immensely, but it’s quite simple what we’re doing here. If you open up index.html and compare the code for the posts in that file and then the code in our loop, you’ll see that they’re very similar. The only difference is that we’re dynamically updating the information instead of hard coding it in.

When we use the the_loop() function it returns information about the current post. We then can access that information by using various functions. There’s a ton of functions that can return certain information. For a full list of them, click here.

We use a couple of the functions. Let me explain the ones I used in this loop one by one.

• the_permalink() – Echoes out the link to the blog post or page
• the_title() – Echoes the title of the blog post
• the_category() – Echoes out the category/categories this blog post belongs to. If multiple categories, you can pass a string that’ll separate each category. In our case, we use a commas.
• the_post_thumbnail() – Echoes out the featured image in <img> tags.
• the_content() – Echoes out the content of the blog post
• the_author() – Echoes out the author of the blog post
• the_time() – Echoes out the date the blog post was published. This does not include the times you saved as a draft. You can format this by passing a format string. More info here.
• comments_number() – Echoes out the number of comments associated with the blog post.

These are just a few of the many functions we can use. For the most part, these functions just return a string. It’s up to you to wrap them in HTML and format the output. You can actually click on a post and then view it’s contents individually. The loop will take care of displaying that information only. Very handy and easy to use.

Conclusion

Our WordPress theme is fully dynamic, but there’s a problem. We’re basically using the same template for all pages. What if we wanted to change the way a page is displayed? In the next couple of tutorials, we’ll talk about templates and how we can make our theme more dynamic for certain content.