WordPress post loop – part 1

WordPress post loop or The Loop, as WordPress documentation like to call it, is one of the crucial parts of WP. WordPress is CMS, currently the leader on the market, and it needs to have a super-easy way of displaying posts. That is what the WordPress post loop is for.

Unlock the Full Potential of WordPress Today! 🚀

Are you tired of struggling with WordPress? Ready to become a confident, skilled WordPress user?

Don’t miss this comprehensive course by renowned expert Nat Miletic! 🔥

What you’ll gain:

✅ A solid understanding of WordPress fundamentals
✅ Step-by-step guidance on hosting setup and installation
✅ Mastery over plugins, console, themes, and WooCommerce
✅ Proven SEO strategies to boost your site’s visibility
✅ Expert techniques for fine-tuning performance

🎯 Transform your WordPress experience and create stunning websites with ease. Join hundreds of satisfied learners and take your skills to the next level! 👉 Click here to enroll in the Ultimate WordPress Course by Nat Miletic now!“

Ad

What is the Loop?

According to WordPress’ Developer documentation: The Loop is the default mechanism WordPress uses for outputting posts through a theme’s template files. How many posts are retrieved is determined by the number of posts to show per page defined in the Reading settings. Within the Loop, WordPress retrieves each post to be displayed on the current page and formats it according to your theme’s instructions.

What they mean is that we use WordPress Post loop to showcase our posts, pages, or any other post type. Also, we can style how the output will look, by using our own HTML and CSS.

We can divide the WordPress Post loop to two types:

• Standard WordPress Post loop
• WordPress Post loop with arguments

In this article, we are going to cover the first type of The Loop.

What can we use WordPress Post loop for?

We can use The Loop for any type of post content like posts, pages, custom post types. Also, the WordPress Post loop is used for displaying content on a single page or single post. Also, a lot of plugins are depending on The Loop, for example, Elementor can’t work if there is no the_content() template tag inside a loop.

Basic structure of The Loop

The super basic structure of The Loop could be written in one line of code.

<?php

while ( have_posts() ) { the_post();}

Basically, this while loop means while there are posts show them, one by one. This is not something we would usually do. First, we need to check if there are any posts. If there are posts show them, otherwise, show message or hide section, or whatever is suitable.

<?php 
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post(); 
        //
        // Post Content here
        //
    } // end while
} else {
    esc_html_e( 'Sorry, no posts to show.' );
}
?>

Add content to WordPress Post loop

Now that we have initialized The Loop, we need to print the content of the post. There are a lot of Template tags that can help us create a rich and interesting presentation of posts. We are going to name just a few:

• the_title() – shows the title of current post or page
• the_category() – shows the category/categories associated with the current post or page
• the_meta() – shows the custom post fields associated with the current post or page
• the_author() – shows the author of the current post or page
• the_content() – shows the content of the current post or page
• the_excerpt() – shows the excerpt of the current post or page
• the_time() – shows the time or date for the current post or page
• the_tags() – shows the tags for the current post or page
• the_permalink() – displays the permalink for the current post or page

As we have said these are only a few of the Template tags. We use those tags inside the WordPress Post loop.

<?php 
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post(); 
        ?>
        <!-- Set link around thumbnail -->
        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
        <!-- Show the title -->
        <h2><?php the_title(); ?></h2>
        <!-- Show the excerpt -->
        <div><?php the_excerpt();?></div>
        <?php
    } // end while
} else {
    esc_html_e( 'Sorry, no posts to show.' );
}
?>

As we can see from the example above we have used our HTML tags to wrap post information. We could also add classes and IDs, but that is not our primary target here.

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like 2 easy ways to check if JavaScript string contains a substring.