Monday , 20 November 2017
Home / Programming / WordPress / Themes / The Loop – WordPress Theme Tutorial
The Loop
The Loop

The Loop – WordPress Theme Tutorial

This tutorial is a part of the WordPress Theme tutorial series. If you would like to see the whole series and the order in which you should follow them, then click here.

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.

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.

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.

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.

About Jasko Koyn

Check Also

How to add JavaScript in your WordPress Themes

How to add JavaScript in your WordPress Themes

We have some javascript in our theme. So, let’s learn how to add JavaScript in …

One comment

  1. Great tutorials friend, thanks so much fr providing all this for free!

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link