Custom grid panels layout with Omega theme

For a lot of my recent projects I have used the Omega theme as the base theme, I love the whole responsive design support and grid system. But when you create a Panels page and choose a layout you don’t get the same grid support as you do with Omega.

Panels outputs its own grid system, where as Omega has an easy to follow grid framework. Check out the Containers and Grids (Omega 2.x documentation) page to understand how to create grid layouts.

In this article I’ll show you how to create a grid layout as a custom panels layout. We’ll then apply this layout to the node_view (/node/%node) page.

UPDATE: Omega does offer integration for panels.

Getting started

I’ll make the assumption that you already have an Omega sub theme. Next, just make sure you have downloaded and installed Panels and Page manager (part of ctools).

Before we jump into some code let me show you what we’ll be creating in this article. The image below is what we want to create as a Panels layouts.

The HTML will look like this:

Take note of the grid-X, alpha and omega classes.

The end result should be something like this:

Panels layout

You can ship a layout in two ways. You can add it to a module or to a theme, I’ll show you how to do both.

Add panels layout to theme

Open your theme .info file and add plugins[panels][layouts] = plugins.

Create a folder called plugins and another for the actual layout and we’ll call itzu_custom_twocol_theme (you call it whatever you like). The path to the layout should be something likesites/all/themes/custom_theme/plugins/layouts/panels_layout.

Now, we need to build the actual layout and this requires a few files. To help us along, to go the Panels module and then go to plugins/layouts and copy the files in twocol folder into the layout directory you just created in your theme.

Let now examine the files:

twocol.inc (In this file you’ll declare the $plugin)
panels-twocol.tpl.php (The actual template file)
twocol.png (Icon of the layout that’ll be used on the layout page in panels)
twocol.css (Specific CSS for the layout, but this isn’t always required)

Rename name twocol.inc to zu_custom_twocol_theme.inc. Open the .inc file and replace the following.

From this:

// Plugin definition
$plugin = array(
'title' => t('Two column'),
'category' => t('Columns: 2'),
'icon' => 'twocol.png',
'theme' => 'panels_twocol',
'css' => 'twocol.css',
'regions' => array(
'left' => t('Left side'),
'right' => t('Right side')
),
);

To this:

// Plugin definition.
$plugin = array(
'title' => t('Custom Two column (Omega) in theme'),
'category' => t('Columns: 2'),
'icon' => 'custom_twocol_omega_theme.png',
'theme' => 'zu_custom_twocol_theme',
//'css' => 'twocol_30_70_stacked.css',
'regions' => array(
'left' => t('Left'),
'right' => t('Right'),
'footer' => t('Footer'),
),
);

Let’s examine the zu_custom_twocol_theme.inc file a bit further.

The $plugin array is used to define the settings of the layout. One important item to know is that 'theme' => 'zu_custom_twocol_theme', will look for a template file called zu-custom-twocol-theme.tpl.php notzu_custom_twocol_theme.tpl.php.

The 'icon' value is used to specify an icon.

In the 'css' value you would specify a css file for the layout, but in this example we are using the Omega framework to create the layout. So a CSS file for the layout is not required.

In the regions array, just define what regions you want. Then, simply print a keyed variable with the region name in the layout (.tpl.php). Example, <?php print $content['footer']; ?>

Next, rename panels-twocol.tpl.php to zu-custom-twocol-theme.tpl.php and replace the contents of the file with:

A good practise to follow if your creating layouts is to always keep the main wrapper div (.panel-display) the same except, only change a specific class in the div.

<div class="panel-display panel-custom-class-name clearfix" <?php if (!empty($css_id)) { print "id="$css_id""; } ?>>

It will help you keep things consistent and themer’s will thank you.

Add panels layout to module (or features module)

The final thing I’ll demonstrate is how to ship a layout in a module (also works with feature modules). Go to your module and create a plugins directory then a layouts directory within plugins. You should end up with plugins/layouts.

Open up your .module file and implement hook_ctools_plugin_directory.

/**
* Implementation of hook_ctools_plugin_directory().
*
*/
function example_ctools_plugin_directory($owner, $plugin_type) {
if ($owner == 'panels' && $plugin_type == 'layouts') {
return "plugins/$plugin_type";
}
}

Clear your site cache and your done.

If you have any problems or questions please leave a comment.

More resources:

Original Article:

Custom grid panels layout with Omega theme