Adding Regions to a Theme

Adding regions to a theme requires:

- Adding region meta-data to your THEMENAME.info.yml file - Editing your page.html.twig file and printing the new regions

Adding Regions to Your Info File

Start by declaring any new regions in your THEMENAME.info.yml file. Regions are declared as children of the regions key like so:
# Regions
regions:
  header: 'Header'
  content: 'Content'
  footer: 'Footer'
Region keys should be alphanumeric, and can include underscores (_). Keys should begin with a letter. When referencing regions the key from your THEMENAME.info.yml file will be used as the machine readable name of the region, and is how you will reference the region in code. The value is the human readable name of the region and it will be used in the administration interface.

Adding Regions to Your Templates

In order for regions to display any content placed into them you'll need to make sure your new regions are also added to your page.html.twig file. Regions will be represented as Twig variables whose name corresponds with the key used in your THEMENAME.info.yml file with the string page. prepended. Example:

header: 'Header'

Will become:


{{ page.header }}
In your Twig templates. Beyond that, you can treat them just like any other Twig variable, output the content wherever you need to, and wrap them with whatever markup makes sense for your use case.

Default Regions

See the page.html.twig documentation for a list of default regions.
  1. page.header: Items for the header region.
  2. page.primary_menu: Items for the primary menu region.
  3. page.secondary_menu: Items for the secondary menu region.
  4. page.highlighted: Items for the highlighted content region.
  5. page.help: Dynamic help text, mostly for admin pages.
  6. page.content: The main content of the current page.
  7. page.sidebar_first: Items for the first sidebar.
  8. page.sidebar_second: Items for the second sidebar.
  9. page.footer: Items for the footer region.
  10. page.breadcrumb: Items for the breadcrumb region.

Now, main menu, secondary menu and breadcrumb have their own regions. If your theme does not declare any regions Drupal will assume a set of default regions. These regions correspond with what the default core/modules/system/templates/page.html.twig file expects, as well as two additional regions, page_top, and page_bottom, which are output in the default html.html.twig template.

If you declare any regions in your theme, even just one, all the default regions will no longer be applied and you assume resopnsibility for declaring any and all regions you want to use. Note: in most cases you'll want to make sure you declare the page_top and page_bottom regions in your theme since those are output by the html.html.twig file and some modules might expect them to be present.

Read more.

Sample blackbox block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non porta odio, id mattis erat.

Nam sed tincidunt eros. Donec a venenatis odio, vitae commodo sem. Vivamus ullamcorper pellentesque erat, in adipiscing tortor scelerisque sit amet. Nulla pulvinar urna magna. Vivamus a ipsum lorem. Etiam adipiscing pulvinar lorem.