While we’ve deliberately made L&L syntax around opening loops much more verbose than in CCS for good reasons (such as enforcing better performance and understanding of loop contexts), your specific use case might be best served by a simpler shortcode like the ones CCS provided.

We’d recommend avoiding opening multiple loops like CCS would if you need to fetch more than one piece of information from the same loop context, but if you often have to get a solitary piece of information with little to no additional transformation or markup, here’s how to get a more CCS-like experience in L&L.

User email shortcode

Let’s take a look at how you might re-create a commonly used CCS shortcode:

[user email]

Printing the current user’s email in L&L means opening a user loop and setting the ID to “current” to get the current user. From there you can print the email field.

<Loop type=user id=current>
  <Field email />
</Loop>

Since you can later call a template by its slug, we can name the template “User Email” and set the slug to “user-email”. Once we publish the template, we can call it up as needed using this shortcode:

[template name=user-email]

Printing the content of a given page in L&L means opening a page loop and passing the ID of the page you want to display. Once the loop is open, you can print the content field.

Page content shortcode with page ID parameter

While the [user email] is quite simple, some CCS shortcodes work with parameters to specify the data you want to fetch. A good example of this is the [content type=page id=##] shortcode which outputs the content of the page matching the ID you specify.

To print the content of a given page in L&Lm you first open a page loop and pass the ID of the page you want to display. Once the loop is open, you can print the content field.

<Loop type=page id="##">
  <Field content />
</Loop>

Much like the user email example, you can now save the template with a slug like “content” to be able to easily call it in using [template name=content]. The issue with this approach is that the page ID is hard-coded into the template. You’d have to create separate templates for every individual page you wanted to display!

Luckily, there’s a better way to approach this.
Simply replace the hard-coded ID with a local variable:

<Loop type=page id="{Get local=post_in}">
  <Field content />
</Loop>

Once the local variable is in place, you can pass values to it using shortcode parameters. We can now use a single shortcode to reference any page’s content by page ID:

[template name=content post_in=3153]

How to think about using L&L vs CCS

It’s true that CCS made it easy to use dynamic data inline without needing to set up a shortcode, but it also lead to thoughtless site architectures that lead to poor performance and maintenance difficulties at scale.

More often than not, when you want something dynamic in your layout, it’s not a one-off occurrence on a single page. That page typically has several datapoints from the same loop context (meaning that a combined L&L loop query would improve performance over the CCS approach which has to run an additional query for every shortcode used) or you need to pull in similar datapoints for all instances of a certain kind of post (in which case you’re better off using L&L in the theme template, layout or block in your theme builder rather than using the post content like with CCS).

For example, imagine you’ve been placing the CCS shortcode [content type=page id=##] at the bottom of every one of your 300 blog post to pull in the content of a relevant page. Now you want to apply a special CSS class name to the content so you can style it everywhere. With the CCS shortcodes, you’d have to track down all 300 instances of the shortcode and append the CCS shortcode parameter to add the class name 300 times. With L&L you’d simply edit your template once by writing the class name like you normally would in HTML.

You can take this a step further with Loops & Logic. The page loop that outputs the content could be part of the blog post template itself using a page builder’s theme builder, Gutenberg FSE or L&L’s layout system (or even PHP theme files). You could just add an ACF field to blog posts to select the page you want and have it baked right into the template. Using L&L’s conditional logic, you could even skip rendering that part of the template if the ACF field is empty.

While simpler CCS use cases may feel more complicated with L&L, you actually have a lot more flexibility and ease of maintenance down the road as you improve your site when you use Loops & Logic well. That may mean rethinking the excessive use of one-off shortcodes, and we encourage people to carefully consider whether it’s even worth trying to replicate the CCS approach when so many new options are available.


Leave a Reply

Your email address will not be published.