Skip to Content
RSSGrab the RSS feed! ->

How to create a panels style plugin

Creating panels styles can be very powerful. You can define certain styles for your client to choose from, so they can choose what type of display the panel pane will be like. This way you keep the workflow clean, your code under revision control, your themer gets to keep his sanity, and your concious stays clear.

This article assumes you know about running panels, and more or less what the nomenclature is. You should know also that panels now uses ctools, which is is primarily a set of APIs and tools to improve the developer experience.

So, what we'll be doing here is actually creating a ctools plugin, to implement a new panels style. Sorry if I'm confusing you already, don't worry, it's actually quite straight forward, we want to be able to do this:

choose_style.png
... and then this:
choose_style2.png

OK, now to the meat of it. We'll call our module ctoolsplugins.

1. Create a new module, and tell ctools about our plugins

What you need is very basic, an info file and a module file. So far, nothing new.

1.1 Declare our dependencies

So we obviously need ctools module on our site, and well, the plugin wouldn't make much sense without panels and page_manager, so:

; $Id:
name = Ctools Plugins
description = Our custom ctools plugins
core = 6.x
dependencies[] = ctools
dependencies[] = panels
dependencies[] = page_manager
package = Chaos tool suite

1.2 Implement hook_ctools_plugin_directory to tell ctools about our plugins

In our module file, of course, we'll implement this function, that will check if ctools if looking for style plugins, and lets if so, it will let it know where ours are:

<?php
/**
  * Implementation of hook_ctools_plugin_directory().
  */
function ctoolsplugins_ctools_plugin_directory($module, $plugin) {
  if (
$module == 'panels' && $plugin == 'styles') {
    return
'plugins/' . $plugin;
  }
}
?>

2. Prepare our file structure for the plugins, and create our plugin file.

This image is pretty self explanatory:

ctoolsplugin_directories.png
We'll call our plugin 'collapsible', so we create inside ctoolsplugins/plugins/styles/ a file called collapsible.inc.

3. Implement our style plugin in collapsible.inc

3.1 Define your style goals and necessities.

OK, Here you should think about what you are going to do with the plugin.

  • Is it just for markup?
  • Will you be offering different options?
  • Will you be implementing javascript on it?

In our case, we'll take the opportunity, to teach you another thing that ctools has, the collapsible div utility. So our style will basically convert any panels pane, into a collapsible panels pane:
collapsed_pane.png

And because we are friendly developers (or like not to be ever bothered after developing it), we'll give the user a chance to configure if they want the pane to start opened or closed. That means an extra settings form, so we can have this:
ctools_style_options.png

3.2 Imlement hook_panels_style_info

The naming is very important here, it should be modulename_stylename_panels_style. You basically return an array, defining your style:

<?php
/**
* @file
* Definition of the 'collapsible' panel style.
*/


/**
* Implementation of hook_panels_style_info().
*/
function ctoolsplugins_collapsible_panels_styles() {
  return array(
     
'title' => t('Collapsible div'),
     
'description' => t('Display the pane in a collapsible div.'),
     
'render pane' => 'ctoolsplugins_collapsible_style_render_pane',
     
'pane settings form' => 'ctoolsplugins_collapsible_style_settings_form',
  );
}
?>

'title' and 'description' are pretty self explanatory.
'render pane' specifies the theme function we'll be providing for rendering the pane. Watch the naming convention.
'pane settings form' specifies the callback function which provides the extra settings form, that we'll be using for our start up options. Watch the naming convention.

3.3 Define the settings form callback.

The name of the function will be what you specified in 'pane settings form' earlier. Just provide a new array inside $form, for each configuration you want the user to specify. See the FAPI documentation for reference.

<?php
/**
* Settings form callback.
*/
function ctoolsplugins_collapsible_style_settings_form($style_settings) {
 
$form['collapsed'] = array(
   
'#type' => 'select',
   
'#title' => t('Startup behaviour'),
   
'#options' => array(
     
0 => t('Start opened'),
     
1 => t('Start collapsed'),
    ),
   
'#default_value' => (isset($style_settings['collapsed'])) ? $style_settings['collapsed'] : 'opened',
   
'#description' => t('Choose whether you want the pane to start collapsed or opened'),
  );

  return
$form;
}
?>

This is pretty straight forward, in our case we provide two options, one to start opened and one to start collapsed. If collapsed is chosen, the value will be 1.

3.4 Define the render callback function.

The name of the function will be what you previously specified in 'render pane'. This is just a theme function, and where you have the chance of altering what will be shown to the user when viewing the page.

<?php
/**
* Render callback.
*
* @ingroup themeable
*/
function theme_ctoolsplugins_collapsible_style_render_pane($content, $pane, $display) {
 
$style_settings = $pane->style['settings']; // good idea for readability of code if you have a ton of settings
 
$start_settings = $style_settings['collapsed']; // we can do this be cause the only values possible are 0 or 1

 
$pane_content = $content->content;

  if (
$content->title) {
   
$pane_title = '<h2 class="pane-title">'. $content->title .'</h2>';

   
// theme('ctools_collapsible', $handle, $content, $collapsed);
   
$result = theme('ctools_collapsible', $pane_title, $pane_content, $start_settings);
  }

 
// if we don't have a pane title, we just print out the content as normaly, since there's no handle
 
else {
   
$result = $pane_content;
  }

  return
$result;
}
?>

Important to note here, is that our user's specified settings are inside $pane->style['settings']. In this example we check if there's a title available, and if so we implement the ctools_collapsible theme function to get our collapsible panes. Other wise we don't have a handle, and we just return the content as normal.

And that is it. Hope you found the article useful, and if you'd like me to write up some more articles about writing plugins for panels/ctools, drop a comment with your question/suggestion!

UPDATE:You can also provide a style plugin in your theme, as shown in this fine tutorial.

AttachmentSize
ctoolsplugins.tar.gz1.3 KB

44 responses to this article.

#1

Funciona de maravilla!

Funciona de maravilla! Gracias por hacer este post tan claro, brindando el paso a paso....es una goleada para los nuevitos! Peter de b&b Venecia

#2

hello!,I really like your

hello!,I really like your writing so so much! proportion we
keep up a correspondence extra approximately your article on AOL?
I need an expert in this house to resolve my problem.
Maybe that is you! Having a look ahead to look you.

#3

Thank you for writing this,

Thank you for writing this, it's saved me a ton of time in figuring this out myself. One minor correction, in step 1.2, I think you're if statement shoudl be the following, to prevent loading the plugin for some other module who might also use plugins names 'styles'

if ($plugin == 'styles') {

should be

if ('panels' == $module && 'styles' == $plugin) {

#4

Excelent point Oscar, I have

Excelent point Oscar, I have updated the code in the post, thanks for pointing this out, and glad to hear it saved you time!

#5

Je viens de parcourir ton

Je viens de parcourir ton excellent blog et je partages ta passion et j’apprécie beaucoup le contenu que l'on peux y découvrir.

#6

7Voici un site qu'on connait

7Voici un site qu'on connait presque tous.
Avant je n'utilisais que le catalogue mais devant le progès je visite le
site et je ne suis pas déçue. On ne peut pas reprocher grand chose.

Les 3 suisses assurent le minimum mais l'originalité est
absente Je me suis achetée une tunique blanche grâce à un chèque réduction de
16€ sans minimum d'achat. Je n'ai presque rien payé !!

J'ai été ravie du délai de livraison et de ma tunique 10 C'est un bon site malgré un choix de vetement un peu honéreux
par rapport à d'autres de vente par coreespondance.

#7

One thing I learned, is for

One thing I learned, is for your style to be available as a region style, you need to define a 'render panel' function, for it to be available as a style for a single pane, defined a 'render pane' function.

#8

I just tried this and now I

I just tried this and now I can't access the panels dashboard. I get the WSOD.

#9

The WSOD is most likely an

The WSOD is most likely an indication that php is runing out of memory on your server. This has nothing to do with what is explained here, but rather a problem with your server's configuration.
Check out this link about what could be causing this: http://drupal.org/node/158043 , but I find that most of the cases this is fixed by increasing memory_limit in your server's php.ini file.

#10

It's a shame you don't have a

It's a shame you don't have a donate button!
I'd definitely donate to this brilliant blog!
I suppose for now i'll settle for book-marking and adding your
RSS feed to my Google account. I look forward to fresh updates and will share this site
with my Facebook group. Chat soon!

#11

Tried the above module in D7,

Tried the above module in D7, but no dice. It shows up in the styles menu, but the field never gets collapsed upon viewing it.

#12

This post ranks high in

This post ranks high in Google for Drupal Panels Tabs, but it applies to D6. The following patch at d.o will get you tabs in Panels for Drupal 7 - vertical tabs by default, but also horizontal tabs will be enabled as an option if you also have the field group module enabled.

Tabs style plugin: Vertical Tabs in core! (for Drupal 7)
http://drupal.org/node/1101536

Field Group Module:
http://drupal.org/project/field_group

#13

It looks like this hook has

It looks like this hook has changed in Drupal 7. It now passes one array with the three variables contacted, ie:

function theme_style_render_pane($x) {
$content = $x['content'];
$pane = $x['pane'];
$display = $x['display'];

...

return $output;
}

#14

This is just a theme

This is just a theme function, and where you have the chance of altering what will be shown to the user when viewing the page.It is so good to see that a good company like this supporting all of this. So many are
The Newsroom 2 DVD Box Set UK
Vikings Season 1 DVD Box Set UK
South Park Seasons 1-15 DVD Box Set UK
Battlestar Galactica Seasons 1-4 DVD Boxset
Game of Thrones seasons 1-3 DVD Box set

#15

This is just a theme

This is just a theme function, and where you have the chance of altering what will be shown to the user when viewing the page.It is so good to see that a good company like this supporting all of this. So many are
The Newsroom 2 DVD Box Set UK
Vikings Season 1 DVD Box Set UK
South Park Seasons 1-15 DVD Box Set UK
Battlestar Galactica Seasons 1-4 DVD Boxset
Game of Thrones seasons 1-3 DVD Box set

#16

Hey there! I know this is

Hey there! I know this is kind of off topic
but I was wondering which blog platform are you using for
this site? I'm getting tired of Wordpress because I've had problems with hackers and I'm looking at options for another platform.
I would be awesome if you could point me in the direction of
a good platform.

Also visit my webpage หนังโป๊

#17

This website has very good

This website has very good content. Someone I work with visits your blog regularly and recommended it to me to read also. Thank you pertaining to giving this excellent content on your web-site. Friends seasons 1-10 DVD Box set | Rules of Engagement Seasons 1-5 DVD Box set | The Walking Dead seasons 1-3 DVD Box set | Supernatural Seasons 1-8 DVD Box set | Futurama Seasons 1-5 DVD Box set

#18

I'm glad I found this web

I'm glad I found this web site, I couldn't find any knowledge on this matter prior to.Also operate a site and if you are ever interested in doing some visitor writing for me if possible feel free to let me know, im always look for people to check out my web site. Family guy seasons 1-11 DVD Box set | Dexter Seasons 1-8 DVD Box set | Sons of Anarchy Seasons 1-5 DVD Box set | True Blood Seasons 1-6 dvd box set | Cold Case seasons 1-7 dvd box set

#19

It's the best time to make

It's the best time to make some plans for the future and it's time
to be happy. I have read this post and if I could I want to suggest you few
interesting things or advice. Maybe you could write next articles referring to this article.
I want to read more things about it!

#20

Nothing is more frustrating

Nothing is more frustrating than pulling up to a closed building. This is especially important if you have multiple locations with varying hours. http://www.dailymotion.com/bubblegumcasting

#21

Making cells types can be

Making cells types can be extremely effective. It is possible to outline selected types for your consumer to choose from, so they can pick what type of present this cell pane will probably be just like. This way you retain this workflow clear, ones program code under modification manage, ones themer grows to keep his sanity, as well as your concious remains crystal clear.personal statement mba

#22

I know this website presents

I know this website presents quality depending articles
or reviews and extra stuff, is there any other website which
offers these stuff in quality?

#23

This website has very good

This website has very good content. Someone I work with visits your blog regularly and recommended it to me to read also. Thank you pertaining to giving this excellent content on your web-site. http://www.smartphoneprojector.co/

#24

This is just a theme

This is just a theme function, and where you have the chance of altering what will be shown to the user when viewing the page.It is so good to see that a good company like this supporting all of this. So many are

#25

This is a smart blog. I mean

This is a smart blog. I mean it. You have so much knowledge about this issue, and so much passion. You also know how to make people rally behind it, obviously from the responses. Well done! child molester registry

#26

Hello, i read your blog

Hello, i read your blog occasionally and i own a similar one and i
was just wondering if you get a lot of spam comments?

If so how do you protect against it, any plugin or anything you can recommend?
I get so much lately it's driving me insane so any assistance is very much appreciated.

#27

I hope that other readers

I hope that other readers will also experience how I feel after reading your article. I feel very grateful that I read this. It is very helpful and very informative and I really learned a lot from it. health care medical centre commercial drive

#28

I have been surfing online

I have been surfing online more than 2 hours today, yet I never found any interesting article like
yours. It's pretty worth enough for me. Personally, if
all site owners and bloggers made good content as you did,
the net will be much more useful than ever before.

Feel free to visit my page: garcinia cambogia

#29

One thing I learned, is for

One thing I learned, is for your style to be available as a region style, you need to define a 'render panel' function, for it to be available as a style for a single pane, defined a 'render pane' function.

#30

Wonderful goods from you,

Wonderful goods from you, man. I've understand your stuff
previous to and you're just extremely excellent. I really like what you have acquired here, really like what
you're saying and the way in which you say it.
You make it enjoyable and you still care for to keep
it sensible. I cant wait to read far more from you. This is actually a
wonderful web site.

#31

Wordpress began as a blogging

Wordpress began as a blogging framework and is known for being one the best blogging programming frameworks around, and it has now developed to be such a quality CMS, to the point that you can now assemble full blow sites upon it.One of the going stones to a sound and effective expert 642-813 profession is to have great scholarly foundation. A sound scholarly foundation coupled with master proficient experience can work ponders for a single person. There are sure cases wherein you discover a single person with remarkable instructive or scholastic foundation however he is discovered needing on expert experience front. One method for handling this issue of need in expert experience is to get an expert affirmation in your field of work.

#32

Uncover the universe of

Uncover the universe of Wordpress plugins. Wordpress plugins help you manufacture proficient evaluation sites. There are many accessible plugins for the planets most prevalent substance administration framework.Playing diversions will never lose its appeal. At the point when feature amusements came into this world individuals were engrossed to the point that they thought these are the most recent developments. Then again, the vicinity of different online activity amusements is an extraordinary accomplishment for the makers.

#33

were engrossed to the point

were engrossed to the point that they thought these are the most recent developments. Then again, the vicinity of different online activity amusements is an extraordinary accomplishment for the makers.
forex broker

#34

Then again, the vicinity of

Then again, the vicinity of different online activity amusements is an extraordinary accomplishment
Site internet crée par KLWeb

#35

For anyone who is

For anyone who is contemplating seeing a terrific variety of plants and also critters, Manu may be the place to move. Manu Nationwide Car park has also been expressed a UNESCO Planet Historical past Website.Church buildings, non profit organizations, and also students benefit from the generosity connected with regional and also countrywide protection authorities. During my unique neighborhood I begun to see samples of exactly how protection authorities could add in a very important technique.

#36

Discover the difference

Discover the difference between 'easy' women and 'HIGHLY SEXUAL' women. If you are a man and you are at all unsure about this, you might be setting yourself up for major relationship heartache if you don't know what I'm going to share with you in this article. Do yourself a favor and take a minute to read it now. You'll be glad you did...

#37

Revision Jönköping

Revision Jönköping difference between 'easy' women and 'HIGHLY SEXUAL' women. If you are a man and you are at all unsure about this, you might be setting yourself up for major relationship heartache if you don't know what I'm going to share with you in this article. Do yourself a favor and take a minute to read it now. You

#38

Discover the difference

Discover the difference between 'easy' women and 'HIGHLY SEXUAL' women. If you are a man and you are at all unsure about this, you might be setting yourself up for major relationship heartache if you don't know what I'm going to share with you in this article. Do yourself a favor and take a minute to read it now. You'll be glad you did...

#39

I have to say I am amazed by

I have to say I am amazed by your article. Indeed coupons is very useful specially to online consumers.

#40

I like the post and i am

I like the post and i am surprised. the way of ex-planing is very good manner.

#41

Having a great sex life by

Having a great sex life by adults over 60 is largely dependent on health and lifestyle. Their children and grandchildren are having a hard time getting used to the facts of life, that their aging parents or grandparents might still be enjoying sex.

#42

Very interesting! Really very

Very interesting! Really very nice blog you :)
Werkblad

#43

Great info. I love all the

Great info. I love all the posts, I really enjoyed, I would like more information about this, because it is very nice., Thanks for sharing

#44

This post is good enough to

This post is good enough to make somebody understand this amazing thing, and I’m sure everyone will appreciate this interesting things.

Post new comment

The content of this field is kept private and will not be shown publicly.
By submitting this form, you accept the Mollom privacy policy.

Languages

Contact