Adding a template to your Drupal theme.

Drupal templates are .html.twig files that are stored in a “templates” folder in your theme. You don’t have to do anything to register them. If they are in the templates folder Drupal will use them (after you clear the cache).

The best way to understand a template file and the syntax used is to look at the template files that are used by the Bartik theme. They can be found in your Drupal download in core > themes > bartik > templates.

The one we want to look at first is page.html.twig. You can basically copy this file and delete everything you don’t want – we are keeping this simple at the start after all.

My page.html.twig file, saved in my templates folder, looks like this for now:

        <nav id="top-menu">
          {{ page.secondary_menu }}
        </nav>

<hr class="section-separator" />

        <header id="header">
          {{ page.header }}
        </header>

<hr class="section-separator" />        

        <nav id="main-menu">
          {{ page.primary_menu }}
        </nav>

<hr class="section-separator" />

    <main id="main-content">

      {% if page.breadcrumb %}

        <nav id="breadcrumbs">
          {{ page.breadcrumb }}
        </nav>

      {% endif %}

        <div id="main-content">
          {{ page.content }}
        </div>

     </main>

<hr class="section-separator" />

      {% if page.sidebar_first %}

        <aside id="sidebar">
           {{ page.sidebar_first }}
        </aside>

<hr class="section-separator" />

      {% endif %}

<hr class="section-separator" />

        <footer id="footer">
           {{ page.footer }}
        </footer>

And the output now looks like this:

Now I have all my content in the order that I want it to appear. I also added a customised version of the html.html.twig file found in core > modules > system > templates. Basically I just added this to the head to stop the site being indexed for now, and load FontAwesome.

    <meta name="robots" content="noindex">
    <link rel='stylesheet' id='font-awesome-css'  href='https://use.fontawesome.com/releases/v5.8.1/css/all.css' media='all' />