How Design & Development Create Effective UX
WordPress The Loop
What is The Loop?
The Loop is PHP code that WordPress uses to display content from a single page/post onto your website, for example, the About page for a site. It can also be used to display a number of posts from a category on a category page.
Here’s a basic example of how the loop looks like:
<!-- Start the Loop. --> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <!—End the Loop. --> <?php endwhile; else : ?> <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p> <?php endif; ?>
If this is your first time seeing the Loop, let’s go ahead and break it down. The if(have_posts()) checks if there are any posts available, if it picks up a post go ahead and continue with the loop.
The while(have_posts()) begins the loop. It will loop through each found posts and be available for display. The code between the while loop will be repeated for each post.
The the_post() grabs the current post data information and sets that to the global variable $post.
The endwhile; else: closes the Loop and display a message in case no posts were found.
Inside the Loop there are functions that can run to display posts. These functions are known as template tags to customize how each post inside the loop is displayed. Here are a few template tags that we’ll cover that can be used inside the Loop:
- the_title() – gets and displays the title of the current post. Must be used within the Loop.
- the_content() – gets and displays the content of the current post. Must be used within the Loop.
- the_post_thumbnail() – gets and display the featured image of the current post. Must be used within the Loop.
Here’s the updated code using the 3 tags that we just covered:
<!-- Start the Loop. --> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php the_post_thumbnail(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?> <!—End the Loop. --> <?php endwhile; else : ?> <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p> <?php endif; ?>
With the above Loop code, it will display the featured image, post title, and followed by the post content.
The WordPress loop is arguably one of the most important aspects of WordPress. It is the core of each WordPress site and is very powerful. It can be greatly customized using a range of template tags and conditionals. Go ahead and start experimenting with the Loop, if you want to learn more about using them to customize your theme leave me a comment and I’ll be happy to assist.
There are currenty one response.