How can you contact us

2By phone at +40 749 014 360

If you still have problems, please let us know, by sending an email to info@westweb-solutions.com Thank you!

OFFICE HOURS

Mon-Fri 9:00AM - 6:00AM
Sat - 9:00AM - 1:00PM
Sundays by appointment only!

Drupal 8 - How to add a region to a theme

/ / Drupal 8

We want to present you 4 steps to add a region to your theme.

1 Edit your theme's .info.yml file

We will call our region "My Custom Region", we declare it in our THEMENAME.info.yml file. Each region is declared as a subkey of the regions element as you can see below:

# Region metadata.
regions:
  header: 'Header'
  content: 'Content'
  content_bottom: 'Content (bottom)'
  primary_menu: 'Primary menu'
  banner_top: 'Banner (top)'
  banner_bottom: 'Banner (bottom)'
  footer: 'Footer'
  page_top: 'Page top'
  page_bottom: 'Page bottom'
  my_custom_region: 'My Custom Region'

!When you declare a new region in your theme, you override all the defaults provided by Drupal core, so in most cases you will want to have content, page_bottom, and page_top regions at a minimum because many modules expect them to be there.

2 Clear the cache

You have to clear the cache so the new regions can be detected.

3 Confirm that it's working

Now go to Structure > Block layout to confirm that Drupal is using your region, See the image below.

4 Edit your page.html.twig file

In the final step you have to display the new region in your page.html.twig template. If you haven't already, then you will need to override the default page.html.twig file.

Adding the metadata to your THEMENAME.info.yml file in step 1 has automatically introduced a new variable that you can access in page.html.twig template. The name corresponds to the array keys used in THEMENAME.info.yml file.

content: 'Content' corresponds with {{ page.content }}
my_custom_region: 'My Custom Region' corresponds with {{ page.my_custom_region }}

The final step you need to do is to adjust the markup in your page.html.twig template to output your new region.

{% if page.my_custom_region %}
  <section class="layout-custom-region" role="complementary">
    {{ page.my_custom_region }}
  </section>
{% endif %}

!When you print a region in your template that is not guaranteed to have content, it is better to wrap them in some conditional logic, because this way you won't end up with empty container elements in your output.

Sign in your account to have access to different features

Forgot your details?

TOP