{"id":42297,"date":"2016-11-24T10:58:11","date_gmt":"2016-11-24T05:28:11","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=42297"},"modified":"2016-12-05T17:24:06","modified_gmt":"2016-12-05T11:54:06","slug":"how-to-change-theme-by-role-in-drupal-8-x","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/how-to-change-theme-by-role-in-drupal-8-x\/","title":{"rendered":"How to change theme by Role in Drupal 8.x"},"content":{"rendered":"

How to change theme by Role in Drupal 8.x<\/strong><\/p>\n

Even before I start, I would like to shed some light on what are Themes in Drupal. A theme is a bunch of files that defines the presentation layer. There are many contributed themes in Drupal<\/a> project that can be found under \u2018Themes\u2019. For a programmer, there are 2 kinds of themes – Contributed & Custom Themes.<\/span><\/p>\n

    \n
  1. A contributed theme is what you download from Drupal.org and install in your Drupal package.<\/span><\/li>\n
  2. A custom theme is what you build your own either from a base or custom theme.<\/span><\/li>\n<\/ol>\n

    So the question arises what\u2019s the relation between roles & themes and why there is a need to switch themes for different roles. <\/span><\/p>\n

    Role in Drupal is used to manage user permissions on the website. A set of permissions is assigned to a role and these roles can be assigned to users. \u00a0So basically, different roles mean\u00a0different permissions related to that role.<\/span><\/p>\n

    This is actually a feature request that arises on demand\/need. Also if you are familiar with Drupal 7\/8<\/a> then you must have seen a\u00a0different theme for admin role (theme name used is seven) & for roles anonymous or authenticated (theme name used is Bartik). Now let\u2019s take an example of having 9-10 different roles on a Drupal site, all are sharing the same theme i.e Bartik. If in such a scenario a need arises to have different themes (layers\/presentations) for different roles, a<\/span>\u00a0user with role A having theme Bartik (Drupal core theme name) and User with Role B needs to have classy (Drupal core theme name) theme. Then, for achieving the above state, the process explained below in the article can be used.<\/p>\n

    Earlier in Drupal 7, there were only two files i.e module_name.info and module_name.module that were easy to understand and configure. However, with the launch of Drupal 8 \u00a0in November 2015, the architecture is changed from procedural to MVC.<\/span><\/p>\n

    Now, with new PHP architecture in Drupal 8<\/a> which is based on symphony allows us to learn new things. For Instance, the new twig system in theming\u00a0restricts writing custom PHP scripts in templates which was earlier possible with Drupal 7. <\/span><\/p>\n

    OOPs concepts, classes etc.have also been introduced in Drupal 8.\u00a0<\/span>However to develop a new module or theme in Drupal. There are some key points that a developer should keep in mind.<\/span><\/p>\n

      \n
    1. There are many contributed modules\/themes that are present in Drupal. So, there is no need to create a new one. Also, t<\/span>here is a module that is present for only Drupal 7 version but, not for Drupal 8. And also contributing to open source platforms like Drupal enhances your company’s profile on Drupal.org.<\/li>\n<\/ol>\n
        \n
      1. What was the process in Drupal 7 ?\u00a0<\/span>The approach to changing theme dynamically on runtime needs to change completely as the architecture of Drupal 8 has changed a lot. Also, the hook system will be dropped entirely in Drupal 9. So, keeping in mind this whole thing. There is a need to search a new approach on Drupal.org. ‘Change in Records<\/strong>‘\u00a0is where you can explore the changes in previous versions and the new things introduced.<\/span><\/li>\n<\/ol>\n
          \n
        1. Searching in <\/span>Change in Records:\u00a0<\/b>By searching for new changes in Drupal 8, I found some useful links like hook_custom_theme<\/b> is <\/span>replaced by theme callback. Now, that I had a starting point so, I began my search for theme negotiators<\/b>. Theme Negotiators are responsible for any alterations on themes.<\/span><\/li>\n<\/ol>\n

          CODE:<\/b><\/p>\n

            \n
          1. Build the module architecture first<\/span><\/li>\n
          2. Create a module folder inside ROOT\/modules\/custom\/role_based_theme_switcher<\/span><\/li>\n
          3. Create a role_based_theme_switcher.info.yml file, the contents in the file are as follows:<\/span><\/li>\n<\/ol>\n

            [java]
            \n\tname: Role Based Theme Switcher
            \n\tdescription: This module is for switching the theme according to Role
            \n\tpackage: Custom<\/p>\n

            \ttype: module
            \n\tcore: 8.x
            \n\t[\/java]<\/p>\n

              \n
            1. Create role_based_theme_switcher.services.yml file:<\/span><\/li>\n<\/ol>\n

              [java]services:
              \n theme.negotiator.role_based_theme_switcher:
              \n\tclass: Drupal\\role_based_theme_switcher\\Theme\\RoleNegotiator
              \n\ttags:
              \n \t– { name: theme_negotiator, priority: 10 }[\/java]<\/p>\n

              If you want to provide the form settings with the configuration you should follow step 3 & 4 otherwise skip.<\/p>\n

                \n
              1. Create routing file the location will be:<\/span><\/li>\n<\/ol>\n

                ROOT\/modules\/role_based_theme_switcher\/role_based_theme_switcher.routing.yml<\/span><\/p>\n

                [java]
                \n role_based_theme_switcher.settings:
                \n\tpath: ‘\/admin\/structure\/role_based_theme_switcher\/settings’
                \n\tdefaults:
                \n \t_form: ‘\\Drupal\\role_based_theme_switcher\\Form\\AdminSettingsForm’
                \n \t_title: ‘URL Setting’
                \n\trequirements:
                \n \t_permission: ‘administer site configuration’
                \n[\/java]<\/p>\n

                  \n
                1. Define your configuration file, which needs to be placed at the following location:<\/span><\/li>\n<\/ol>\n

                  ROOT\/modules\/role_based_theme_switcher\/config\/install\/role_based_theme_switcher.RoleBasedThemeSwitchConfig.yml<\/span><\/p>\n

                  You can define your own configuration that we will be using for storing the form information submitted by the user.<\/span><\/p>\n

                  Themeroll:<\/strong><\/p>\n

                  Remember you can define any name within the config file like:<\/p>\n

                  role_based_theme_switcher.config:<\/p>\n

                  5. Create a configuration form in admin:<\/p>\n

                  The for file should be placed at a specific location.
                  \nROOT\/modules\/role_based_theme_switcher\/src\/Form\/AdminSettingsForm.php<\/p>\n

                  Code:<\/p>\n

                  [java]
                  \n<?php<\/p>\n

                  namespace Drupal\\role_based_theme_switcher\\Form;<\/p>\n

                  use Drupal\\Core\\Form\\FormBase;
                  \nuse Drupal\\Core\\Form\\ConfigFormBase;
                  \nuse Drupal\\Core\\Form\\FormStateInterface;
                  \nuse Drupal\\user\\Entity;
                  \nuse Drupal\\user\\Entity\\Role;
                  \nuse Drupal\\Core\\Extension\\ThemeHandler;
                  \nuse Symfony\\Component\\DependencyInjection\\ContainerInterface;<\/p>\n

                  \/**
                  \n * Configure Role Based settings for this site.
                  \n *
                  \n * @category Role_Based_Theme_Switcher
                  \n *
                  \n * @package Role_Based_Theme_Switcher
                  \n *
                  \n * @author pen <author details>
                  \n *
                  \n * @link https:\/\/www.drupal.org\/sandbox\/pen\/2760771 description
                  \n *\/
                  \nclass AdminSettingsForm extends ConfigFormBase {
                  \n protected $themeGlobal;
                  \n \/**
                  \n * {@inheritdoc}
                  \n *\/
                  \n public function __construct(ThemeHandler $themeGlobal) {
                  \n $this->themeGlobal = $themeGlobal;
                  \n }
                  \n \/**
                  \n * {@inheritdoc}
                  \n *\/
                  \n public static function create(ContainerInterface $container) {
                  \n\treturn new static(
                  \n $container->get(‘theme_handler’)
                  \n\t);
                  \n }
                  \n \/**
                  \n * {@inheritdoc}
                  \n *\/
                  \n public function getFormId() {
                  \n\treturn ‘role_admin_settings’;
                  \n }<\/p>\n

                  \/**
                  \n * {@inheritdoc}
                  \n *\/
                  \n protected function getEditableConfigNames() {
                  \n\treturn [
                  \n ‘role_based_theme_switcher.RoleBasedThemeSwitchConfig’,
                  \n\t];
                  \n }<\/p>\n

                  \/**
                  \n * {@inheritdoc}
                  \n *
                  \n * Implements admin settings form.
                  \n *
                  \n * @param array $form
                  \n * From render array.
                  \n * @param \\Drupal\\Core\\Form\\FormStateInterface $form_state
                  \n * Current state of form.
                  \n *\/
                  \n public function buildForm(array $form, FormStateInterface $form_state) {
                  \n\t$themes = $this->themeGlobal->listInfo();
                  \n\t$themeNames = array(” => ‘–Select–‘);
                  \n\tforeach ($themes as $key => $value) {
                  \n $themeNames[$key] = $key;
                  \n\t}
                  \n\t$roles = Role::loadMultiple();
                  \n\t$roleThemes = $this->config(‘role_based_theme_switcher.RoleBasedThemeSwitchConfig’);
                  \n $form[‘role_theme’] = array(
                  \n \t‘#type’ => ‘table’,
                  \n \t‘#header’ => array(
                  \n \tt(‘Label’),
                  \n \tt(‘Themes List’),
                  \n \tt(‘Weight’),
                  \n \t),
                  \n \t‘#empty’ => t(‘There are no items yet. Add an item.’, array()),
                  \n \t\/\/ TableDrag: Each array value is a list of callback arguments for
                  \n \t\/\/ drupal_add_tabledrag(). The #id of the table is automatically prepended;
                  \n \t\/\/ if there is none, an HTML ID is auto-generated.
                  \n \t‘#tabledrag’ => array(
                  \n \tarray(
                  \n \t‘action’ => ‘order’,
                  \n ‘relationship’ => ‘sibling’,
                  \n \t‘group’ => ‘role_theme-order-weight’,
                  \n \t),
                  \n \t),
                  \n\t);
                  \n\tif (!empty($roleThemes->get(‘roletheme’))) {
                  \n \t$roleThemes = $roleThemes->get(‘roletheme’);
                  \n \tif (count($roleThemes) == count($roles)) {
                  \n \t$roles = $roleThemes;
                  \n \t}
                  \n \telseif (count($roleThemes) != count($roles)) {
                  \n \tforeach ($roles as $rem_key => $rem_val) {
                  \n \tif (!array_key_exists($rem_key, $roleThemes)) {
                  \n $merge[$rem_key] = [‘id’ => ”, ‘weight’ => 10];
                  \n $roleThemes = array_merge($roleThemes, $merge);
                  \n \t}
                  \n \t}
                  \n \t$roles = $roleThemes;
                  \n \t}
                  \n\t}
                  \n\telse {
                  \n \t$roleThemes = [];
                  \n \t$i = 0;
                  \n \tforeach ($roles as $roles_key => $roles_val) {
                  \n \tif ($roles_key == ‘administrator’) {
                  \n $roleThemes[$roles_key][‘weight’] = $i;
                  \n $roleThemes[$roles_key][‘id’] = ‘seven’;
                  \n \t$i++;
                  \n \t}
                  \n \telse {
                  \n $roleThemes[$roles_key][‘weight’] = $i;
                  \n $roleThemes[$roles_key][‘id’] = ‘bartik’;
                  \n \t$i++;
                  \n \t}
                  \n \t}
                  \n \t$roles = $roleThemes;
                  \n\t}
                  \n\t\/\/ Build the table rows and columns.
                  \n\tforeach ($roles as $id => $entity) {
                  \n \t\/\/ TableDrag: Mark the table row as draggable.
                  \n $form[‘role_theme’][$id][‘#attributes’][‘class’][] = ‘draggable’;
                  \n \t\/\/ TableDrag: Sort the table row according to its existing\/configured weight.<\/p>\n

                  \t\/\/ Some table columns containing raw markup.
                  \n $form[‘role_theme’][$id][‘label’] = array(
                  \n \t‘#plain_text’ => ucfirst($id) . t(‘ user’),
                  \n \t);<\/p>\n

                  $form[‘role_theme’][$id][‘id’] = array(
                  \n \t‘#type’ => ‘select’,
                  \n \t‘#title’ => t(‘Select Theme’),
                  \n \t‘#options’ => $themeNames,
                  \n ‘#default_value’ => (string) $roleThemes[$id][‘id’],
                  \n \t);
                  \n \t\/\/ TableDrag: Weight column element.
                  \n $form[‘role_theme’][$id][‘weight’] = array(
                  \n ‘#type’ => ‘weight’,
                  \n ‘#title_display’ => ‘invisible’,
                  \n ‘#default_value’ => (int) $roleThemes[$id][‘weight’],
                  \n \t\/\/ Classify the weight element for #tabledrag.
                  \n \t‘#attributes’ => array(‘class’ => array(‘role_theme-order-weight’)),
                  \n \t);
                  \n\t}
                  \n\t$form[‘actions’] = array(‘#type’ => ‘actions’);
                  \n $form[‘actions’][‘submit’] = array(
                  \n \t‘#type’ => ‘submit’,
                  \n \t‘#value’ => t(‘Save changes’),
                  \n\t);<\/p>\n

                  \treturn parent::buildForm($form, $form_state);
                  \n }<\/p>\n

                  \/**
                  \n * {@inheritdoc}
                  \n *\/
                  \n public function validateForm(array &$form, FormStateInterface $form_state) {
                  \n\t$rollTheme = $form_state->getValue(‘role_theme’);
                  \n\tforeach ($rollTheme as $key => $value) {
                  \n \tif (in_array((int) $value[‘weight’], $role_arr)) {
                  \n $form_state->setErrorByName(‘role_theme’, $this->t("Thers is an error in the form."));
                  \n \t}
                  \n \t$role_arr[$key] = (int) $value[‘weight’];
                  \n\t}
                  \n }<\/p>\n

                  \/**
                  \n * {@inheritdoc}
                  \n *\/
                  \n public function submitForm(array &$form, FormStateInterface $form_state) {
                  \n\t$rollTheme = $form_state->getValue(‘role_theme’);
                  \n\tforeach ($rollTheme as $key => $value) {
                  \n \t$role_arr[(int) $value[‘weight’]] = [‘theme’ => $value[‘id’], ‘role’ => $key];<\/p>\n

                  \t$roles[] = $key;
                  \n\t}<\/p>\n

                  \tksort($role_arr);<\/p>\n

                  \tforeach ($role_arr as $new_key => $new_value) {<\/p>\n

                  \tif (in_array($new_value[‘role’], $roles)) {
                  \n $roll_array[$new_value[‘role’]] = [‘id’ => $new_value[‘theme’], ‘weight’ => $new_key];
                  \n \t}
                  \n\t}
                  \n\t$roleThemes = $this->config(‘role_based_theme_switcher.RoleBasedThemeSwitchConfig’);
                  \n $roleThemes->set(‘roletheme’, $roll_array);
                  \n $roleThemes->save();
                  \n drupal_set_message("Role theme configuration saved succefully");
                  \n\t\/\/ clearing cache for anonymous users.
                  \n drupal_flush_all_caches();
                  \n }<\/p>\n

                  }
                  \n[\/java]<\/p>\n

                  Remember all the themes loaded above are dynamically loaded by using services “theme_handler” and dependency injection through a variable “protected $themeGlobal;”. This is important to note that loading services using defense injection is a good practice instead of loading them statically for ex:<\/p>\n

                  Static method:<\/span><\/p>\n

                  \\Drupal::service(‘theme_handler’)->listInfo();<\/span><\/p>\n

                  Dynamic method:<\/span><\/p>\n

                   <\/p>\n

                  [java]
                  \n protected $themeGlobal;
                  \n \/**
                  \n * {@inheritdoc}
                  \n *\/
                  \n public function __construct(ThemeHandler $themeGlobal) {
                  \n $this->themeGlobal = $themeGlobal;
                  \n }
                  \n \/**
                  \n * {@inheritdoc}
                  \n *\/
                  \n public static function create(ContainerInterface $container) {
                  \n\treturn new static(
                  \n $container->get(‘theme_handler’)
                  \n\t);
                  \n }
                  \n[\/java]<\/p>\n

                  6. As now Drupal 8 follows PSR4 standard the files needs to be placed in specific location.<\/p>\n

                  So, RoleNegotiator.php file should goto ROOT\/modules\/custom\/role_based_theme_switcher\/Theme\/RoleNegotiator.php<\/p>\n

                  [java]
                  \n<?php<\/p>\n

                  namespace Drupal\\role_based_theme_switcher\\Theme;<\/p>\n

                  use Drupal\\Core\\Routing\\RouteMatchInterface;
                  \nuse Drupal\\Core\\Theme\\ThemeNegotiatorInterface;<\/p>\n

                  \/**
                  \n * Sets the active theme on admin pages.
                  \n *\/
                  \nclass RoleNegotiator implements ThemeNegotiatorInterface {<\/p>\n

                  \/\/ Protected theme variable to set the default theme if no theme is selected.
                  \n protected $theme = NULL;<\/p>\n

                  \/**
                  \n * Whether this theme negotiator should be used to set the theme.
                  \n *
                  \n * @param \\Drupal\\Core\\Routing\\RouteMatchInterface $route_match
                  \n * The current route match object.
                  \n *
                  \n * @return bool
                  \n * TRUE if this negotiator should be used or FALSE to let other negotiators
                  \n * decide.
                  \n *\/
                  \n public function applies(RouteMatchInterface $route_match) {
                  \n \/\/ Use this theme on a certain route.
                  \n $change_theme = TRUE;
                  \n $route = \\Drupal::routeMatch()->getRouteObject();
                  \n $is_admin_route = \\Drupal::service(‘router.admin_context’)->isAdminRoute($route);
                  \n $current_user = \\Drupal::currentUser();
                  \n $user_roles = $current_user->getRoles();
                  \n $has_admin_role = FALSE;
                  \n if (in_array("administrator", $user_roles)) {
                  \n $has_admin_role = TRUE;
                  \n }
                  \n if ($is_admin_route === TRUE && $has_admin_role === TRUE) {
                  \n $change_theme = FALSE;
                  \n }
                  \n \/\/ Here you return the actual theme name.
                  \n $roleThemes = \\Drupal::config(‘role_based_theme_switcher.RoleBasedThemeSwitchConfig’)->get(‘roletheme’);
                  \n \/\/ Get current roles a user has.
                  \n $roles = \\Drupal::currentUser()->getRoles();
                  \n \/\/ Get highest role.
                  \n $theme_role = $this->getPriorityRole($roles);
                  \n $this->theme = $roleThemes[$theme_role][‘id’];<\/p>\n

                  return $change_theme;
                  \n }<\/p>\n

                  \/**
                  \n * Determine the active theme for the request.
                  \n *
                  \n * @param \\Drupal\\Core\\Routing\\RouteMatchInterface $route_match
                  \n * The current route match object.
                  \n *
                  \n * @return string|null
                  \n * The name of the theme, or NULL if other negotiators, like the configured
                  \n * default one, should be used instead.
                  \n *\/
                  \n public function determineActiveTheme(RouteMatchInterface $route_match) {
                  \n return $this->theme;
                  \n }<\/p>\n

                  \/**
                  \n * Function to get roles array and return highest priority role.
                  \n *
                  \n * @param array $roles
                  \n * Array of roles.
                  \n *
                  \n * @return string $theme
                  \n * Return role.
                  \n *\/
                  \n public function getPriorityRole($roles) {
                  \n $roleThemes = \\Drupal::config(‘role_based_theme_switcher.RoleBasedThemeSwitchConfig’);
                  \n foreach ($roleThemes->get(‘roletheme’) as $key => $value) {
                  \n if (in_array($key, $roles)) {
                  \n $theme[$key] = $value[‘weight’];
                  \n }
                  \n }
                  \n $theme = array_search(max($theme), $theme);
                  \n return $theme;
                  \n }<\/p>\n

                  }
                  \n[\/java]<\/p>\n

                  Last for creating a link in admin configuration you can include a role_based_theme_switcher.links.menu.yml file at ROOT\/modules\/role_based_theme_switcher\/ location:
                  \ncode:
                  \nLast for creating a link in admin configuration you can include a role_based_theme_switcher.links.menu.yml file at ROOT\/modules\/role_based_theme_switcher\/ location:
                  \ncode:<\/p>\n

                  [java]
                  \nrole_based_theme_switcher.role_theme:
                  \ntitle: Role Theme
                  \nroute_name: role_based_theme_switcher.settings
                  \ndescription: ‘Manage theme for roles.’
                  \nparent: system.admin_config_system
                  \nweight: 10
                  \n[\/java]<\/p>\n

                  Notes: After completing the file structure and code development don\u2019t forget to enable the module under \u201cabc.com\/admin\/modules\u201d and clear Drupal\u2019s cache \u201cabc.com\/admin\/config\/performance\u201d.<\/b><\/p>\n

                  Conclusion:<\/b><\/p>\n

                  \u201cabc.com\u201d is an example website path.<\/b><\/p>\n

                  In the above code, there is a scenario of how to create a module, a route, a service, a form with all functionality needed to change the Theme. You can change the logic in RoleNegotiator.php<\/b> according to your needs i.e changing of themes per user or by menu URLs or by any other logic.\u00a0If the requirements & form fields are different then, code may be modified in AdminSettingsForm.php<\/b>. Instead of using Database storage we have used Drupal 8 new feature, Configuration<\/b>. All the details filled in AdminSettingsForm.php<\/b> will be saved in configuration & same can be retrieved with writing a database query. The code in the file role_based_theme_switcher.links.menu.yml will provide a link under system configuration under abc.com\/admin\/config<\/b> with a name\u00a0Role Theme<\/b> which will redirect to abc.com\/admin\/structure\/role_based_theme_switcher\/settings<\/b> path you can find the form for selecting different themes for different roles.<\/p>\n","protected":false},"excerpt":{"rendered":"

                  How to change theme by Role in Drupal 8.x Even before I start, I would like to shed some light on what are Themes in Drupal. A theme is a bunch of files that defines the presentation layer. There are many contributed themes in Drupal project that can be found under \u2018Themes\u2019. For a programmer, […]<\/p>\n","protected":false},"author":933,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":44},"categories":[3602,1],"tags":[4229,4862,3707,3601,3738,4228,4227],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/42297"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/933"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=42297"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/42297\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=42297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=42297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=42297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}