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
    • 754
    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 (themename.info.yml) & then edit page.html.twig file to print the regions that you want to use.

    Note: If you declare any regions in your thenename.info.yml 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 themename.info.yml file & declare regions like this:
     

      regions:
          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 themename.info.yml file.

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

     

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

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

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
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: