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 }}How do I make an IF statement to show content only if the field/variable exists?
This is useful for wrapping a div or area that only shows if that field/variable exists. In my example below the field is “services.” I’m only showing the div if the “services” form field has content.
{{ if services }}
<div></div>
{{ /if }}Useful Statamic Forum threads for further reading:
- If else/if display partial for hero area on specific pages (not all pages
- Conditional statements in V3
- Simple if conditional for multiple segment_1
Happing Coding!
Looking for more posts about Statamic? We’ve got a few because Statamic is our favorite Content Management System!
