A new L&L version is dropping like it’s hot with a few new features including one that we’re particularly excited about: a device variable and device conditions. Here’s everything that’s new in the latest version of Loops & Logic.
Mobile detect module allows for even more powerful responsive templates
Since the very first release of Loops & Logic, it’s been possible to use standard CSS media queries in the styles tab of your L&L templates to build responsive templates. With the mobile detect module included in version 2.4.3, L&L now includes two new ways to enable server-side device detection to give you yet another way to tailor your WordPress site’s experience to your user. This mobile detect module is useful when you want to run or skip some portion of your L&L template dynamically based on a user’s device type. However, as we’ll discuss in the ‘considerations’ section below, CSS media queries are still the preferred method for adding CSS when building accessible, future-proof, responsive designs.
New device variable type
The first feature of L&L’s new mobile detect module is the device variable. The new variable type opens up a wealth of possible use-cases with the <Get device=type /> tag, which outputs mobile, tablet, or desktop depending on the device with which the current user is browsing your site. Not only could this be used to create conditional logic that only runs certain L&L code on certain devices (more on that below), but it could also be used to improve page performance by only loading content that’s necessary for the user’s specific device. For example, let’s say you have three PDF ebooks that are each formatted for a specific device size (let’s call them my-mobile-ebook.pdf, my-tablet-ebook.pdf, and my-desktop-ebook.pdf). A CSS media query would require you to load all three and then only display the one that’s relevant based on the user’s viewport size. Instead, you could optimize server response times by only loading the file that works best for the user’s device using the L&L markup below.
<embed src="http://example.com/my-{Get device=type}-ebook.pdf" width="100%" height="50%" type="application/pdf">
New device conditional logic subject
The second (and probably most useful) new way to use device detection is in conditional If statements. There are so many possible ways to incorporate this tag into your site; your creativity is the only limit! It could be used to build a loop that queries less data for mobile users to improve mobile load times or it could be used in conjunction with the Redirect tag to send mobile users to a completely different version of your page or site using a short element like <If not device=desktop><Redirect to="/mobile" /></If. In the example below, we’ve used the Set tag to dynamically change a link URL to send mobile users toward a mobile app link and desktop users to a web app.
<Set app_url>
<If not device=desktop>
http://example.com/mobile-app-link
<Else />
http://example.com/web-app-link
</If>
</Set>
<a href="{Get app_url}">Click here</a> to check out our app for your device!
Some considerations when using L&L’s server-side device detection
It’s important to remember that these two new device detection features act on the server-side using a browser’s user agent (data that’s sent along with the HTTP request) and the popular device detect module. This is in contrast with CSS media queries which use client-side viewport detection. Since there’s no universal format for this user agent data and since there are a few known limitations with the device detect module, it’s often better to use CSS media queries if your goal is simply to build a responsive template.
To see this in practice, take a look at the two examples below which achieve the same outcome. The first uses L&L’s device detect module and the second uses a more traditional CSS media query. In this case, it would be preferable to use the CSS media query to ensure compatibility with the widest range of devices and to ensure that your content displays beautifully even when a desktop user resizes their browser.
Here’s an example using L&L’s media detect module. The following would be written in the styles tab of the L&L template or in style.css:
.mobile-view {
// Styles for mobile/tablet
}
And this is what would be written in the L&L template:
<div class="{If not device=desktop}mobile-view{/If}">
This content is responsively styled based on server-side device detection.
</div>
In contrast, here’s an example using the standard CSS media query. The following would be written in the styles tab of the L&L template or in style.css:
@media screen and (max-width: 800px) {
.mobile-view {
// Styles for mobile/tablet
}
}
And this is what would be written in the L&L template:
<div class="mobile-view">
This content is responsively styled based on client-side device detection.
</div>
While applying styles is something that’s best left to CSS media queries, there are still many ways that server-side device detection can be incorporated into your L&L templates, as shown in some of the earlier examples.
New fields for file size and file type in the attachment loop
Simple, yet satisfying. The attachment loop type now supports <Field type /> and <Field size /> to easily display the type of file and its size. The size field is formatted to be human-readable and automatically displays units such as MB, KB, etc.
Loop through posts that have child terms of a specific parent taxonomy term applied
To make L&L work better with a greater variety of data structures, the latest version adds a child_terms=true parameter which allows you to loop through all posts that have a child taxonomy term applied to them, even if the posts don’t have the parent term applied as well.
To illustrate this in practice, let’s say you run an e-commerce site for sports equipment. You have a custom taxonomy for your products with parent terms for each sport (running, cycling, etc.) and child terms based on the subcategory of sport (trail, cross-country, sprint, etc.). Each of your products has a child term applied but doesn’t have a parent term applied. If you wanted to create a post loop of all posts that belong to a single term in L&L, that would be easy with something like <Loop type=product taxonomy=sport terms=running>. But what if you wanted to loop through every post that had a child term of ‘running’ applied? Well, now that’s easy too! The following markup uses the new child_terms=true parameter to loop through all posts containing the terms ‘trail,’ ‘cross-country,’ ‘sprint,’ or any other term that’s a child of the term ‘running.’
<Loop type=product taxonomy=sport terms=running child_terms=true orderby_field=some_field>
<Field title /><br />
</Loop>
What else is new?
We like to pack our updates with a bunch of little improvements, so here’s everything else you’ll find in version 2.4.3.
- Base loop
- When filtering a loop by field, the
field_compareparameter now uses the same common comparison operators as theIftag - The default loop context is now set correctly on author and taxonomy term archive pages
- When filtering a loop by field, the
- Format tag
- New case options available: “lower” and “upper”
- Consolidated case conversions: camel, kebab, snake, pascal
- Taxonomy term loop
- Adds alias “terms” for “include”
- Field
postsgets posts of any post type that belongs to the current term
- Test compatibility with WordPress 6.0