How do you create a custom Panels layout in an Omega sub-theme?

Question

I'd like to create a new custom Panels layout based on one of the Omega Panels layouts and put it in my Omega sub-theme, but I can't seem to find a way to do this.

So far I've added the following to my sub-theme .info file:

; PLUGINS
plugins[panels][layouts] = panels/layouts

I have then taken the layout I want to work from (omega_12_twocol_6_6_bricks) and renamed and copied this to sites/all/themes/mycustom/panels/layouts/omega_12/mycustom_12_twocol_6_6_bricks. I then renamed all the files within the mycustom_12_twocol_6_6_bricks directory replacing 'omega' with 'mycustom'. Then, within my mycustom_12_twocol_6_6_bricks.inc file I changed:

function omega_omega_12_twocol_6_6_bricks_panels_layouts() {
  $items['omega_12_twocol_6_6_bricks'] = array(
    'title' => t('Two Column 6-6 bricks'),
    'category' => t('Omega: 12 Column Grid'),
    'icon' => 'omega_12_twocol_6_6_bricks.png',
    'theme' => 'omega_12_twocol_6_6_bricks',
    'admin css' => '../omega_panels_admin_12.css',
    'regions' => array(
      'top' => t('Top'),
      'left_above' => t('Left above'),
      'right_above' => t('Right above'),
      'middle' => t('Middle'),
      'left_below' => t('Left below'),
      'right_below' => t('Right below'),
      'bottom' => t('Bottom'),
    ),
  );

  return $items;
}

to

function mycustom_omega_12_twocol_6_6_bricks_panels_layouts() {
  $items['mycustom_12_twocol_6_6_bricks'] = array(
    'title' => t('My Custom Two Column 6-6 bricks'),
    'category' => t('Omega: 12 Column Grid'),
    'icon' => 'mycustom_12_twocol_6_6_bricks.png',
    'theme' => 'mycustom_12_twocol_6_6_bricks',
    'admin css' => '../omega_panels_admin_12.css',
    'regions' => array(
      'top' => t('Top'),
      'left_above' => t('Left above'),
      'right_above' => t('Right above'),
      'middle' => t('Middle'),
      'left_below' => t('Left below'),
      'right_below' => t('Right below'),
      'bottom' => t('Bottom'),
    ),
  );

  return $items;
}

I also copied the admin css file into the relative directory as stated in the .inc file, cleared all cache and ran update.php, but I can't see my new layout when adding a new Panel.

The module versions I'm using are:

• Drupal 7.22
• Panels 3.3
• Omega 3.1

Any help here appreciated.

Many thanks

Answer 1

The basic process is:

Edit the MYTHEME.info file:

; PLUGINS
plugins[panels][layouts] = panels/layouts

Create a directory in panels/layouts/mypanel

Create your include panels/layouts/mypanel/mypanel.inc

/**
 * Implements hook_panels_layouts().
 */
function mytheme_mypanel_panels_layouts() {
  $items['mypanel'] = array(
    'title' => t('My Panel'),
    'category' => t('My Site'),
    'icon' => 'mypanel.png',
    'theme' => 'mypanel',
    'regions' => array(
      'top' => t('Top'),
      'left' => t('Left column'),
      'right' => t('Right column')
    ),
  );

  return $items;
}

Create your 50x75 mypanel.png, and place it as panels/layouts/mypanel/mypanel.png

Create the template file as panels/layouts/mypanel/mypanel.tpl.php

<div class="panel-display mypanel" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
    <div class="panel-panel mypanel-top grid-16 alpha omega">
        <div class="inside"><?php print $content['top']; ?></div>
    </div>

    <div class="panel-panel mypanel-left prefix-1 grid-4 alpha">
        <div class="inside"><?php print $content['left']; ?></div>
    </div>

    <div class="panel-panel mypanel-right grid-9 suffix-1 omega">
        <div class="inside"><?php print $content['right']; ?></div>
    </div>
</div>

Upload, clear cache, and see if you can make a panel page. Nine times out of ten, the problem with Panels picking up custom panel layouts has to do with a misnamed include or template file, which I suspect is your problem.

Answer 2

Copy one of the existing layout's folder to your site's theme directory to use as our template or outline which we will then rename, twocol for example. If you theme was named mytheme, the twocol folder would be copied to /sites/all/themes/mytheme/layouts/twocol.

This folder contains four files. These files are:

1. twocol.png, a screenshot of the layout.
2. twocol.css, a stylesheet for the layout.
3. twocol.inc, contains only an implementation of hook_panels_layouts().
4. panels-twocol.tpl.php, the template file for the layout.

We need to rename the files. We will be creating a simple layout with one row and two columns below, called onerowtwocols. Replace all the twocols names in the filenames with onerowtwocols, except for panels-twocol.tpl.php, which must be renamed to onerowtwocols.tpl.php (i.e. also remove panels- from the name). Don’t forget to also rename the folder to onerowtwocols.

Now, we need to change our theme's info file, which in this example would exist in our root theme folder at /sites/all/themes/mytheme, called mytheme.info. We need to tell Drupal where the folder with the custom panel layouts for this theme will be located, by adding the following line to the bottom of the file:

; Panels layouts. You can place multiple layouts under the "layouts" folder.
plugins[panels][layouts] = layouts

The title will be displayed in Drupal, it is wrapped in the t() function which makes it translatable. We will use 'title' => t('One row, two columns'),.

The screenshot of the layout is next, it will be 'icon' => 'onerowtwocols.png',. The theme will be the name of the template file without the .tpl.php extension, like this: 'theme' => 'onerowtwocols',.

The CSS: 'css' => 'onerowtwocols.css',.

In the panels array we will define the regions in which content can be placed once our layout is finished, just add a new item for each area, we will end up with this:

'panels' => array(
    'top' => t('Top'),
    'left' => t('Left side'),
    'right' => t('Right side')
),

you will find a plugins array (in the .inc file) like this:

$plugin = array(
  'title' => t('One row two columns'),
  'category' => t('onerowtwocols'),
  'icon' => 'onerowtwocols.png',
  'theme' => 'onerowtwocols',
  'css' => 'onerowtwocols.css',
  'regions' => array(
    'top' => t('Top'),
    'right' => t('Right side'),
    'left' => t('Left side')
  ),
);

...so you just edit that array, more or less using instructions above (it is pretty obvious). Edit the screenshot the way you want to best represent your layout, make sure you keep the filesize (in pixels) of the original png file so it will look nice and clean in the Panels user interface.

Now let’s start the actual layout part. Open onerowtwocols.tpl.php and take a moment to see how the two columns layout was set up. The little PHP snippets like print $content['left']; are used to define the area where content can be added. We will partly use the existing HTML and change some of our own. We will start at the outside and work our way in. The outer div will almost stay the same, we will only change one class to our own:

<div class="panel-display panel-1row2cols clearfix" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
    <!-- Our content goes here -->
</div>

The PHP snippet inside the div makes it possible to use CSS from the Panels user interface. We will leave it in, but it is better to only use CSS through a stylesheet to separate style from our PHP. Next we will create two rows:

<div class="panel-display panel-1row2cols clearfix" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
    <div class="panel-1row2cols-row clearfix"><!-- Our content goes here --></div>
    <div class="panel-1row2cols-row clearfix"><!-- Our content goes here --></div>
</div>

Because we will not set a fixed width and height we can give both rows the same class. Now we will create the two columns in the bottom row:

<div class="panel-display panel-1row2cols clearfix" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
    <div class="panel-1row2cols-row clearfix"><!-- Our content goes here --></div>
    <div class="panel-1row2cols-row clearfix">
        <div class="panel-1row2cols-left"><!-- Our content goes here --></div>
        <div class="panel-1row2cols-right"><!-- Our content goes here --></div>
    </div>
</div>

Finally we will add our areas, using the names we used in the onerowtwocols.inc file:

<div class="panel-display panel-1row2cols clearfix" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
    <div class="panel-1row2cols-row clearfix"><?php print $content['top']; ?></div>
    <div class="panel-1row2cols-row clearfix">
        <div class="panel-1row2cols-left"><?php print $content['left']; ?></div>
        <div class="panel-1row2cols-right"><?php print $content['right']; ?></div>
    </div>
</div>

This means there’s only one file left to edit, our css file. We will make the layout fit the area it will be in, so we won’t give any fixed widths:

The outer div and the rows will be 100%:

.panel-1row2cols {
    width: 100%;
}
.panel-1row2cols-row{
    width: 100%;
}
Our columns will float to the left and to the right:
.panel-1row2cols-left {
    float: left;
}
.panel-1row2cols-right {
    float: right;
}

Finally we will have to make our layout ready for use, by clearing the cache so it will actually show up with the other layouts.