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 ...