Skip to content

Templating Structure

Radoslav Georgiev edited this page Sep 3, 2016 · 1 revision

In Views and Templates we discussed the general difference between a normal PHP template and how it translates to a Twig template within this framework.

Now we'll explore how to actually create the structure for your themes and what are the main functions and variables you need.

Here is how the basics look:

<!DOCTYPE html>
<html {{ site.language_attributes }}>
<head>
	<meta charset="{{ site.charset }}">
	<link rel="pingback" href="{{ site.pingback_url }}">

	{{ site.head }}
</head>

<body {{ body_class() }}>
	<header>
		<a href="{{ site.url }}" id="logo">{{ site.name }}</a>

		{{ site.menu( 'main-menu?container=&menu_class=main-menu' ) }}
	</header>

	<div id="content">
		{% block content %}
			This page has no content.
		{% endblock %}
	</div>

	{{ site.footer }}
</body>
</html>

Reminder: All views should be placed within the views directory of your theme.


The site object

As you can see, the site object is responsible for handling most of the generic functionality of the website. It's full description can be found here.

I will not get into deeper details on this page, as the backbone can be copied from above.

Blocks

As you can see above, the content section above contains a single block, which states that the page has no content. This one and any other block can be overwritten within other templates, which extend the one above.

As per Twig practices, it's best to all the file above base.twig.

Next, let's use that template within the single.twig of our theme. It will look like this:

{% extends 'base.twig' %}

{% block content %}
    {# Page content here #}
{% endblock %}

Please note, that in this case we're not actually defining the block, but rather overwriting it.

File inclusion

When needed, you can include a sub-template or a template part in the following way:

{% for block in post.repeater_field %}
	{% include 'blocks/' ~ block.__type ~ '.twig' with block %}
	<hr />
{% endfor %}

Next article: Data mapping and dictionaries