The WordPress Loop

Transcript

1. The
   WordPress
   Loop
   Giustino Borzacchiello / WordPress Meetup Milano - January 2016
   

   View Slide

2. The standard Loop
   

   View Slide

3. The standard Loop
   What’s The Loop?
   

   View Slide

4. The standard Loop
   “The Loop is PHP code
   used by WordPress to
   display posts.”
   https://codex.wordpress.org/The_Loop
   

   View Slide

5. The standard Loop
   “The Loop is PHP code
   used by WordPress to
   display posts.”
   https://codex.wordpress.org/The_Loop
   

   View Slide

6. The standard Loop
   “The Loop is PHP code
   used by WordPress to
   display posts.”
   https://codex.wordpress.org/The_Loop
   

   View Slide

7. The standard Loop
   Post list
   

   View Slide

8. The standard Loop
   Single post/page
   

   View Slide

9. The standard Loop
   “Mullet” loop
   

   View Slide

10. The standard Loop
    Random post widget
    

    View Slide

11. The standard Loop
    Related posts
    

    View Slide

12. The standard Loop
    The Loop breakdown
    

    View Slide

13. if ( have_posts() ):
    while ( have_posts() ):
    the_post();
    // Single post
    endwhile;
    else:
    // No post found
    endif;
    

    View Slide

14. if ( have_posts() ):
    while ( have_posts() ):
    the_post();
    // Single post
    endwhile;
    else:
    // No post found
    endif;
    

    View Slide

15. if ( have_posts() ):
    while ( have_posts() ):
    the_post();
    // Single post
    endwhile;
    else:
    // No post found
    endif;
    

    View Slide

16. if ( have_posts() ):
    while ( have_posts() ):
    the_post();
    // Single post
    endwhile;
    else:
    // No post found
    endif;
    

    View Slide

17. ...
    while ( have_posts() ):
    the_post();
    
    
    endwhile;
    else:
    // No post found
    endif;
    

    View Slide

18. ...
    while ( have_posts() ):
    the_post();
    
    
    endwhile;
    else:
    // No post found
    endif;
    Template
    tags
    

    View Slide

19. if ( have_posts() ):
    while ( have_posts() ):
    the_post();
    // Single post
    endwhile;
    else:
    // No post found
    endif;
    

    View Slide

20. if ( have_posts() ):
    while ( have_posts() ):
    the_post();
    // Single post
    endwhile;
    else:
    // No post found
    endif;
    

    View Slide

21. The standard Loop
    Single Loop
    

    View Slide

22. if ( have_posts() ):
    while ( have_posts() ):
    the_post();
    
    
    endwhile;
    endif;
    

    View Slide

23. The standard Loop
    “Mullet” Loop
    

    View Slide

24. The standard Loop
    1
    2 3
    4 5
    

    View Slide

25. if ( have_posts() ):
    $count = 0;
    while ( have_posts() ):
    the_post();
    if( 0 === $count ) {
    // first post
    } else {
    // other posts
    }
    $count += 1;
    endwhile;
    endif;
    

    View Slide

26. The standard Loop
    Random posts Loop
    

    View Slide

27. $rand_query = new WP_Query(['orderby' => 'rand']);
    if ( $rand_query->have_posts() ):
    while ( $rand_query->have_posts() ):
    $rand_query->the_post();
    the_title();
    endwhile;
    endif;
    wp_reset_postdata();
    

    View Slide

28. $rand_query = new WP_Query(['orderby' => 'rand']);
    if ( $rand_query->have_posts() ):
    while ( $rand_query->have_posts() ):
    $rand_query->the_post();
    the_title();
    endwhile;
    endif;
    wp_reset_postdata();
    

    View Slide

29. The standard Loop
    Useful references
    

    View Slide

30. The standard Loop
    The loop and template tags
    https://developer.wordpress.org/themes/basics/the-loop/
    https://codex.wordpress.org/The_Loop
    https://codex.wordpress.org/The_Loop_in_Action
    

    View Slide

31. The standard Loop
    Try to find and understand the loop in this theme
    https://github.com/WordPress/twentysixteen
    

    View Slide

32. The standard Loop
    How does WordPress find what posts to show?
    https://developer.wordpress.org/themes/basics/template-hierarchy/
    

    View Slide

33. The standard Loop
    WP_Query
    https://codex.wordpress.org/Class_Reference/WP_Query
    

    View Slide

34. The standard Loop
    thank you
    @jubstuff
    borzacchiello.it
    

    View Slide

35. The standard Loop
    Extra: related posts loop
    

    View Slide

36. if ( have_posts() ):
    while ( have_posts() ):
    the_post();
    // EXERCISE! Insert here template tags
    $rel_query = new WP_Query([
    'category__in' => wp_get_post_categories($post->ID),
    'post__not_in' => [$post->ID],
    'posts_per_page' => 3,
    ]);
    // EXERCISE! Insert here $rel_query loop!
    endwhile;
    endif;
    

    View Slide

37. Images
    https://www.flickr.com/photos/nkphillips/2984667077/
    https://www.flickr.com/photos/jeremybrooks/2214481087/
    https://www.flickr.com/photos/benjaminbeard/5642453196/
    https://www.flickr.com/photos/jpestana/16315778523/
    https://www.flickr.com/photos/xroper7/19998325086/
    https://www.flickr.com/photos/katsrcool/16912193533/
    https://www.flickr.com/photos/15609463@N03/9848807935/
    https://www.flickr.com/photos/adamfowler/4841559945/
    https://www.flickr.com/photos/donald_gunn/15340138404/
    https://www.flickr.com/photos/trevira1/8218299403/
    

    View Slide