Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • How to add regions in Drupal 8 theme

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.27k
    Comment on it

    This tutorial will guide you about "How to add regions in drupal 8 theme".

    To add region in your template file, first you have to define region in your meta data file i.e ( & then edit page.html.twig file to print the regions that you want to use.

    Note: If you declare any regions in your file, even one then all the default regions will not overridden by current theme.

    Here are the simple steps to add regions to your theme.


    Step 1 Edit your file & declare regions like this:

          header: 'Header'
          content: 'Content'
          footer: 'Footer'
              sidebar_right: 'Sidebar Right'

    Keys should be alphanumeric & begin with letter & can include underscores like (sidebar_right).
    header, content, footer, sidebar_right are keys of region. These keys are also known as machine names which you can use in your template file (page.html.twig)


    Step 2: Clear the cache
    clear the cache (To clear cache go to admin-> configuration->performance, then click on clear all caches button) so that new regions can be detected in the block layout.


    Step 3:  Now go to Structure -> Block layout & add blocks in your regions.


    Step 4: Edit your page.html.twig file

    Twig variable is used to display region in (in your page.html.twig) & it is same as key name or machine name which have declared in file.

    For Example:
    content: 'Content' in your info file will become:{{ page.content }} in your template file.


     <section class="sidebar">
        {{ page.sidebar_right }}

    Similarly, you can add more region (using twig variables) in your page.html.twig file which is define in file.

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: