Adding a custom Omega panel layout to your sub-theme

Adding a new Omega panel layout is fairly straight forward. This post isn't so much about how to create custom themes, but more about how you can get them showing up with your sub-themes folder structure. The easiest option (unrecommended) is to create your new panel layout within the original Omega theme directory, eg. /sites/all/themes/omega/panels/layouts/omega_12/ 

This isn't recommended as changes shouldn't be made to 'core' theme files. It means that your layout is likely to be overwritten if you upgrade to a newer version. All your custom templates should live within your own Omega sub-theme folder.

BTW. I recommend creating your new Omega panel layout using an existing Omega panel layout as a basis. This way you know the Omega themes responsive features will continue working as expected.

Steps to create a new panel layout within your own Omega sub-theme

Code & folder structure examples can be found at the end.

  1. Add a folder called 'panels' in your sub-theme - /sites/all/themes/custom/panels/ .
    In this example I'm going one step further and creating a folder structure which mimics the original base Omega theme structure, although it's not necessary - /sites/all/themes/custom/panels/layouts/omega_12/
  2. Copy the layout which you will use as a basis - /sites/all/themes/omega/panels/layouts/omega_12/omega_12_twocol_3_9
  3. Paste the folder within your sub-theme panel folder - /sites/all/themes/custom/panels/layouts/omega_12/omega_12_twocol_3_9
  4. Rename the copied folder - omega_12_twocol_3_9_stacked
  5. Within that folder rename the template files to your new name

    1. omega-12-twocol-3-9-stacked.tpl.php     (note that this uses dashes and not underscores)
    2. omega_12_twocol_3_9_stacked.inc
    3. omega_12_twocol_3_9_stacked.png
  6. Edit the .tpl.php & .inc files and update all references to your new name (code shown at the end).
  7. Within the .inc file, replacing these lines - see full code example at end as you also need to remove the closing tags:

    function omega_omega_12_twocol_3_9_panels_layouts() {
    $items['omega_12_twocol_3_9'] = array(

    with

    $plugin = array(
    
  8. Edit your sub-theme .info file - /sites/all/themes/custom/custom.info  adding this line:

    plugins[panels][layouts] = panels
  9. If there are included css files in the .inc file you can copy these over to your new sub-theme panels folder - eg. /sites/all/themes/custom/panels/layouts/omega_12/omega_panels_admin_12.css
  10. Update the .png file if you want it to mimic your new layout.
  11. Clear your site cache.
  12. The new panel layout should now be available.

Code examples

omega-12-twocol-3-9-stacked.tpl.php

<div class="panel-display omega-grid omega-12-twocol-3-9-stacked" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
  <div class="panel-panel grid-12">
    <div class="inside"><?php print $content['top']; ?></div>
  </div>
  <div class="panel-panel grid-3">
    <div class="inside"><?php print $content['left']; ?></div>
  </div>
  <div class="panel-panel grid-9">
    <div class="inside"><?php print $content['right']; ?></div>
  </div>
</div>

omega_12_twocol_3_9_stacked.inc

<?php

/**
* Implements hook_panels_layouts().
*/
$plugin = array(
    'title' => t('Two Column 3-9 stacked'),
    'category' => t('Omega: 12 Column Grid'),
    'icon' => 'omega_12_twocol_3_9_stacked.png',
    'theme' => 'omega_12_twocol_3_9_stacked',
    'admin css' => '../omega_panels_admin_12.css',
    'regions' => array(
      'top' => t('Top'),
   'left' => t('Left side'),
      'right' => t('Right side')
    ),
  );

Folder structure examples

Custom folder structure

Core Omega theme folder structure

Justin Chevallier

Justin Chevallier

Avid Drupal site builder & user for +10 years.

Comments

Submitted by Stefan on

Hi, thank you for this tutorial. Could you give me a hint how this works in Omega 4.x?

Submitted by Justin on

Hmmm now you're asking. I will have to look into that as I've not delved too far into Omega 4 at this point!

Submitted by eddie on

thanks, after headbanging for 10 mins I found the issue that the tpl uses dashes and not underscores, as you mention!

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.