Anatomy of the WordPress Loop


Published on

Describes ways to implement and manipulate default WordPress loops. Originally presented at Denver WordPress meetup.

Published in: Education, Technology, Business

Anatomy of the WordPress Loop

  1. 1. Anatomy of the Loop: The Code Drew Jaynes @DrewAPicture
  2. 2. The default Loop
  3. 3. Default Loop Breakdown:•  The is the start of the loop. Heres what were basically saying:•  If we have some posts,•  Then WHILE we have those posts•  Loop through the posts and display them one after the other
  4. 4. Default Loop Breakdown:•  Its called the Loop, because it loops through the content until theres 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
  5. 5. 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 dont have posts, skip the loop anddisplay an error. At the end of our loop,complete our question with an endif.
  6. 6. Loop with a count
  7. 7. 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•  Lets look at a breakdown of the code then some visual examples of loops with counts
  8. 8. 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 doesnt have to be count. You can use any variable name you like.
  9. 9. 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++
  10. 10. Loop with a count: Breakdown• At this point, were inside the loop, but we want toleverage our count to do something. In this example we firsttest if were at count 1, and if so, do something. If NOT, dosomething else.•  Let me show you an example >>
  11. 11. Loop with a count: Visual•  Many magazine / news-based themes use counts to highlight the latest post in a loop.
  12. 12. Loop with a count: Breakdown•  This is the loop and count code we were looking at before. Ive added some HTML5 markup. You can see were displaying the first post in the loop SEPARATELY from the rest of the posts.
  13. 13. 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 weve looped through all of our content•  The else displays an error if we never had any posts•  The endif closes the loop.
  14. 14. 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 were 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.
  15. 15. Loop + a count + a Page Header
  16. 16. Loop + a count + a Page Header•  At this point, we probably dont need to do a full breakdown of the parts of the loop. Were only going to be focusing on the first section for this example.
  17. 17. 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 were asking in our code and where.
  18. 18. Loop + a count + a Page Header•  Its 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 were not in the loop yet, were 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, were dealing with the loop and content there will be looped over and repeated.
  19. 19. Manipulating default loops•  In the examples weve covered so far, weve assumed WordPress has automagically supplied us with query results that were just displaying.•  In the next few slides, well be exploring how to manipulate the query results to get the kinds of posts we want.
  20. 20. 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 inthe WP_Query class found at this link• These parameters allow us to dial down aquery to precisely the type of posts werelooking to display
  21. 21. query_posts(): An exampleIf you take a look at the modified loop below, youllnotice the placement of the query_posts() function isright before our loop code begins.
  22. 22. query_posts(): An example•  You can see weve specified two parameters via our query_posts() call. We want to display 5 posts per page and only posts in the main category
  23. 23. query_posts(): An example•  So thats pretty cool right? But theres a problem.•  Using query_posts() essentially hijacks the query were supplied with so depending on which page this loop displays on, it might give you unintended results.•  Let me give you some examples >>
  24. 24. 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?
  25. 25. $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•  Youve probably noticed by now that the syntax of query strings are strikingly similar to the WP_Query class parameters. Thats because they are.
  26. 26. query_posts() & $query_string• So now that you understand that query_posts() by itselfwill hijack your query and that youll need $query_string toavoid that, whats your solution?•  Concatenation. You need to combine the query string parameter with your custom parameters inside of query_posts(). Something like this:Thats it. So lets recap >>
  27. 27. 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.
  28. 28. 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