Panels style plugin in Drupal 7

In this tutorial ill explain how to create a panels style plugin in your own module for Drupal 7. Our plugin will contain a function to render a pane with settings and a plain region.

First we start with our own module. In this scenario I created a module called example styles.

example_styles.info

name = Example styles
description = "Example styles"
dependencies[] = panels
package = "Panels"
core = 7.x
version = "7.x-1.0"

Our module only needs to contain the hook_ctools_plugin_directory() function to tell ctools to look in the /plugins directory.

example_styles.module

/**
* Implementation of hook_ctools_plugin_directory().
*/
function example_styles_ctools_plugin_directory($module, $plugin) {
  if ($module == 'page_manager' || $module == 'panels') {
    return 'plugins/' . $plugin;
  }
}

In the module we create the following directory plugins/styles/example where example is our style plugin name. This directory needs to contain an .inc file named after the style. In this file we create our style plugin array.

plugins/styles/example/example.inc

/**
* Implementation of hook_panels_styles().
*/
$plugin =  array(
  'example' => array(
    'title' => t('Example'),
    'description'	=> t('Example description'),
    'render pane' => 'example_render_pane',
    'render region' => 'example_render_region',
    'pane settings form' => 'example_settings_form',
    'hook theme'	=> array(
      'example_theme_pane' => array(
        'template' => 'example-pane',
         'path' => drupal_get_path('module', 'example') .'/plugins/styles/example',
         'variables' => array(
           'content' => NULL,
           'settings' => NULL,
         ),
       ),
      'example_theme_region' => array(
        'template' => 'example-region',
         'path' => drupal_get_path('module', 'example') .'/plugins/styles/example',
         'variables' => array(
           'content' => NULL,
         ),
       ),
    ),
  ),
);

function example_render_pane($vars) {
	$settings = $vars['settings'];
	$content = $vars['content'];
  return theme('example_theme', array('content' => $content, 'settings' => $settings));
}
function example_render_region($vars) {
	$content = '';

  foreach ($vars['panes'] as $pane_id => $pane_output) {

    $content .= $pane_output;
  }
  if (empty($content)) {
    return;
  }  
  return theme('example', array('content' => $content));
}

function example_settings_form($style_settings) {
  $form['top_color'] = array(
    '#type' => 'select',
    '#title' => t('Top color'),
    '#options' => array(
      'blue' => t('Blue'),
      'green' => t('Green'),
    ),
    '#default_value' => (isset($style_settings['top_color'])) ? $style_settings['top_color'] : 'blue',
  );

  return $form;
}

As you can see int he plugin array with hook theme u can define themes for your style plugin (see hook_theme for more information). I chose to give the region and pane different templates so I can style them with different html structures. Next we need to create the template files defined in the plugin.

plugins/styles/example/example-pane.tpl.php

<?php 
drupal_add_css(drupal_get_path('module','example_styles') .'/plugins/styles/example/example.css', array('group' => CSS_DEFAULT, 'every_page' => TRUE)); ?>
<?php if (isset($content->title)): ?>

<?php print $content->title; ?>

<?php endif ?>
<?php print render($content->content); ?>

plugins/styles/example/example.css

.example-pane .blue {color:blue;}
.example-pane .green {color:green;}

plugins/styles/example/example-region.tpl.php

<?php
drupal_add_css(drupal_get_path('module','example_styles') .'/plugins/styles/example_styles/example.css', array('group' => CSS_DEFAULT, 'every_page' => TRUE)); ?>
<?php print render($content->content); ?>

Comment