As I recently posted on the 7.x-2.x branch of the Omega theme, there have been a lot of changes recently to the core of Omega, and how it interacts with the Drupal theme layer.

This post will summarize the concept of Zones in Omega, and further serve as a demonstration of the possibility for developers to advance usage of the theme layer in your own themes, while attempting to demonstrate how the Omega theme might be your best choice for a starting point on your own project.

Overview of Zones in Omega

In previous versions of Drupal and the Omega theme, it was "quite difficult" for a non-PHP savvy developer to manipulate the regions available to page.tpl.php. The code on the backend that controlled the sizing and placement of certain regions is hard coded into the .info file, and in the page.tpl.php along with the form settings in theme-settings.php. The vision of Omega is to create an interface that truly gives ANY user the ability to drastically modify their site layout without large learning curves.

The current state of the 7.x-2.x branch of Omega takes a huge leap forward in laying the groundwork for this possibility.

Rather than needing to define new regions in .info, and placing them in page.tpl.php, then making any additions/modifications to theme-settings.php, Omega will make this all streamlined in relation to the grid settings of each region/zone and rendering of elements.

By Definition:

A Zone is defined as a container for regions.

Historically, in Drupal, you would simply add in a <div> tag in your page.tpl.php to contain your regions. Omega aims to make this must faster by automatically creating the containers (zones) and grid elements (regions) on the fly based on certain elements in both code and theme settings. As seen in the 6.x and 7.x-1.x versions of Omega (among other themes), your page.tpl.php can quickly spiral out of control with regions and become hard to manage or properly manipulate.

Digging into how it is done...

First, let's take a quick glance at the new page.tpl.php in Omega, and get an idea of how it works.

Above, we seen the ENTIRE contents of page.tpl.php. The main idea to note here is that using Omega, we no longer place regions traditionally, but use an alternative method in order to place our regions where and how we want.

There are two essential "wrappers" around our normal regions.

• Each group of regions is contained in a zone.
• There are 3 Zone Groups that are rendered in page.tpl.php
  • Zones Above Content
  • Content Zones
  • Zones Below Content

The easiest possible method to determine the content of each of these zones is based in the .info file for your Omega subtheme.

Default Regions in omega_starterkit.info

; CONTENT REGIONS<br><br>; REQUIRED CORE REGIONS<br><br>regions[page_top] = Page Top<br>regions[page_bottom] = Page Bottom<br>regions[content] = Content<br><br>; END REQUIRED CORE REGIONS<br><br>; OPTIONAL CONTENT REGIONS<br><br>regions[user_bar_first] = User Bar First<br>regions[user_bar_second] = User Bar Second<br><br>regions[sidebar_first] = Sidebar First<br>regions[sidebar_second] = Sidebar Second<br><br>regions[location_search] = Location Bar<br><br>regions[header_first] = Header First<br>regions[header_second] = Header Second<br><br>regions[preface_first] = Preface First<br>regions[preface_second] = Preface Second<br>regions[preface_third] = Preface Third<br><br>regions[postscript_first] = Postscript First<br>regions[postscript_second] = Postscript Second<br>regions[postscript_third] = Postscript Third<br>regions[postscript_fourth] = Postscript Fourth<br><br>regions[footer_first] = Footer First<br>regions[footer_second] = Footer Second<br><br>; END CONTENT REGIONS

Above, we can see a normal list of region definitions in the .info file for our theme.

Default Zones in omega_starterkit.info

; CONTENT ZONES<br><br>zones[user][] = user_bar_first<br>zones[user][] = user_bar_second<br><br>;-----/ The branding zone is required and contains "special" content items<br>zones[branding][] = branding<br>zones[branding][] = menu<br><br>zones[header][] = header_first<br>zones[header][] = header_second<br><br>zones[preface][] = preface_first<br>zones[preface][] = preface_second<br>zones[preface][] = preface_third<br><br>;-----/ The location zone is required and contains "special" content items<br>zones[location][] = breadcrumb<br><br>;-----/ The content zone is required and contains required content items<br>;-----/ The content region should ALWAYS be first for source ordering.<br>zones[content][] = content<br>zones[content][] = sidebar_first<br>zones[content][] = sidebar_second<br><br>zones[postscript][] = postscript_first<br>zones[postscript][] = postscript_second<br>zones[postscript][] = postscript_third<br>zones[postscript][] = postscript_fourth<br><br>zones[footer][] = footer_first<br>zones[footer][] = footer_second<br><br>; END CONTENT ZONES

In this segment of code, we actually start to understand how the regions are placed in their appropriate container element, and then rendered to the page.

Zone Placement in page.tpl.php

In case it isn't clear by the .info ordering how these zones are placed, I'll explain this a bit further... Again there are three "groups" of zones... zones_above, zones_content and zones_below. The order in which zones are defined in the .info file defines the ordering of those zones inside their zone group, so moving a zone in this definition will move the item and its placement in page.tpl.php.

Zones Above Content
zones[user][] = user_bar_first<br>zones[user][] = user_bar_second<br><br>zones[branding][] = branding<br>zones[branding][] = menu<br><br>zones[header][] = header_first<br>zones[header][] = header_second<br><br>zones[preface][] = preface_first<br>zones[preface][] = preface_second<br>zones[preface][] = preface_third<br><br>zones[location][] = breadcrumb
Content Zones
zones[content][] = content<br>zones[content][] = sidebar_first<br>zones[content][] = sidebar_second
Zones Below Content
zones[postscript][] = postscript_first<br>zones[postscript][] = postscript_second<br>zones[postscript][] = postscript_third<br>zones[postscript][] = postscript_fourth<br><br>zones[footer][] = footer_first<br>zones[footer][] = footer_second

This is the simplest possible ordering available in Omega, and would quickly allow you to move your preface above your header, or add an additional zone and regions below the footer regions currently available. Work that will be coming in the Omega UI will eventually make it possible to NOT need to edit the .info file, but will instead allow the automated rewriting of this zone section, letting you drag and drop region & zone placements on the fly.

The above image shows that the zone ordering also applies to the way the zones are broken up into theme settings, and how they are ordered there.

In the 7.x-2.x version of Omega, the theme settings have become 100% dynamic, and will allow any region to use prefix/suffix classes, content first ordering using push/pull, etc. And to accomplish this, a very standardized naming system for the settings variables in the .info file have also become standard. In previous iterations (completely out of mistake, and not wanting to change it later many variables might have been called container, or wrapper in various areas. Now the variables that control the grid are much easier to decipher in the .info file if/when attempting to edit settings there.

Conclusion

This really goes quite a long ways in explaining the new methodology in the Omega theme, and there is much more to come on what can be already be done utilizing this new concept of zones, and how to further push this into other Drupal themes, and maybe even in Drupal core in the future.

Some of my next posts on Zones & Zone Mangement will cover topics like creating new zones, managing zone templates, managing zone group templates, and more!