Custom twig template for Drupal8 Custom module routing

Briefly in this tutorial you can learn how to create a custom template using hook_theme in drupal 8 for your custom routing.

basically the custom route is handle by controller method or by the form to display, etc so the question is can you create the custom twig template for that or not, so answer is yes. you need to follow the below steps and you are done.

let's start

1) I hope you understand the basic custom module creation, so start form scratch, create the module folder let say "custom_template_routing"  and structure of module shows in below image 

open/create custom_template_routing.info.yml and write below code into it

name: Custom template routing
description: template for custom route drupal8
core: 8.x
type: module

save it and now module appearers in the module section of drupal 8

2) Create "custom_template_routing.routing.yml" and write below code into it.

custom_template_routing.landingpage:
 path: 'template-overview'
 defaults:
  _controller: '\Drupal\custom_template_routing\Controller\CustomRoute::content'
  _title: 'Template overview'
 requirements:
  _permission: 'access content'

it will create the path 'template-overview' and page is accessible from /template-overview on website

3) Create the src/Controller folder as defined above and create CustomRoute.php in that and add below code in CustomRoute.php

<?php

namespace Drupal\custom_template_routing\Controller;

use Drupal\Core\Controller\ControllerBase;

class CustomRoute extends ControllerBase {
    public function content() {
        return [
            '#theme' => 'template_overview',
            '#org_name' => "key2goal tutorials",
            '#website_link' => "https://www.key2goal.com/"
        ];
    }
}

in this "#theme" defined the machine name of template will address in .module file below

and '#org_name' and '#website_link' are custom variable, you can add as many variables which you need to pass in custom template.

4) Create /templates directory at root of the module and create a twig template name as "template_overview.html.twig" in that and add below code

<h1>This is custom template page</h1>
<p>you can see this content by custom_template_routing module</p>

<h1>Welcom to {{ org_name }}</h1>
<p> Visit website by <a href='{{ website_link }}'>Click here</p>

5) Now create "custom_template_routing.module" file in this we define hook_theme function for over template, open and add the following code in that

<?php

/**
 * Implements hook_theme().
 * 
 * Register a module or theme's theme implementations.
 * The implementations declared by this hook specify how a particular render array is to be rendered as HTML.
 * 
 * See: https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_theme/8.2.x
 * 
 * If you change this method, clear theme registry and routing table 'drush cc theme-registry' and 'drush cc router'.
 */
function custom_template_routing_theme($existing, $type, $theme, $path) {

    return [		
      'template_overview' => [
        'render element' => 'children',
        'template' => 'template-overview',
        'path' => $path . '/templates',
        'variables' => [
          'org_name' => '',
          'website_link' => "",
        ],
      ],
    ];
  
  }

Now clear the cache if you already enable the module, visit page you can see the content of twig template over there if there is no issue like below image 

hopes above process will helps you let as know thought in comment

Download the project form github