4

Earlier we use the below code for creating custom template of user login ,user profile edit and forget password forms:

 function Yourtheme_theme($existing, $type, $theme, $path){
 return array(
 'user_register' => array(
 'render element' => 'form',
 'template' => 'templates/user-register',
),



'user_pass' => array(
  'render element' => 'form',
  'template' => 'templates/user-pass',
),

'user_profile_form' => array(
  // Forms always take the form argument.
  'arguments' => array('form' => NULL),
  'render element' => 'form',
  'template' => 'templates/user-profile-edit',
),
);
}

function Yourtheme_preprocess_user_register(&$variables) {

$variables['rendered'] = drupal_render_children($variables['form']);
}

function Yourtheme_preprocess_user_login(&$variables) {

$variables['rendered'] = drupal_render_children($variables['form']);
}

How to Create same twig template files in drupal 8 for customizing user login,user profile edit and forget password forms?

  • Have you enabled the twig debugging?? – Shreya Shetty Nov 15 '16 at 12:47
  • ya already done – user52318 Nov 15 '16 at 13:16
  • but i am asking for custom templates not theme suggestions – user52318 Nov 15 '16 at 13:19
  • the theme suggestions set up the custom templates, you don't need a custom hook in hook_theme and you don't need to render the form in a preprocess. See my answer. – oknate Nov 15 '16 at 16:27
13

Using hook_theme_suggestions_alter, you can create whatever template suggestions you like. For example, based on the form id. Just remember, the suggestion has underscores ("_"), but the template file has hyphens ("-").

function Yourtheme_theme_suggestions_alter(array &$suggestions, array $variables, $hook) {

  if ($hook == 'form' & !empty($variables['element']['#id'])) {
    $suggestions[] = 'form__' . str_replace('-', '_', $variables['element']['#id']);
  }
}

then you would create templates in your theme, such as

form--user-register-form.html.twig

and

form--user-login-form.html.twig

You are doing some non-standard and unnecessary things by rendering the form in a preprocess hook and registering custom theme hooks for your forms. You don't need to create new hooks in hook_theme, you can just use the suggestions, and it will do the rest, after you clear cache.

You can render your elements within the template.

For example, for form--user-login.html.twig:

<div class="login-form login-form__wrapper">
    <form{{ attributes }}>
        <div class="login-form__top">
            <h3>hello world</h3>
            <div id="error_messages"></div>
            {{ element.messages }}
            {{ element.name }} {# username element #}
            {{ element.pass }} {# password element #}
            <div class="login-form__help_actions">
                <input id="show_password" class="show_password" type="checkbox" />
                <label class="password-toggle" for="show_password">Show password</label>
                <a href="/user/password" class="forgot-password">Forgot Password?</a>
            </div>
            {{ element.form_build_id }} {# required #}
            {{ element.form_id }} {# required #}
            <div class="login-form__submit">
                {{ element.actions.submit }}
            </div>
        </div>
    </form>
</div>
  • 3
    Thanks for this. Note that you will need to convert hyphens to underscores when converting the form id to a suggestion: $suggestions[] = 'form__' . str_replace('-', '_', $variables['element']['#id']);. Also, the resulting template file should be named form--user-login-form.html.twig. – othermachines May 21 '17 at 21:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy