The WordPress Loop: Free WordPress Tutorial

Topics Covered in This WordPress Tutorial:

Displaying Posts, Adding/customizing Posts

Exercise Preview

Exercise Overview

In this exercise, we will begin building the blog section of the site. It’s typical for blogs to display the last 5–10 posts on one page. The content of a page is accessed through a series of WordPress functions commonly referred to as the Loop. It’s called the Loop because it loops through all of the available posts to pull out all their titles, content, tags, comment links, etc. This is the backbone of WordPress content.

Adding the Loop

1. In a code editor, open index.php from the mrpTheme folder if it isn’t already open.

2. Around lines 28–57, delete everything inside the #primary div.

3. You should be left with an empty div:

   <div id="primary">
   
   </div><!—end primary—>

4. Inside the #primary div, add the following:

   <div id="primary">
      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <?php endwhile; ?>
      <?php endif; ?>
   </div><!—end primary—>

   Essentially, this says if there are posts, get the posts until there aren’t any left.

5. We still need to add code between these tags to display the content for each post. Add the following:

   <div id="primary">
      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
         <?php the_content(); ?>
      <?php endwhile; ?>
      <?php endif; ?>
   </div><!—end primary—>

6. Save the file.

7. Open up a browser and go to:
   • Mac: localhost:8888/mrp
   • Windows: localhost/mrp

   You should see the default post that comes with the base install. Yahooie! That means the site’s content is now dynamic!

8. Let’s add another post to make sure WordPress is looping through and displaying all the posts. In the browser, go to:
   • Mac: localhost:8888/mrp/wp-admin
   • Windows: localhost/mrp/wp-admin

9. If asked, enter your username and password.

10. On the left, mouse over Posts and click Add New.

11. For the title, enter: New Post

12. For the content, enter: This is the new post content.

13. On the right, click Publish.

14. Click the Monteith Restoration & Performance link at the top to preview the site.

15. The new post should be visible, but lacks the title and blends in with the other one. Let’s add the title into the code. Switch back to index.php in your code editor.

16. Above the_content() function (around line 29), add the following:

    <div id="primary">
       <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
          <h2><?php the_title(); ?></h2>
          <?php the_content(); ?>
       <?php endwhile; ?>
       <?php endif; ?>
    </div><!—end primary—>

    NOTE: This function displays the title of the current post. Remember that even though it’s only here once in the code, this section will be looped over for each post.

17. Save the file.

18. Return to the browser and reload:
    • Mac: localhost:8888/mrp
    • Windows: localhost/mrp

19. Click the title of a post. It won’t do anything, yet. Typically on blogs, clicking the post title brings you to its own page (where you can leave comments and such).

20. Switch back to your code editor.

21. Wrap the title in the following link:

    <div id="primary">
       <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
          <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
          <?php the_content(); ?>
       <?php endwhile; ?>
       <?php endif; ?>
    </div><!—end primary—>

    NOTE: the_permalink() gets the appropriate link for the post.

22. Save the file.

23. Return to the browser and reload:
    • Mac: localhost:8888/mrp
    • Windows: localhost/mrp

24. Click the title of one of the posts. It should bring you to a page that shows just that post. Success!