how theme/template connected/related to each other

Question

for example, I have:

1. module id: module_id (file: module_id.info.yml)
2. FieldType ID: FieldTypeID (file: /src/plugin/Field/FieldType/FieldType.php)
3. FieldWidget: FieldDefaultWidget (file: /src/plugin/Field/FieldWidget/FieldDefaultWidget.php)
4. FieldFormatter: FieldDefaultFormatter (file: /src/plugin/Field/FieldWidget/FieldDefaultFormatter.php)

and inside my field formatter:

public function viewElements(FieldItemListInterface $items, $langcode) {
    $elements = [];
    foreach ($items as $delta => $item) {
      $elements[$delta] = [
        '#theme' => 'my_field',
        '#type' => 'markup',
        // etc...
      ];
    }

    return $elements;
  }

5. I have file: my_field.module

with function:

function my_field_theme() {
  return array(
    'location_field' => array(
      'variables' => array(
        'x' => NULL,
        'y' => NULL,
        'z' => NULL,
      ),
      'template' => 'my_field',
    ),
  );
}

6. and I have template file: /templates/my_field.html.twig

as simple as:

<section class="class">
  <h2>name</h2>
  <div class="cls" data-x="x" data-y="y" data-z="z">content</div>
</section>

with that, seems like i can't see my template, which i don't have any idea why?

how is theme or template name relate with the filename (or ID or anything)? - how are they connected each other?

what is the rule for that?

Thank you,

AnD

Answer 1

If your code is only in one module with the name module_id, then in 5. the file should be named module_id.module and the function module_id_theme()