Drupal Technical

[drupal] How to create Style switcher for Drupal 7 themes?

Thomas.john | | 2 min read

In this article we will be explaining a small feature we implemented in our drupal themes, its called Style Switcher. Will be explaining how to create and implement Style Switcher feature for your theme. Before we start, in my previous article How to create default Slideshow for Drupal 7 themes? I have explained how we can use form alter for theme settings page, kindly refer this too.

Will start with preprocess function themename_preprocess_page() and its written in template.php file.
In this function will first store theme path to vaiable $theme_path and then check any values are passed in variable variable_get('theme_themename_color_settings'), if not, we will call the value default. Now will check whether theme is called for the first time. Its done by checking value of the varable theme_themename_first_install is True or False. If TRUE then will call the function _themename_install() and returns the value False for the variable theme_themename_first_install. So next time when theme is enabled it won't call the function _themename_install().

function themename_preprocess_page(&$vars) {
  // Chcek if is first setup of theme.
  // Checking selected color to switch css  
  $theme_path = path_to_theme();
  $color_setting = variable_get('theme_themename_color_settings');
  switch($color_setting){
    case 'red':      
      drupal_add_css($theme_path . '/css/red.css');
      break;
    case 'green':      
      drupal_add_css($theme_path . '/css/green.css');
      break;
    case 'orange':      
      drupal_add_css($theme_path . '/css/orange.css');
      break;
    case 'default':      
      break;
  }

  if (variable_get('theme_themename_first_install', TRUE)) {
    include_once('theme-settings.php');
    _themename_install();
  }
}

function _themename_install() {
  // Default data
  $file = new stdClass;
  $src_base_path = drupal_get_path('theme', 'themename');
  // Flag theme is installed
  variable_set('theme_themename_first_install', FALSE);
}

Now to switch themes first we have to alter theme settings form and provide a provision to select required CSS. Its done as follows

function themename_form_system_theme_settings_alter(&$form, $form_state) {

    $form['switch_style'] = array(
    '#type' => 'select',
    '#title' => t('Select Color'),
    '#options' => array(
      'default' => t('Default'),
      'orange' => t('Orange'),
      'green' => t('Green'),
      'red' => t('Red'),
    ),
    '#default_value' => variable_get('theme_themename_color_settings', 'default'),
    '#description' => t('Select the color you want to set.'),
  );

  $form['#submit'][] = 'themename_switch_style_submit';
  return $form;
}

In this a select box is implemented and we could select the required colour. By default, the value selected is 'default'.

Now in form submit, we will pass the value for the required theme using variable_set('theme_themename_color_settings', $color). Its shown below.

function themename_switch_style_submit($form, &$form_state) {
  $color= $form_state['values']['switch_style'];
  variable_set('theme_themename_color_settings', $color);
}

Now when we submit the form, the preprocess function is called and this will check whether any values are there in variable_get('theme_themename_color_settings') and its stored to variable $color_setting. Now using a switch case the respective CSS files are included.

function themename_preprocess_page(&$vars) {
  $theme_path=path_to_theme();
  $color_setting=variable_get('theme_themename_color_settings');
  switch($color_setting) {
    case 'red':      
      drupal_add_css($theme_path.'/css/red.css');
      break;
    case 'green':      
      drupal_add_css($theme_path.'/css/green.css');
      break;
    case 'orange':      
      drupal_add_css($theme_path.'/css/orange.css');
      break;
    case 'default':      
      break;
  }
}

We have implemented in some of our themes we have contributed at Drupal.org. You can refer following themes for complete code - Black Blog

 

 

Related Topics