Starting a Custom Template

Creation of a custom template can be started from scratch, however in this example we will first use the most simple template as a base. This is the latest version of our mobile first Listing ID search template. This is a simple input form giving us a lot of space and still uses the twig basics. We will go over the twig elements in this template. We won’t really cover the mixing in of HTML or CSS as that is pretty straight forward.

The html/twig for this template shown below.

Twig elements open and close with curly braces followed by a percent, hash, or another curly brace. The percent is for logic, the hash for a comment, and the additional curly brace is for calling a twig variable.  More on variables and options can be found in the twig documentation here.

The first twig elements used in our listing ID template are the imports called on line 1 and 2.

{% import "forms-1.001.twig" as form %}
{% import "searchTools-1.001.twig" as tools %}

This twig imports templates of preset twig “macros” to be used. These are much like loading a library. These imports are also being declared as shorter names such as “form” and “tools”. You will see in the twig file we call for the listingID variable from the tools import on line 13 as such:
{{ tools.listingID }}

Next we declare this block named “idxContent” with

{% block idxContent %} and at the end close with {% endblock %}

The block tag tells the template engine that a child template may override those portions of the template.

Now we use the spaceless tag to remove whitespace between HTML tags, not the whitespace within HTML tags or whitespace in plain text.

After an HTML element we add a comment and include another twig template:

{# only include the search nav on the frontend #}
{% include 'navbar-1.000.twig' %}

This will bring in the navigation template with links to the various IDX searches.

Here we begin to mix HTML and twig by using a twig variable to add the action url to the HTML form.
form action="{{ formAction }}"

The other twig elements in this file are logic. If statements in twig are much like in PHP.

For example {% if customNewSearch %} will be true if the customNewSearch variable is not empty.

Unlike PHP you must close the if statement with {% endif %}

In the next lesson, we will move things around and customize this page.