Theme hook not found on custom module

Question

I'm trying to create a module which adds a page, the controller works but I cannot render a twig template for it.

The page layout is displayed without the page I created and this warning is reported in the logs:

"Theme hook eu_calendar not found."

but I do have the hook defined

This is the controller:

class EuCalendarController extends ControllerBase {

    public function index() {
        return [
            '#title' => 'my title',
            '#theme' => 'eu_calendar',
            '#description' => 'description test',
        ];
    }
}

Module file:

function eu_calendar_theme($existing, $type, $theme, $path) {
    return [
        'eu_calendar' => [
            'template' => 'index',
        ],
    ];
}

I also tried adding variables like

function eu_calendar_theme($existing, $type, $theme, $path) {
    return [
        'eu_calendar' => [
            'variables' => [
                'test_var' => NULL,
            ],
            'template' => 'index',
        ],
    ];
}

What am I missing here?

And do I need to configure anything with the regions, I want my module to be displayed in the content region by default...

Any documentation or tutorial is also welcome, I read a bunch of them none of them is explaining the options and details.

Answer 1

myModule.module

function myModule_theme($existing, $type, $theme, $path) {    
return array(
 'pagina_3' => array(
   'variables' => array(
     'titulo' => 'title', 
     'descripcion' => 'description',
     'formulario'   => NULL
      ),
    'template' => 'pagina_3'
   )
  );


}

mymodule/templates/pagina_3.html.twig

<div class="row">

    <div class="col-md-6">
        <h2>{{ titulo }}</h2>
        <p>{{ descripcion }}</p>
    </div>

    <div class="col-md-6">
        {{ formulario }}
    </div>

</div>

myModuleController.php

public function verPagina3() {

    $form = $this->formBuilder()->getForm('Drupal\myModule\Form\InsertarGastoForm');

    // Le pasamos el formulario y demás a la vista (tema configurado en el module)
        return [
            '#theme' => 'pagina_3',
            '#titulo' => $this->t('Formulario crear empresa'),
            '#descripcion' => 'Formulario para crear una nueva empresa en Drupal 8',
            '#formulario' => $form
        ];


   }

Answer 2

I guess I couldn't be able to clear the caches or something. I changed the hook name, uninstalled the module and installed it back, cleared the caches, restarted php-fpm and memcached etc. and it started working somehow.

For reference this is how theming works, may help other newcomers like me:

First the theme and the variables that needs to be passed is defined inside the *.module file. The trick is the variables key, without it Drupal ignores the definition.

The key of the array is also the name of the twig file by default, which can be overridden with template. So no need to pass template if it's the same with the key.

The theme definition to be rendered is defined inside the controller with #theme. Any variable that is not defined in the theme definition are not sent to the template even it's sent in the controller.

So the final working code is:

Module: (modules/eu_calendar/eu_calendar.module)

function eu_calendar_theme($existing, $type, $theme, $path) {
    return [
        'index' => [
            'variables' => [
               'featured' => [],
               'events' => [],
            ],
        ],
    ];
}

Controller: (modules/eu_calendar/src/Controller/EuCalendarController.php)

namespace Drupal\eu_calendar\Controller;

use Drupal\Core\Controller\ControllerBase;

class EuCalendarController extends ControllerBase {
    public function index() {
        return [
            '#theme' => 'index',
            '#events' => ['event1', 'event2'],
            '#featured' => ['featured1', 'featured2'],
        ];
    }
}

Template: (modules/eu_calendar/templates/index.html.twig)

<h3>Featured Events</h3>
<ul>
    {% for featured_event in featured %}
    <li>{{ featured_event }}</li>
    {% endfor %}
</ul>

<h3>Events</h3>
<ul>
    {% for event in events %}
    <li>{{ event }}</li>
    {% endfor %}
</ul>

Answer 3

This is the controller:

public function index()
{
    $build['myelement'] = array(
        '#theme' => 'eu_calendar',
        '#title' => 'my title',
        '#description' => 'description test',
    );
    return $build;
}

Module file:

function eu_calendar_theme($existing, $type, $theme, $path)
{
    return array(
        'euCalendar' => array(
            'template' => 'index',
            'path' => $path . '/templates',
            'variables' => array(
                'title' => NULL,
                'description' => FALSE,
            ),
        ),
    );
}