How can I create a custom user profile page without overlapping the registration and login pages?

Question

I'd like to create a custom user profile page, but if I use /user/% path then it will also overlap /user/registration, /user/login and so on...

Is there any ways to avoid it?

Answer 1

You can:

• customize the user profile page at /admin/config/people/accounts/display

• Change anything if you implement the hook_preprocess_user().

• Add blocks at admin/structure/block.

Answer 2

One approach is to create a custom template file for the user.

add a bit of code to your .theme file:

MYTHEME.theme:

function MYTHEME_theme_suggestions_user(&$suggestions, $variables, $hook) {

  // Define the view mode.
  $mode = $variables['elements']['#view_mode'];
  // Create a theme hook suggestion which has the view mode name in it.
  $suggestions[] = 'user__' . $mode;

}

The above tells Drupal to look for template files that fit the new naming conventions.

Then create a twig template file in MYTHEME/templates:

user--full.html.twig

<div class="user-full-wrapper">

    {% if content.user_picture | render %}
          {{ content.user_picture }}
    {% endif %}

    {% if content.field_name | render %}
          <p>{{ content.field_name }}</p>
    {% endif %}

</div>

The above html is just an example.

Now you have unique markup for just the user profile page in Drupal. From there it's just a matter of choosing fields, and adding styling.

Make sure to clear cache so Drupal will register your new twig file!