[Drupal] How to create Theme Switcher module for Drupal 7 Part 1
https://www.zyxware.com/sites/default/files/styles/user_image/public/default_images/index.png?itok=2YmREnrP
BY thomas.john
4 years ago
Web-Development
0 comments comment

This article will be explaining a module we implemented in site Free Drupal Themes, its called Theme Switcher. This module helps in switching between any enabled themes without logging in. In previous article How to enable multiple themes using command promte? I had explained how to enable multiple themes using drush.

When we create a custom module to be in order first create a folder named "fdt_theme_switcher" in "sites/all/modules". Now lets start with info file named "fdt_theme_switcher.info". Here we are naming the module as FDT Theme Switcher for drupal 7. Also calling a css named "bar.css" for styling the block.

/*fdt_theme_switcher.info*/
  name = FDT Theme Switcher
  description = Enables the theme switching functionalities.
  package = FDT
  version = VERSION
  core = 7.x
  stylesheets[all][] = css/bar.css

Now lets create our module file named "fdt_theme_switcher.module". First will create a hook function called hook_page_build(). In this will call the function fdt_theme_switcher_generate(), to get theme switcher form. To display this in page top we assign it to variable '$page['page_top']['theme_switcher']'. $pagetop is displayed in sytem module html.tpl.php file. In fdt_theme_switcher_generate() it will return the form as a string. Will be calling the necessory js files also here.

/**
 * Implements hook_page_build().
 */
function fdt_theme_switcher_page_build(&$page) {
  //if(!user_access('administer')){
  if(user_is_anonymous()){
    $page['page_top']['theme_switcher'] = array(
      '#markup' => fdt_theme_switcher_generate());
    drupal_add_js(drupal_get_path('module', 'fdt_theme_switcher').'/js/themeSwitcher.js');  
  }
}

/**
 * themeSwitcher.js
*/

(function ($) {
  Drupal.theme_switcher = Drupal.theme_switcher || {};
  Drupal.behaviors.theme_switcher = {
    attach: function () {
       $('select#edit-theme').change(function() {
          $(this).closest("form").submit();
      });
    }
  };
})(jQuery);

In fdt_theme_switcher_generate() its gets the value of current theme, and display theme switcher form.

function fdt_theme_switcher_generate()
{

    global $current_theme;
    $fdtpath="http://www.freedrupalthemes.net/customize-theme?n=$current_theme";
    $output="";
    $output.="<div id='top-bar'>";
    $output.='<h2>Customize this theme</h2>';
    $output.="<div id='top-bar-sub'>";
    $output.=/*"".*/drupal_render(drupal_get_form('fdt_theme_switcher_themeswitcher_form'));
    $output.="</div>";
    $output.="</div>";
    return $output;
}

Now lets call the form fdt_themeswitcher_form. In this form there is a select box to select the enabled themes and a button

  • Switch -> To switch to new selected theme

See the form below

function fdt_theme_switcher_themeswitcher_form($form, &$form_state) {
  
  global $current_theme;
  $options = fdt_theme_switcher_options();
  
  $form['themeswitcher']['theme'] = array(
    '#type' => 'item',
    '#markup' => '<p>Select a theme</p>'
  );

  $form['themeswitcher']['theme'] = array(
    '#type' => 'select',
    '#title' => t('Select a theme'),
    '#default_value' =>  $current_theme,
    '#title_display' => 'attribute',
    '#options' => $options,
    '#required' => TRUE,
  );
  
  $form['themeswitcher']['actions'] = array('#type' => 'actions');

  $form['themeswitcher']['actions']['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Switch'),
    '#id' => 'fdt_theme-submit',
  );
  
  return $form;
}

Here we store current theme name to variable $current_theme and passed it as global. Now to display all the theme names in select box a function fdt_theme_switcher_options() is called and the value is stored to variable $options.

See the code below

function fdt_theme_switcher_options() {
  $options = array();
  $themes = list_themes();
  foreach ($themes as $name => $theme) {
    if ($theme->status) {
      $options[$name] = $theme->info['name'];
    }
  }
  return $options;
}

Now comes the form submit. When we submit function is called, values passed are themename, and baseurl as a global variable. Here will store the theme name to variable $themeurl in format t/<theme_name>. Now the function return will call drupal_goto() with coressponding theme name and enable it.

See the submit fuction for each buttons

function fdt_theme_switcher_themeswitcher_form_submit($form, &$form_state) {
  
  global $base_url;
  $themeurl="t/".$form_state['values']['theme'];
  $options = array(
      //'fragment' => '', 
      'query' => '',
      'absolute' => TRUE, 
      'alias' => FALSE, 
      'prefix' => 'goto',
      'external' => FALSE
  	);
 	drupal_goto($themeurl,$options);
}

Ok, now we have enable the theme. But the problem comes when we go to inner pages for each theme we have to attach the theme name along with the url and when we click a link and goto external page the attached themename must be removed. In order to get this done we uses two hooks

  • hook_url_inbound_alter() -> Will strip the "t/<theme_name>" from the urls internally
  • hook_url_outbound_alter() -> Rewriteall urls in the site to include the t/<theme_name>

In function url_inbound_alter() will get the theme name as a global variable, if not admin pages will return node values to variable result and when we are opening the page for the first time garland theme is set as default theme.

In function url_outbound_alter() will set the path as $base_url."/t/".<theme_name>.

See the code below.

/**
 * Implements hook_url_inbound_alter()
 *
 */
function fdt_theme_switcher_url_inbound_alter(&$result, $path, $path_language) {
    global $current_theme;
    // All requests should have theme name and theme version except admin urls
    if ($path != 'admin' && (substr($path, 0, 6) != "admin/") && preg_match("/^t\/([^\/]*)\/?(.*)/", $path, $matches)) {
      $current_theme=$matches[1];
      $result = $matches[2];
      if ($result == '') {
        $result = "node";
      }
    }
    else {
      if ($current_theme == '') {
        $current_theme='garland';
      }
    }
  }

/**
 * Implements hook_url_outbound_alter()
 *
 */

function fdt_theme_switcher_url_outbound_alter(&$path, &$options, $original_path) {
  
    global $current_theme, $base_url;
    if($original_path == 'http://www.freedrupalthemes.net') {
      $fdturl='http://www.freedrupalthemes.net';
      return $fdturl;
    }
  
    if ($options['prefix'] == 'goto') {
      $options['prefix']='';
      return;
    }
  
    if ($original_path == '') {
      $path=$base_url."/t/".$current_theme;
      $options = array(
        'fragment' => '', 
        'query' => '',
        'absolute' => TRUE, 
        'alias' => FALSE, 
        'prefix' => '',
        'external' => TRUE
  	  );
      return;
    }
    // Add theme name and theme version to all urls except admin urls
    if ($path != 'admin' && substr($path, 0, 6) != "admin/" && $current_theme != '') {
      if ($path == '<front>' || $path == '' || $path == '/') {
        $path = "t/$current_theme/";
      }
      else {
        $path = "t/$current_theme/$path";
      }
    }
  }

Now to display this in a fixed postion we have to gave the styles accordingly. Feel free to test this module in our site Free Drupal Themes, and let me know your feedback.


RELATED ARTICLE

close

on 09th April 2007 / by webmaster
Freelance projects fall into a separate category of projects in that they target independent deve Community Projects Freelance Open Source Web Development Leave a reply Your email address will not be published. Required fields are marker * Shrinivasan (not verified) access_time 20 Aug 2019 - 20:28 Guys. Great Collection and a great site. It is really impressive to know that there a numerous FOSS tools for web contents. Thanks. Keep Growing. Anonymous (not verified) access_time 20 Aug 2019 - 20:28 In reply to Great collection by Shrinivasan (not verified) Great Collection and a great site!!! Thanks! Silvia (not verified) access_time 20 Aug 2019 - 20:28 Hi, nice work. I also love to use WordPress when setting up a new blog. Greetings JungleDirector (not verified) access_time 20 Aug 2019 - 20:28 Subj. Anybody have? I'ts better, if you have XRumer 5.04... Gimme link Thanks. Ingo (not verified) access_time 20 Aug 2019 - 20:28 Hi, this is a listing of open source software was looking for my new project Thx a lot Pagination Current page 1 Page 2 Page 3 Page 4 Page 5 Next page Next › Last page Last » Add new comment
Leave a reply
Your email address will not be published. Required fields are marker *

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
The content of this field is kept private and will not be shown publicly.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.