Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The WordPress Loop

The WordPress Loop

Giustino Borzacchiello

January 12, 2016
Tweet

More Decks by Giustino Borzacchiello

Other Decks in Technology

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