Simplifying the Loop

NOUVEAU is all about cleanliness and efficiency. To help keep your themes clean, I’ve included two handy functions in the theme framework that can substantially improve your theme development workflow.

In this article, I will show you how to leverage NOUVEAU‘s NV\Theme::loop() and NV\Theme::custom_loop() functions to work faster and clean up your own code. I’ll also discuss a slightly controversial third method that results in dramatically cleaner templates in certain circumstances.

The Traditional Loop

When you output content onto a page in WordPress, you would traditionally wrap all of your theme functions inside of a very specific while loop (simply called “The Loop“, in WordPress parlance).

As a refresher, here is what The Loop looks like in a typical WordPress template…

<br />
<?php 
    if ( have_posts() ) {
        while ( have_posts() ) {
            the_post(); 
            // your theme functions here
        }
    }
?><br />

Needless to say, putting all this logic into a template file is messy and makes things hard to read. Even if you used get_template_part() inside The Loop, you would still have a bulky chunk of PHP logic in a file that should be focused on presentation.

NOUVEAU includes two new functions that significant simplify The Loop in your template files: NV\Theme::loop() and NV\Theme::custom_loop()

Simplifying Standard Loops

NOUVEAU‘s NV\Theme::loop() function can be used to automatically perform The Loop for you, and load any template parts you need for presentation.

Instead of the bulky while loop shown above, you simply create a template part in a separate file and then use this function to automatically loop over that part.

<br />
<?php 
    \NV\Theme::loop( 
        'parts/article', 
        'parts/article-empty' 
    ); 
?><br />

This simple loop function accepts just two arguments…

$template_part
string | Required. A string path to the template part you want to load on each loop. This argument works exactly like get_template_part().

$no_results
string | Optional. You can optionally specify a separate template to load in the event the default query returns no results. If not provided, nothing will be displayed if the default query is empty.

Simplifying Custom Query Loops

If you have a custom query or need a secondary loop, the above function isn’t enough. For this scenario, NOUVEAU provides a separate function called NV\Theme::custom_loop().

This function takes up to four arguments…

$query
WP_Query | Required. First, you must pass the function a valid WP_Query object (so that it has some data to loop over).

$template_part
string | Required. As before, this is a string path to the template part you want to load on each loop. This argument works exactly like get_template_part().

$no_results
string | Optional. You can optionally specify a separate template to load in the event the default query returns no results. If not provided, nothing will be displayed if the default query is empty.

$variable_name
string | Optional. Finally, you may pass a string that tells the function what name to use for your template variable. This generally isn’t necessary, but this variable is used to access the post data directly within your loop / template part. By default, this is set to ‘query’… which means an $query variable is available to you inside your template parts.

Here is what your main page template might look like; for this example, we’ll assume you want to display a list of movies from a custom post type called “movie”…

<?php<br />
\NV\Theme::get_header();<br />
$movies_query = new WP_Query(<br />
    array( 'post_type' => 'movie' )<br />
);<br />
?></p>
<div id="container">
        <?php 
            \NV\Theme::custom_loop( 
                $movies_query,
                'parts/movie',
                'parts/movie-empty',
                'movie'
            ); 
        ?>
    </div>
<p><?php<br />
\NV\Theme::get_footer();<br />

This example loops through all the results of the custom “movies” query, and renders each movie using the parts/movie.php template part in your theme directory. If you needed to directly access the post object in your template part, you could do so by using the $movie variable (because we called the fourth argument 'movie').

No-Loop Templates

This will no doubt be controversial among some in the WordPress community, but I’d also like to point out that it is absolutely possible to build templates without relying on a loop at all.

To cut the loop out of the picture, simply call the_post() at the top of your template to set up all your theme functions. By removing it from the loop it will only run once… but that’s all we need in some situations. Like so…

<?php<br />
\NV\Theme::get_header();<br />
the_post();<br />
?></p>
<div id="container" class="row">
<article id="content" class="small-12 columns">
            <?php the_post_thumbnail() ?><br />
            <?php the_title() ?><br />
            <?php the_content() ?><br />
        </article>
</p></div>
<p><?php<br />
\NV\Theme::get_footer();<br />

This is not always appropriate, mind you. We can assume that WordPress templates fit into one of two categories… templates that display a single piece of content (a page, a post, etc) or templates that display multiple pieces of content (archives, blog index, etc). This is only ever appropriate when you are absolutely certain that you are displaying single pieces.

As an added benefit, this lets us keep presentational code all in one file instead of splitting it into a separate template part. It’s perfect when you have pages that may require unique structure, like the homepage (e.g. front-page.php), since you can keep everything self-contained.

Again, this is a slightly controversial approach, and certainly isn’t appropriate in every situation, but by all means feel free to use your own judgement!