You are here

Adding a new region to your Omega 4.0 subtheme (Drupal)

I just created a customized 404 'file-not-found' page for this blog of mine, but realized in the process that my custom Omega 7.x-4.x sub-theme doesn't have a 'Content - after' region.  This was a problem, because I wanted my new page to have some content on top, and for me to place my term lists as blocks in a 'Content - after' region!

So here is how I solved my problem, and how you can easily add any number of custom regions to your sub-themes to make them more flexible.

I'm tagging this as an Omega-4.x related tutorial, since in the Omega 3.x branch, you create regions the old way (via declaring them in your subtheme's .info file) and can then drag and drop unassigned regions into zones via an admin interface.  The 4.x branch has taken this type of functionality out of the admin interface and put it into the actual code, so this is very 4.x branch specific.

Create new layout

  • Copy the entire layout folder for the simple layout included in the parent Omega theme found in /omega/layouts/ and paste into your subtheme's layouts/ directory
  • Rename the layout's folder you just copied with whatever you want to name your new layout.  Also rename all the remaining reference to the layout's name in the following places (in my examples below I've named my new layout 'bd_custom'):
    • the layout's file names
      simple.layout.inc --> becomes 'bd_custom.layout.inc'
      simple-layout.tpl.php --> becomes 'bd_custom-layout.tpl.php'

      I want to make a special note, based on some of the confusion in the comments after the publishing of this post: the name of this tpl.php file is coming from the template name you've declared in your .layout.inc file.  Make sure they match!  Otherwise, it won't find and load the correct template file!
       

    • Text in bd_custom.layout.inc file
      Edit the name, description, and template fields to your liking.  My example below (**note the change to the final line at the bottom

      name = BD Custom Layout
      description = Customized 3 column layout with before-content and after-content regions.
      preview = preview.png (<-- didn't change this)
      template = bd_custom-layout
      ...
      
      ; Stylesheets
      stylesheets[all][] = css/layouts/bd_custom/bd_custom.layout.css
      

       

  • Copy the omega/sass/layouts/simple folder and paste it into your custom theme directory's sass/layouts/ folder
    • Rename file names
      layouts/simple --> becomes layouts/bd_custom
      layouts/simple/simple.layout.scss --> becomes layouts/bd_custom/bd_custom.layout.scss

      Note: Make sure your sass layout file above is successfully compiled into a corresponding .css file.  If it isn't, another thing you can do is copy and paste the corresponding css/layouts/simple folder and rename those files too....

Create your new regions

Declare your new regions in your custom layout's .layout.inc file and in your custom theme's .info file

In my case, I added the below to <subtheme>/layouts/bd_custom/bd_custom.layout.inc and to <subtheme>/<subtheme>.info, and now both the theme and the layout will be aware of the new region!:
 

regions[content_after] = Content - After

 

Edit Template files to place the new region correctly

Now that the new region is available, we need to edit our layouts template file to output it in the correct place!  Edit your regions tpl.php file (in my case <subtheme>/layouts/bd_custom/bd_custom-layout.tpl.php) for this purpose.  In my case, I just found where the template spits out the "content" region's contents and output the new "content_after" region directly after it.  Your case may be slightly different depending on where you envision your region, so modify your template file accordingly.

Here, you can see that I added my new content right after the rendering of the existing "content" region.

<?php print render($page['content']); ?>
<?php print render($page['content_after']); ?>

Note that you may want to do something more elaborate than what I'm describing above.  For example, you may want to enclose your new region in specific divs to allow for greater styling opportunities later, or something like that

<div class="your-region-class">
...
</div>

My example above is very minimal, but feel free to add whatever html you need in the template file to make your new region work!

Edit sass file

For my use-case, I'm not making any edits to my layout's sass (and thus css), but feel free to edit the new sass file you placed under your sass/layouts directory to correspond with this new layout.

Testing

  • Clear your cache
  • Go to your subtheme's admin page to make sure your new layout is available: admin/appearance/settings/<subtheme>

    Select your new layout and Save.
  • Now if you go to your blocks admin screen, and hit the 'Demonstrate block regions' link at the top, you should see a demo of where your template file is placing the content in those regions.  Mine are just where I want them:
  • Put some blocks in the new region - you should see the new region in both your block admin page, and as you create or edit your site's contexts!

 

Share

Comments

I also have to have the region declared in my sub-theme's .info file to get this to work (ie add the line, regions[content_after] = Content - After, to .info), otherwise Content - After is not picked up when the layout is enabled.

Mark, you're absolutely right!  Thank you for pointing that out.  I had missed it in my steps, and probably caused more than one person to scratch their head in confusion.  :-)  I've updated my tutorial to reflect the edits needed in the .info file!

I followed this guide and the new regions I added appear in /admin/structure/block so I can add blocks there. I noticed there is a direct correlation to <theme>/theme.info file where regions are defined and the admin/structure/block section.

They don't appear in my rendered page source code though.

I added the correctly named
<div class="l-footer-column1"><?php print render($page['footercolumn1']); ?></div>
to my <layouts>/file-layout.tpl.php file. and added the region definitions (copy from theme.info file) to <layouts>file.layout.inc.

Any help appreciated.

I did all the steps and my new region appears in the administration screen, but never renders on the page. I asure you I followed all the steps, doublechecked the .info files, but still it's not rendering

Hmm, mine is working, and I can't figure out whether I missed a step or whether there's something different in your setup.  Does it work when you click the "Demonstrate block regions" link on the Blocks admin page?  That should use the rendering mechanism...

The thing I was missing was the name in the Name_of_my_layout.layout.inc file(template = Name_of_my_layout). It was not taking the right tpl.php !!!

Good investigative work!  And thanks for reporting back - may help someone else too.

Thanks Anelia. The name of the template did the trick.

how can i add a box around the region .?
iam not able to get a box . the block is rendered properly,.

Do you mean that you want to do something visually with CSS?  I'm not sure what you're asking exactly :(

Your block may look different based on the *Theme* you're using. 

Is it really necessary create new layout to add a new region ??

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.