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
- the layout's file names
- 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....
- Rename file names
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.
- 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!