The WordPress Loop

Learn about the basic ingredient of a theme file: the famous WordPress loop.

We'll cover the following

WordPress while loop

In the WordPress world, we use a while loop to fetch content from the database and display it on the web page.

Go to the Excellence folder inside the theme folder. This folder has two files (from Creating a Custom Theme lesson): index.php and style.css alongside screenshot.png.

The index.php file is a mandatory file in a theme. It is used as a fallback option to display all the pages of a website. To begin coding, we will drop into PHP mode and create a while loop. This while loop will run as long as there are posts in the database. The WordPress function have_posts() checks for the termination condition of the loop.

<?php
while( have_posts() ) {
}
?>
have_posts() function

Inside the while loop, we want to fetch the post and display the title and contents of the post. The WordPress function the_post() fetches a post from the database. This function keeps track of the post it is currently working with and pulls in all the data related to that post. In the next iteration of the while loop, this function will automatically pull in the next post.

<?php
while(have_posts()) {
    the_post();
}
?>
the_posts() function

Now that we have the post, all we need is to display it using HTML. To keep HTML code separate from PHP code, we need to drop out of PHP mode. After writing the HTML code, we will re-enter PHP mode to close the while loop.

<?php
while(have_posts()) {
    the_post();  ?>
<!-- HTML code goes here -->
<?php
}?>
Switching between PHP and HTML

Post title

We will display the title of the post using the <h1> tag. The WordPress function the_title() is used to display the title. Since this is a WordPress function, we need to call it in PHP mode.

<?php
while(have_posts()) {
    the_post();  ?>
   <h1><?php the_title() ?></h1>
<?php
}
?>
the_title() function to display post title

If we save the file and refresh the browser, we can see that the loop runs three times as we have three posts and displays the title of each post.

Post content

To display the content of each post, we will use the WordPress function the_content(). We will display the contents using the <p> tag and add some separation afterwards between the current post and the next.

<?php
while(have_posts()) {
    the_post();  ?>
   <h1><?php the_title() ?></h1>
   <p><?php the_content() ?></p>
   <br/><hr/><br/>
<?php
}
?>
the_content() function to display post content

Post hyperlink

Right now, the page displays the posts. We want to be able to see the individual post when we click the link. In HTML, we can accomplish this by wrapping the title inside the <a> tag.

<h1><a href=""><?php the_title() ?></a></h1>
Adding hyperlinks

The href attribute tells the browser where to go when the link is clicked. We can use the WordPress function the_permalink() to provide us with the link to the post. As before, we will call this function in PHP mode.

<h1><a href="<?php the_permalink();?>"><?php the_title() ?></a></h1>
the_permalink() function

Now if we save the file and refresh the web page, we can see that the post titles are in blue and if we click a title, we are taken to another page which displays the post. The URL of the page also contains the slug for the post.

The while loop used above fetches ten most recent posts by default if it is used in index.php (home page). The same while loop fetches only one post when it is used on the page that displays an individual page. So even though we have the have_posts() condition in the while loop, the fact that the loop is not in index.php file, makes it behave differently. It will only run once and get all the details of the current post as we will see in the next lesson.

The code below shows the main landing page of our website. You can use the link below the widget to view the website in a separate browser tab/window. To view a post, click the title.

<!--Custom theme - lesson 01-->
While loop in WordPress