Common “IF” statements used in Statamic websites

C

Especially for web designers new to Statamic and perhaps even new to programming, it can take some time to figure out how to manipulate Statamic-specific variables and incorporate the correct logic syntax to do what you want. Here are a few applicable if statements that might help you out!

How do I make an “if” statement for “if homepage” do this?

Look for the URL’s segments; if you don’t have one, you’re on the home page (example.com or example.com/segment_1). Use the ! (bang symbol/exclamation point) to mean “does not equal” or “does not have.”

The following code reads: “If there is no segment_1, do XYZ.

{{ if ! segment_1 }}

{{ /if }} 

This is really useful code for calling a certain script only on the homepage. It can also be used if you’re manually coding your navigation and need to add an active or current class to the navigation link that you’re on. Here’s the code for making the homepage link active in the navigation.

<li class="nav-item">
     <a class="nav-link{{ if ! segment_1 }} active {{/if}}" href="/">Home</a>
</li> 

How do I make an if statement for just a specific page, like the contact page?

Certain website pages might require loading specific CSS or JS files only certain pages. In the example below, I’m using an IF statement to look for the 1st segment of my URL after my domain name. The code below reads as the following: “If the 1st segment is “contact” (such as example.com/contact) then load this extra Recaptcha files.

Syntax tip: make sure to wrap the segment name in quotes.

{{ if segment_1 == "contact" }}
{{ recaptcha:head }}
<!-- https://statamic.com/addons/aryeh-raber/google-recaptcha  Addon Statamic V2 -->
{{ /if }}

This type of syntax can also be used if you’re manually creating your navigation and need to add an active or current class to the active page and even the children pages in your navigation.

In this code, the active class is added to the top-level nav if the page you are on has a 1st segment of “products.” This allows “Products” to be active for any of the dozen of pages that are children of the products directory.

<ul class="navbar-nav"> 
    <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle {{ if segment_1 == 'products'}} active {{/if}}"
              href="#"
              data-bs-toggle="dropdown"
              aria-expanded="false">Products </a>
            <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="/products">All Products</a></li>
                      <li><a class="dropdown-item" href="/products/fittings">Fittings</a></li>
            </ul>
    </li>
</ul>

How do I make an IF OR statement for more than one page?

To add more than one page or segment to your if statement, include || (means or) and segment_1 == “segment name.” Don’t forget to repeat the word segment_1. Please note the syntax that IF only needs to be typed once.

This code reads as: “If the first segment of your URL is contact (such as example.com/contact) or the first segment is services (such as example.com/services), then do whatever is between the opening and the closure of this if statement.

{{ if segment_1 == "contact" || segment_1 == "services" }}

{{ /if }}

Useful Statamic Forum threads for further reading:


Happing Coding!

Looking for more posts about StatamicWe’ve got a few because Statamic is our favorite Content Management System!

About the author

Kelly Barkhurst

Designer to Fullstack is my place to geek out and share tech solutions from my day-to-day as a graphic designer, programmer, and business owner (portfolio). I also write on Arts and Bricks, a parenting blog and decal shop that embraces my family’s love of Art and LEGO bricks!

Add comment

By Kelly Barkhurst

Recent Posts

Archives

Categories