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!

Comments

Casper
Reply

Nice .. Keep up the good work.

Phil
Reply

Hi,

I really like what you have done with Nouveau. I downloaded it last night and have started integrating it into one of my current projects.

What would be great is if the doco was available for download also, as often I am working offline.

Also, a mailinglist to keep informed of updates would be great.

Keep up the great work.
thanks.

Reply

Love what you’ve done here! I’ve been telling other friends about this theme/framework – I love it. I’ve been using the theme to build a client’s site for the past several weeks. I am using plain CSS as I don’t have time on this one to learn SASS or LESS.

They’ve now decided (against my strong protests) that they don’t want responsive – which defeats the purpose of using a mobile-first framework like Foundation.

Is there a simple way that I can “turn off” the responsive part of Foundation within Noveau?

Thanks in advance!

Jeff

Matt Jeff
Reply

Since Foundation 5 is inherently mobile-first, there’s no magic-bullet way to disable responsive breakpoints.

That said, you can change your technique to compensate…

Try using small columns exclusively (which will allow you to avoid breakpoints) and then set a fixed pixel width for .row, using the !important flag to make sure it’s obeyed.

Example…

.row {
    width: 1000px !important
}

This would effectively ensure that the same grid is used at all screen sizes, while the fixed row width forces a consistent, pre-defined, non-fluid width. And if/when your clients come to their senses, you can go back to building the site responsively fairly easily.

Good luck!

Jeff
Reply

Thank you! This works perfectly!

One more question. We are basically done with the site but the client has added a requirement for IE8… arghhhh.

All of the CSS is working fine but I am having trouble with the accordion and tabs. It looks like you use 1 1.x version of Jquery by default – which helps with the whole IE8 requirement.

foundation.min.js, accordion, tab and app js files are all throwing errors in IE8. “Foundation is not defined” or “Object doesn’t support this property or method.”

Not asking you to code a solution – but if you’ve run into this before and have a quick and dirty fix it would be awesome!

Jeff

Matt Jeff
Reply

Oh man, I’m sorry to hear about that Jeff… it’s never fun getting those kinds of spec changes at the 11th hour.

IE8 behaves weirdly with the Foundation 5 javascript since it makes use of features that aren’t entirely supported in JQuery 1.x.

You probably have two options…

  1. There was a discussion of this very topic on the Foundation forum… you can give that a try!
  2. In \NV\Hooks\Config::enqueue_assets(), comment out the universal foundation.js and then load only the Foundation bits you need, sans the offending js files. You’ll then need to write your own accordion JS or use another JQuery plugin that has IE8 support.

Sorry, I can’t be of more help!

Leave a Comment

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>