Creating Custom Loops

Topics covered in this WordPress tutorial:

Displaying custom post types, Using custom taxonomies, Creating a custom search results page

Exercise Preview

Exercise Overview

Loops are an important aspect of how WordPress sites function. Normally, they generate content based upon the context of the loop. For example, loops on the front page will cycle through blog posts by default. However, if the loop is on a post, it will display the content for that post. Until this point, you have been using basic loops to display posts and pages. In this exercise, you will learn to modify the loops used in the L&M Classic Cars site. These custom loops will be set to display specific cars and style them accordingly based on their status.

Adding Cars

Before we can get started modifying Loops, we need to add content for them to loop through. Let’s add a variety of cars with different statuses.

1. Go to the WordPress Dashboard and log in if needed:
   • Mac: localhost:8888/landm/wp-admin
   • Windows: localhost/landm/wp-admin

2. On the left side of the screen, go to Cars > Add New.

3. The next screen looks very similar to the Add New Pages and Posts screen, except this adds a car to your custom post type. For the title, type: 1957 Chevrolet Corvette

4. We prepared some content for you to copy and paste. Switch to your code editor.

5. Open car-description.txt from Class Files > WordPress.org Class > landm Content.

6. Select all the code and copy it.

7. Hit Cmd–W (Mac) or Ctrl–W (Windows) to close the file but not the folder.

8. Go back to the Add New Car page and click on the Text tab.

9. Paste the code into the content area.

10. Let’s add a custom excerpt, because if we don’t, WordPress will automatically display the first 55 words of your content. In the Excerpt module below, type:

    

11. In the Custom Fields module, click Enter new and type this Name and Value:

    

12. Click the Add Custom Field button.

13. Let’s add a Featured Image of the car that will be used in the various loops and the single car listing. On the right, under Featured Image, click Set featured image.

14. Click the Upload Files tab.

15. Click the Select Files button.

16. Navigate to Class Files > WordPress.org Class > landm Content > images and double–click car1.jpg.

17. On the right, for both Title and Alt Text, type: 1957 Corvette

18. Click the Set featured image button.

19. Before publishing this post, let’s add the correct status to the car. On the right side of the screen under Status, check both Featured and For Sale.

20. Click the Publish button.

21. Repeat the previous steps to create three additional cars with the following content:

    Title:	1957 Chevrolet
    Description:	car-description.txt (same as before)
    Excerpt:	This car was made to ride! Fully restored and in great condition.
    Mileage:	40,000 (choose mileage from the menu below Name)
    Featured Image:	car2.jpg
    Title and Alt Text:	1957 Chevrolet
    Status:	Featured, For Sale

    Title:	2004 Porsche 911 Cabriolet
    Description:	car-description.txt (same as before)
    Excerpt:	Amazing performance and handling. Makes driving fun again!
    Mileage:	60,000
    Featured Image:	car3.jpg
    Title and Alt Text:	2004 Porsche 911 Cabriolet
    Status:	Featured, For Sale

    Title:	1979 VW Convertible
    Description:	car-description.txt (same as before)
    Excerpt:	Mint condition and runs great! This car won’t last long!
    Mileage:	10,000
    Featured Image:	car4.jpg
    Title and Alt Text:	1979 VW Convertible
    Status:	Sold

Displaying Featured Cars

On the front page of L&M Classic Cars, you will create a loop to show only three of the featured cars.

1. In your code editor, open front-page.php from the landmTheme folder.

2. In the div.multiColumnWrapper that starts around line 20, delete all but the last of the car listings so the div looks as follows and only contains the 2004 Porsche.

   <div class="multiColumnWrapper">
      <h1>Featured Cars <a href="#" class="seeMore">See More</a></h1>
      <a href="#" class="listing">
         <img src="<?php bloginfo('template_directory'); ?>/img/car3.jpg" width="223" height="140" />
         <h2>2004 Porsche 911 Cabriolet </h2>
         <p class="mileage">Mileage: 15,000 </p>
         <p class="description">Great condition. Fully Restored and awaiting the right owner.</p>
         <p class="viewListing">View Listing</p>
      </a>
      <br class="clearFloat" />
   </div>
   

3. Let’s take the last listing and incorporate it into a loop, so that all the cars outputted will have the same format. After the </h1>, add the following two bold lines (around line 20) to start the loop:

   <h1>Featured Cars <a href="#" class="seeMore">See More</a></h1>
   <?php query_posts('post_type=cars&posts_per_page=3&status=featured'); ?>
   <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
   

   This loop starts a little differently than loops you have made in the past. By default, the WordPress loop generates a list of posts based on the context of the page it is being viewed on. The query_posts() function that appears before the loop allows you to selectively pull posts into your loop by specifying parameters. These parameters are separated with ampersands.

   In the above code, the query_posts() function has the following parameters:

   post_type=cars	Retrieves entries from the custom post type cars.
   posts_per_page=3	Displays only three posts.
   status=featured	Displays posts that have the custom taxonomy status set to featured.

4. To finish this loop, we need to close it and add an else statement if no cars matched the loop criteria. After the car listing, around line 29, add the following bold lines:

      </a>
      <?php endwhile; else: ?>
         <p>Sorry, no cars matched your criteria.</p>
      <?php endif; ?>
      <br class="clearFloat" />
   </div>
   

5. When done, the loop should look like the following:

   <div class="multiColumnWrapper">
      <h1>Featured Cars <a href="#" class="seeMore">See More</a></h1>
      <?php query_posts('post_type=cars&posts_per_page=3&status=featured'); ?>
      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <a href="#" class="listing">
         <img src="<?php bloginfo('template_directory'); ?>/img/car3.jpg" width="223" height="140" />
         <h2>2004 Porsche 911 Cabriolet </h2>
         <p class="mileage">Mileage: 15,000 </p>
         <p class="description">Great condition. Fully Restored and awaiting the right owner.</p>
         <p class="viewListing">View Listing</p>
      </a>
      <?php endwhile; else: ?>
         <p>Sorry, no cars matched your criteria.</p>
      <?php endif; ?>
      <br class="clearFloat" />
   </div>
   

   Great, now let’s change the link that is wrapped around the car listing.

6. Around line 22, change # to <?php the_permalink() ?>, as shown below in bold:

   <a href="<?php the_permalink() ?>" class="listing">
      <img src="<?php bloginfo('template_directory'); ?>/img/car3.jpg" width="223" height="140" />
      <h2>2004 Porsche 911 Cabriolet </h2>
   

   This will add the URL to the cars specified in query_posts().

7. Next, let’s replace the static values in the car listing with information from the cars specified in the query_posts() function. Replace the img, title, mileage, and description with the following bold code:

   <a href="<?php the_permalink() ?>" class="listing"> 
      <?php the_post_thumbnail(); ?>
      <h2><?php the_title(); ?></h2>
      <p class="mileage">
         Mileage: <?php echo get_post_meta($post->ID, 'mileage', true); ?>
      </p>
      <p class="description"><?php the_excerpt(); ?></p>
      <p class="viewListing">View Listing</p>
   </a>
   

   Below is an explanation of each of the functions used in the code we just added:

   the_post_thumbnail()	Grabs the featured image specified for each car.
   the_title()	Displays the title that was used when creating the car.
   get_post_meta($post->ID, 'mileage', true)	Returns a single value for the mileage custom field of the car.
   the_excerpt()	Displays the excerpt written for the car.

8. Save the file.

9. Go to:
   • Mac: localhost:8888/landm
   • Windows: localhost/landm

   Now the Featured Cars section of the front page will display only the cars you specified in your query_posts() function. Pretty cool!

Using Conditionals in Loops

We’ve set up a Cars for Sale page, but now we need to make it dynamic so it will display our live content. We will create a custom loop that inserts line breaks and marks cars from the sold category with a special icon.

1. Switch to your code editor.

2. Open the cars.php template from the landmTheme folder.

   First, we need to add a custom loop to display all the listings of cars. To save you some time, we have a pre-made loop similar to the one you just created for the front page.

3. Open carsLoop-ReadyForConditionals.php from the Class Files > WordPress.org Class > landm Content folder.

4. Select all the code and copy it.

5. Hit Cmd–W (Mac) or Ctrl–W (Windows) to close the file but not the folder.

6. You should be back in the cars.php file. If it is in another window, hit
   Cmd–Tilde(~) (Mac) or Alt–Tab (Windows) to return to the landmTheme folder.

7. Delete everything inside div.multiColumnWrapper except for the final <br class="clearFloat" />. The bottom of your code will look like this:

         <div class="multiColumnWrapper">
            <br class="clearFloat" />
         </div>
      </div>
   </div>
   </body>
   </html>
   

8. Paste the carsLoop code.

9. Save the file.

10. Now we need to add a page that uses this template. Go to the Dashboard.

11. On the left side of the page, go to Pages > Add New.

12. For the title, enter: Cars For Sale

13. Leave the content area blank (we will add a loop into the Cars template later).

14. On the right side of the screen in Page Attributes under Template, choose Cars.

15. Click the Publish button.

16. Nice work, now let’s check out the page. Click on the View Page link at the top of the page.

    Whoops, there is only one column of car listings instead of three like the front page. This is because a <br class="clearFloat" /> is outputted every time the loop iterates through a car. Also, there is no way to tell which cars are for sale and which are sold. Let’s fix these issues using conditionals.

17. Switch back to cars.php in your code editor.

18. Just before the line <?php the_post_thumbnail(); ?> (around line 17), add:

    <?php if ( in_category('sold') ) {?> 
       <img src="<?php bloginfo( 'template_directory' ); ?>/img/sold.gif" width="54" height="23" class="sold" alt="SOLD" />
    <?php }; ?>
    

    This conditional statement will mark cars with a sold image IF the car is from the category sold.

    Next, you will create a conditional loop that adds a <br class="clearFloat" /> after every third car listing using a counter variable.

19. Add the following line underneath the query_posts() function but before the start of the loop (around line 14):

    <?php query_posts('post_type=cars'); ?>
    <?php $postcounter = 0; ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    

    This sets a new variable called $postcounter equal to 0. We will use this variable to keep track of the car listings as they are added.

20. Around line 27, replace <br class=clearFloat /> with the following bold code:

    </a>
    <?php 
       $postcounter++;
       if ($postcounter % 3 == 0) {;
          echo '<br class="clearFloat" />';
       }
    ?>
    <?php endwhile; else: ?>
    

    The first line $postcounter++ adds 1 to the $postcounter variable each time the loop iterates. IF the variable $postcounter is divisible by 3, then a <br class=clearFloat /> will be added. This will add a clearing break after every third car in our list and prevent floating CSS issues.

21. Save the file.

22. Go to:
    • Mac: localhost:8888/landm
    • Windows: localhost/landm

23. On the left of the page, click Cars For Sale.

    Close, but for some reason the SOLD icon is not being displayed. This is because sold is a custom category and we need to write special code to make WordPress aware of it. Let’s create a custom function to check if a post is in a custom category.

24. In your code editor, open the functions.php template from the landmTheme folder.

25. Open in-custom-category.php from the landm Content folder.

26. Select all the code and copy it.

27. Hit Cmd–W (Mac) or Ctrl–W (Windows) to close the file but not the folder.

28. You should be back in the functions.php file. If it is in another window, hit
    Cmd–Tilde(~) (Mac) or Alt–Tab (Windows) to return to the landmTheme folder.

29. Place your cursor at the bottom of the page before the closing ?>

30. Paste the code.

31. Save the file.

    The code you just pasted in is a custom function called in_custom_category(). It will allow us to check whether or not something is in a custom category. Let’s add it to the cars template loop.

32. Go back to cars.php.

33. Around line 18, change your first conditional so that it uses the function in_custom_category(), by changing the following bold code:

    <?php if ( in_custom_category('sold') ) {?> 
       <img src="<?php bloginfo( 'template_directory' ); ?>/img/sold.gif" width="54" height="23" class="sold" alt="SOLD" />
    <?php }; ?>
    

34. Save the file.

35. Let’s check out the new page. Go to:
    • Mac: localhost:8888/landm
    • Windows: localhost/landm

36. On the left side of the page, click Cars For Sale.

    Now the 1979 VW Convertible should have a SOLD icon over it. Nice work!

The Search Results Page

1. You should still have the L&M Classic Cars preview open. (If not, go to http://localhost:8888/landm (Mac) or http://localhost/landm (Windows).)

2. On the left, click into the Search Cars field and hit Return (Mac) or Enter (Windows).

   Currently no custom template has been applied to the search results page, so it uses index.php as the fallback. Let’s make the results display rows of cars like the Cars for Sale page.

3. In your code editor, open cars.php from the landmTheme folder.

4. Save the file as search.php into the landmTheme folder located at:
   • Mac: Hard Drive > Applications > MAMP > htdocs > landm >
     wp-content > themes > landmTheme
   • Windows: C: > xampp > htdocs > landm > wp-content > themes > landmTheme

5. Delete the comment header at the top of the page.

   <?php
   /*
   Template Name: Cars
   */
   ?>
   

   We can delete this header because search.php is a reserved WordPress template for displaying search results.

6. Inside the h1.first tag around line 6, remove Cars for Sale and replace it with:

   <h1 class="first"><?php printf( __( 'Search Results for: %s'), '<span>' . get_search_query() . '</span>' ); ?></h1>
   

7. Delete this line (around line 8):

   <?php query_posts('post_type=cars'); ?>
   

8. Save the file.

9. Now go back to:
   • Mac: localhost:8888/landm
   • Windows: localhost/landm

10. Try searching for chevrolet. Excellent.