Understanding Structure Elements in Craft CMS

Say goodbye to cluttered content with Craft CMS structure elements

Heirarchy is King

Structure elements in Craft CMS are an important feature that allows you to organize and display content in a hierarchical manner. In this blog post, we will go over the basics of structure elements and how to use them in your Craft CMS projects.

Using structure elements in Craft CMS can be handy for a number of reasons. Here are a few benefits of using structure elements and referencing them in templates:

Organized content: Structure elements allow you to organize your content in a well structured intuitive way, making it easier to manage and navigate. This can be especially useful for websites with a large amount of content, such as an online store with multiple categories and subcategories.
Consistent navigation: By using structure elements in your templates, you can ensure that your website's navigation is consistent across all pages. This can improve the user experience and make it easier for visitors to find what they are looking for.
Reusable code: When you use structure elements in your templates, you can reuse the same code for displaying the content on multiple pages. This can save time and make it easier to update your website in the future.
Better SEO: Using structure elements can also help improve your website's search engine optimization (SEO). By organizing your content in a logical manner, you can make it easier for search engines to understand the structure and content of your website.

What are Structure Elements in Craft CMS?

Structure elements are a way to organize content in Craft CMS using a hierarchical structure. This means that you can create a parent element and child elements, with the child elements nested underneath the parent element in the hierarchy.

For example, you might have a "About Us" parent element with several child elements for each member of your team. This allows you to easily organize and display the content in a logical and organized manner.

How to Use Structure Elements in Craft CMS

To use structure elements in Craft CMS, you first need to create a new structure section. To do this, go to the "Settings" section of the control panel and click on the "Sections" tab. Then, click the "New Section" button and select "Structure" as the section type.

Next, you can create your parent and child elements in the structure. To create a parent element, click on the "New Entry" button and select the parent element from the dropdown menu. To create a child element, click on the "New Entry" button for the parent element and select the child element from the dropdown menu.

Once you have created your structure, you can use the nav tag in your templates to display the elements in the structure hierarchy. For example, the following code will display a nested list of all the elements in the structure:

<ul><li>
  {% nav element in structure %}
    </li><li>{{ element.title }}
      {% ifchildren %}
        <ul><li>
          {% children %}
        </li></ul>
      {% endifchildren %}
    
  {% endnav %}
</li></ul>

Usage In Templates

It can be handy to be able to reference the parent or child of the current element in a Twig template for a number of reasons. While we discussed usage of navigation above, Here are a few other examples:

Sibling pages: You might want to display a list of pages that are at the same level as the current page in the hierarchy. By referencing the parent element of the current page, you can display a list of its children (i.e., sibling pages).
Related content: You might want to display related content on a page based on its position in the hierarchy. For example, if the current page is a child of a parent page about a particular topic, you could display other related pages that are also children of that parent page.

Here is some code which can help in either of the above scenarios:

{# Get the parent element of the current page #}
{% set parent = entry.parent %}

{# Display a list of the parent's children (i.e., sibling pages) #}
<ul><li>
  {% for child in parent.children %}
    </li><li>{{ child.title }}
  {% endfor %}
</li></ul>

{# Displaying related content #}
{# Get the parent element of the current page #}
{% set parent = entry.parent %}

{# Display a list of related pages that are children of the same parent #}
<ul><li>
  {% for child in parent.children %}
    {% if child.id != entry.id %}
      </li><li>{{ child.title }}
    {% endif %}
  {% endfor %}
</li></ul>

Put it to use!

Structure elements in Craft CMS are a useful tool for organizing and displaying content in a hierarchical manner. By following the steps outlined in this tutorial, you can easily create and use structure elements in your Craft CMS projects.