Anatomy of the Loop: The Code

Drew Jaynes

@DrewAPicture

The default Loop

Default Loop Breakdown:

• The is the start of the loop. Here's what we're basically saying:

•  If we have some posts, •  Then WHILE we have those posts •  Loop through the posts and display them

one after the other

Default Loop Breakdown:

•  It's called the Loop, because it loops through the content until there's none left to display.

•  endwhile marks the end of the loop •  The else basically shows an error if no content is found

at the beginning of the loop •  We close off our if statement with endif

Default Loop: All together now

• The loop starts with a question: • Do we have posts?

•  If we have posts, then while we have those posts, loop through and display them one at a time.

• If we don't have posts, skip the loop and display an error. At the end of our loop, complete our question with an endif.

Loop with a count

Loop with a count

• Adding a count allows you to segment your loop into multiple pieces.

• For example: •  Using a count would allow you to display the

FIRST post in a loop differently than the rest

• Let's look at a breakdown of the code then some visual examples of loops with counts

Loop with a count: Breakdown

•  Ask if you have posts •  Introduce the count variable and give it a value of 0

•  Note: The count variable you use doesn't have to be 'count'. You can use any variable name you like.

Loop with a count: Breakdown

•  Just as with a normal loop, WHILE you have posts, output the posts one by one.

•  At this point, we also need to increment our count variable every time the loop comes around. This is accomplished with $count++

Loop with a count: Breakdown

• At this point, we're inside the loop, but we want to leverage our count to do something. In this example we first test if we're at count 1, and if so, do something. If NOT, do something else.

•  Let me show you an example >>

Loop with a count: Visual

• Many magazine / news-based themes use counts to highlight the latest post in a loop.

Loop with a count: Breakdown •  This is the loop and count code we were looking at

before. I've added some HTML5 markup. You can see we're displaying the first post in the loop SEPARATELY from the rest of the posts.

Loop with a count: Breakdown • Closing off a counted loop is done exactly the

same way as with a regular loop. •  The endwhile marks the point where we've looped

through all of our content •  The else displays an error if we never had any posts •  The endif closes the loop.

Loop with a count: All together •  First we ask our question: Do we have posts? if we

have posts. Then we initialize our count variable and give it a value of 0

•  While we have posts, we say we want to loop through them one after the other and at the same time, increment our count every time we loop through.

•  If we're at #1 in the count, we can style the FIRST post differently, otherwise (else) style the other posts the same.

•  End our loop, end our question.

Loop + a count + a Page Header

Loop + a count + a Page Header

• At this point, we probably don't need to do a full breakdown of the parts of the loop. We're only going to be focusing on the first section for this example.

Loop + a count + a Page Header •  In the previous section, we added a counting function to

the first part of the loop. •  We checked for posts then initialized a count variable •  WHILE we had those posts, we looped through them

one by one, all the while incrementing our count variable each time.

•  Then we used the count variable to manipulate how our content was displayed.

•  So now we want to add a Page Header. The easiest way to think about this is by examining exactly which questions we're asking in our code and where.

Loop + a count + a Page Header •  It's important to differentiate between the IF and WHILE

sections of the loop. •  The first part of the loop ONLY asks if we have posts.

But we're not in the loop yet, we're just asking. This is where we set our count variable and display a page header. Display is contingent on having posts

•  Once we get into the WHILE section, we're dealing with the loop and content there will be looped over and repeated.

Manipulating default loops

•  In the examples we've covered so far, we've assumed WordPress has automagically supplied us with query results that we're just displaying.

•  In the next few slides, we'll be exploring how to manipulate the query results to get the kinds of posts we want.

query_posts();

• At its base, we have the ability to modify the query being fed to a default loop using a function called query_posts()

• query_posts() utilizes parameters outlined in the WP_Query class found at this link

• These parameters allow us to dial down a query to precisely the type of posts we're looking to display

query_posts(): An example

If you take a look at the modified loop below, you'll notice the placement of the query_posts() function is right before our loop code begins.

query_posts(): An example

• You can see we've specified two parameters via our query_posts() call. We want to display 5 posts per page and only posts in the 'main' category

query_posts(): An example

• So that's pretty cool right? But there's a problem.

• Using query_posts() essentially hijacks the query we're supplied with so depending on which page this loop displays on, it might give you unintended results.

• Let me give you some examples >>

query_posts(): Be mindful of magic

• Many pages display default queries through default loops:

•  On category archives, only posts from those categories are displayed

•  On author archives, only posts from that author are displayed

• The magic lies in $query_string •  Any page that has a pre-formed loop gets its

parameter(s) via this $query_string. So what is it?

$query_string: A primer

• Many pages in the WP Template Hierarchy display posts based on the $query_string

•  Some example query strings: •  Category archive: category_name=category-slug •  Page: pagename=page-slug •  Author archive: author_name=username •  And so on

•  You've probably noticed by now that the syntax of query strings are strikingly similar to the WP_Query class parameters. That's because they are.

query_posts() & $query_string • So now that you understand that query_posts() by itself will hijack your query and that you'll need $query_string to avoid that, what's your solution? •  Concatenation. You need to combine the query string

parameter with your custom parameters inside of query_posts(). Something like this:

That's it. So let's recap >>

query_posts(): A Recap •  Adding query_posts() before your loop by itself will

hijack the query being supplied to your loop •  The $query_string is a parameter WordPress magically

supplies based on the Template Hierarchy •  Using $query_string as one of your query_posts()

parameters will allow you to maintain the default query while spicing it up with your own parameters.

Helpful Links

•  In the Codex: •  The Loop page •  query_posts() page (including $query_string) •  The WP Query class •  WP Query class parameters •  Template Hierarchy page