Add twig template to a custom Module, Block or Page

Step 1. Create your module and Block (/tutoriels/107/create-a-simple-block-programmatically)

Step 2. Add your template usin hook_theme()  (here module name = clock)

Example:

function clock_theme($existing, $type, $theme, $path) {

  return array(

    'clock' => array(

      'variables' => array(

        'icon' => NULL,

        'title' => NULL,

        'time' => NULL,

      ),

    ),

  );

}

You cal also use template_preprocess to handle your template.

Example:

function template_preprocess_clock(&$variables) {

  //Add global classes

  $variables['attributes']['class'][] = 'my_clock';

}

Add theme hook suggestions. Example from multivaluefield.module)

/**

 * Implements hook_theme_suggestions_HOOK().

 *  Add template suggestions.

 */

function multivaluefield_theme_suggestions_multivaluefield($variables) {

  $suggestions = array();

  $sett = $variables['settings'];

  $suggestions[] = 'multivaluefield__' . $sett['#field_name'];

  $suggestions[] = 'multivaluefield__' . $sett['#entity_type'];

  $suggestions[] = 'multivaluefield__' . $sett['#bundle'];

  $suggestions[] = 'multivaluefield__' . $sett['#field_name'] . '__' . $sett['#entity_type'] . '__' . $sett['#bundle'];

  return $suggestions;

}

Step 3. Create the twig template in clock/templates/clock.html.twig

Example:

<div {{ attributes }}>

  {% if icon %}

    <img class='clock_block_icon' src='{{ icon }}' alt='{{ title }}'/>

  {% endif %}

  <div class="clock_block_title" >{{ title }}</div>

  <div class="clock_block" data-time="{{ time }}"></div>

</div>

Step 4. Add the template to your block or page, using the render array

Example : 

return array(

      '#theme' => 'clock',

      '#icon' => $icon,

      '#title' => 'The Title',

      '#time' => "The Time is : ".date('H:i:s'),

    );

Finally, don't forget to clear cache and your blocked will use the new template.

Another example of add a template suggestions.

1. find the theme preprocess.

For that, activate the theme debug then analyse the code. For example, for the 'views_view_summary' you can find something like :

<!-- THEME DEBUG -->

<!-- CALL: theme('views_view_summary_unformatted') -->

<!-- FILE NAME SUGGESTIONS:

   * views-view-summary-unformatted-view-theviewname-block-1.tpl.php

   * views-view-summary-unformatted-view-theviewname.tpl.php

   x views-view-summary-unformatted.tpl.php

-->

Here, the theme function is "views_view_summary_unformatted" so preprocess is THEME_preprocess_views_view_summary_unformatted.

2. In the template.php of your theme, create new function THEME_preprocess_views_view_summary_unformatted and add the new template suggestion.

Example:

function mytheme_preprocess_views_view_summary_unformatted(&$variables){

  $variables['theme_hook_suggestions'][] = 'my_custom_template';

}