How to use custom markup or tpl from skinr setting or custom class

In Drupal 6 there is a version of the skinr module that allows using a tpl whenever a specific setting is chosen in the skin settings. We needed this feature in D7 as well. Here is what we did to accomplish it:

File: ./sites/[example.com]/themes/custom/[themename]/skins/styles/styles.inc

  1. /**
  2.  * Implements hook_skinr_skin_PLUGIN_info().
  3.  */
  4. function THEMENAME_skinr_skin_styles_info() {
  5.   $skins = array();
  6.  
  7.   $skins['style'] = array(
  8.     'title' => t('Style'),
  9.     'type' => 'select',
  10.     'default status' => 1,
  11.     'group' => 'box',
  12.     'theme hooks' => array('block', 'node', 'region','views_view'),
  13.     'options' => array(
  14.       'rounded_corners' => array(
  15.         'title' => t('Rounded corners transparent'),
  16.         'class' => array('rounded-transparent'),
  17.       ),
  18.     ),
  19.     'status' => array(
  20.       'comikaze' => 1,
  21.     ),
  22.   );
  23.  
  24.   return $skins;
  25. }

The above sets up the skinr settings and UI to allow for setting a custom CSS class on our elements where we need rounded corners. We can then proceed to detect when the CSS class is set and use a different tpl:

File: ./sites/[example.com]/themes/custom/[themename]/template.php

  1. /**
  2.  * Implements theme_preprocess_block().
  3.  */
  4. function THEMENAME_preprocess_block(&$variables, $hook) {
  5.   $variables['wrapper_prefix'] = '';
  6.   $variables['wrapper_suffix'] = '';
  7.   if (in_array('rounded-transparent', $variables['classes_array'])) {
  8.     THEMENAME_add_wrappers($variables);
  9.   }
  10. }
  11.  
  12. /**
  13.  * Utility function: adds wrapper keys to $variables array for printing in tpl.
  14.  */
  15. function THEMENAME_add_wrappers(&$variables) {
  16.   $variables['wrapper_prefix'] = <<<HTML
  17. <div class="round-1">
  18.   <div class="round-2">
  19.     <div class="round-3">
  20.     </div>
  21.   </div>
  22. </div>
  23. <div class="round-4">
  24.   <div class="round-5">
  25.     <div class="round-6">
  26. HTML;
  27.   $variables['wrapper_suffix'] = <<<HTML
  28.     </div>
  29.   </div>
  30. </div>
  31. <div class="round-7">
  32.   <div class="round-8">
  33.     <div class="round-9">
  34.     </div>
  35.   </div>
  36. </div>
  37. HTML;
  38. }

A note about the above, we are checking for a class in classes array, not a specific skinr setting so this means the class could get set by other methods and still work. Now we add in our tpl to render the new $wrapper_prefix and $wrapper_suffix variables.

File: ./sites/[example.com]/themes/custom/[themename]/templates/block.tpl.php

  1. <section id="<?php print $block_html_id; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>
  2.  
  3.   <?php print $wrapper_prefix; ?>
  4.   <?php print render($title_prefix); ?>
  5.   <?php if ($title): ?>
  6.     <h2<?php print $title_attributes; ?>><?php print $title; ?></h2>
  7.   <?php endif;?>
  8.   <?php print render($title_suffix); ?>
  9.  
  10.   <div class="content"<?php print $content_attributes; ?>>
  11.     <?php print $content ?>
  12.   </div>
  13.   <?php print $wrapper_suffix; ?>
  14.  
  15. </section> <!-- /.block -->

Flush the caches and we should now see the skinr setting we added. Set the rounded corners option and our new variables for the tpl will be used. This could easily be extended to use a different tpl as well. Overall, this works great for allowing site administrators to select the theming for their site.