Panels: How to create your own custom panel

As promised earlier in my presentation on building Drupal sites using CCK, Views and Panels, here is an article on how to write a custom panel, that implements a custom layout.

I called it mypanel, and it implements a new layout that is best represented by the icon on the right.

Only two functions are required to implement a basic panel. One is an implementation of the panels_layouts hook, and the other is a theme function.

The first function returns an array with certain data, such as the module that implements this panel, a title, the theme function that generates the panel, the icon for the pane, and the css file to use. Then a list of content areas that this panel implements.

The second function just puts some HTML and places $content[areaname] in the appropriate places.

Here is the code for the panel. Of course you can decide to use pure CSS without tables.

<?php
function mypanel_panels_layouts() {
$items['mypanel'] = array(
'module' => 'mypanel',
'title'  => t('mypanel home'),
'theme'  => 'mypanel',
'icon'   => 'mypanel.png',
'css'    => 'mypanel.css',
'content areas'      => array(
'top_story'        => t('Top Story'),
'op_ed'            => t('Op Ed'),
'op_ed_list'       => t('Op Ed list'),
'banner'           => t('Banner'),
'gallery'          => t('Gallery'),
'featured_gallery' => t('Featured Ads'),
'links'            => t('Links'),
),
);
return $items;
}
function theme_mypanel($id, $content) {
$output = <<<EOT
<table id="fp-top-story">
<tr>
<td class="top-story">$content[top_story]</td>
</tr>
</table>
<table id="fp-op_ed">
<tr>
<td width="50%" class="oped" valign="top">
$content[op_ed]
</td>
<td width="50%" valign="top" class="oped_list">
$content[op_ed_list]
</td>
</tr>
</table>
<div id="banner">
<div class="front-page-banner">$content[banner]</div>
</div>
<table id="fp-gallery">
<tr>
<td valign="top" width="50%" class="creative-gallery">
$content[gallery]
</td>
<td valign="top" width="50%" class="featured-gallery">
$content[featured_gallery]
</td>
</tr>
</table>
<div id="page-links-main">
$content[links]
</div>
EOT;
return $output;
}
?> 

And there you have it ...

Contents: 

Comments

Panels

Thanks for the tutorial. I've searched high and low for info on how to do this and your site is the only one I found. Would the sample code be placed in mypanel.module file? If not, where does this code need to go?

panels

You're the man! Thanks for the prompt response.

FYI - panels

I'm new to drupal 5.0 but it looks like you need to create an .info file as well in order to get this to work.

Panels 2 has flexible lay-out

Hi,

With panels 2 (drupal 5.1) you can choose whatever layout you like by selecting the flexible panel possibility.
That way you don't need to build a module, and you have a nice panels-integrated result!

greetings,
Martijn

Well, I give up. I try yo

Well, I give up. I try yo implement this on a Panels 5.x-1.2 creating the .inc, .css and .png files on the layout folder and the module dont recognize it. Also try to update module with no effects. What i'm doing wrong?

thanks in advance

Thanks!

This was exactly what I needed; merlin had mentioned this as how you do your own styles without putting them in the panels layout directory, but not anything special needed for a module.

BTW, there is a random "aaa" at the end of the article.