Skip to main content

Loops & Logic 101

If you’ve seen or written any L&L markup, you’re undoubtedly familiar with the legendary Loop—the queen of queries and the tag to end all tags. The Loop tag is one of the most useful and important tags available in the L&L templating language. So important, in fact, that we named the plugin after it! And while its core concept is simple, mastering this tag requires having a good mental model of why and how it works. In this post, we’ll dive deep into what the Loop tag does and how you can use it as the foundation for any L&L template you could imagine.

What does the Loop tag do?​

A loop can be thought of as an instruction that tells WordPress to look through the items in your site’s database to find every piece of content that matches a certain set of criteria. For each post that matches that criteria, the inner content of the loop runs once, allowing you to display the fields of each post or do any number of things using the other tags available in L&L. For a more detailed explanation of the Loop tag, take a look at our absolute beginner’s guide to Loops & Logic.

We should note that we didn’t invent the name; WordPress’s own theme development handbook refers to the PHP mechanism of getting post content as “The Loop”.

When should the Loop tag be used?​

If you only need to work with fields from the current post (the post on which you’ve placed your Tangible Template), then there’s no need to use the Loop tag to get the content. Using tags like <Field title> / at the top level of your template (i.e. not nested inside other tags or loops) will get field data from the current post.

<h2>Recent posts by <Field author_full_name /></h2>
<ul>
  <Loop type=post author="{Field author}" count=5 orderby=date order=desc>
    <li>
      <a href="{Field url}"><Field title /></a>
      <Loop taxonomy=category post=current>
        <If check="{Field name}" value=best-practices>
           Useful tips!
        </If>
      </Loop>
    </li>
  </Loop>
</ul>

Autres mises en formes​

Info

lorem io ìnfo vert

Danger

lorem io 2 rouge

Avertissement

lorem io 3 jaune

pour la beauté du geste

ui bleu

pour la beauté du geste

ui gris

Insertion d'une image​

Nous allons insérer une image du personnage principal de Trigun pour le plaisir :

image

voila une liste de code pour le plaisir :

  • blablabla
  • blablabla
  • blablabla
    • blablabla

voila une seconde liste :

  1. blablabla
  2. blablabla
  3. blablabla
  4. blablabla
  5. blablabla

Apprend la mise en forme avec moi​

Modify the docusaurus.config.js file:

docusaurus.config.js
module.exports = {
  themeConfig: {
    navbar: {
      items: [
        {
          type: 'docsVersionDropdown',
        },
      ],
    },
  },
};
docusaurus.config.js
module.exports = {
  themeConfig: {
    navbar: {
      items: [
        {
          type: 'docsVersionDropdown',
        },
      ],
    },
  },
};
npm run docusaurus docs:version 1.0

JavaScript​

<button onClick={() => alert('it s an alert')}>Click me!</button>

Bloc de code avec titre​

le titre
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr'],
  },
};

Test de la section déroulante​

Details element example​

Toggle me!
This is the detailed content

Nested toggle! Some surprise inside...
😲😲😲😲😲

Test section déroulante​

Markdown is declarative
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in vol

Test triple choix​

Ceci est une pomme 🍎

Test triple choix​

docusaurus.config.js
module.exports = {
  themeConfig: {
    navbar: {
      items: [
        {
          type: 'docsVersionDropdown',
        },
      ],
    },
  },
};

Quotes​

Markdown quotes are beautifully styled:

Easy to maintain open source documentation websites.

— Docusaurus