How to create a basic Drupal 8 theme

Open your installed Drupal project folder in any editor you prefer. Under the themes folder create a folder with your desired theme name.

Create the info file inside your theme folder with name: YourThemeName.info.yml

Open the info file you created and write the theme information in it (name, type, description, package, core):

name: JesoX demo theme
type: theme
description: A demo theme
package: other
core: 8.x

Also write the regions names you will need in your theme (you can create as many regions as you need), here are some suggested regions:

regions:
  header: 'Header'
  primary_menu: 'Primary menu'
  breadcrumb: 'Breadcrumb'
  content: 'Content'
  highlighted: 'Highlighted'
  sidebar_first: 'Left sidebar'
  sidebar_second: 'Right sidebar'
  footer: 'Footer'

To Enable your theme, go to your Manage -> Appearance, if you created the info file correctly you should find your theme in this page. Press install then click “Set as default”.

A screenshot of a cell phoneDescription automatically generated

There is good collection of built in Drupal themes, you can go to core/themes in your Drupal project folder and check out the info file inside the example themes and copy as many regions as you need.

Now to create a template page to list your regions and write the general html for your website, you can go to core/themes/seven/templates (or any other example theme) and copy the page.html.twig .Create a folder name “templates” in your theme and then paste the page.html.twig in it.

You should edit the page.html.twig to contain the regions in your theme info file. Also you can add any html you need for your template. This page will apply to your site Home page and inner pages.

In the example themes in the Drupal installation core, you’ll find many templates that can apply to many parts of your site like node.html.twig and block.html.twig and many more. Do not forget when you add or edit any template file in your theme to clear the caches, go to http://YourSiteName.com/admin/config/development/performance, and press the “Clear all caches” button.

Go to the Home page to see your new theme. To add Css and Javascript to your theme do the following:

  • In your theme create a new file and name it YourThemeName.libraries.yml, also create css and js folders. Inside the css folder create the stylesheet files you need and same for the js folder.

In the file “YourThemeName.libraries.yml” write:

global-styling:
  css:
    layout:
      css/styles.css: {}
  js:
    js/javascript.js: {}

Then don’t forget to Clear all caches (http://YourSiteName.com/admin/config/development/performance)

You can write css and javascript code in your files and test if it is working in your theme.

Now you can adjust your layout through the page.html.twig, css and javascript files.

If you want to create a block with content and put it in specific region in your design and specific pages too, you do the following:

  • Go to Manage -> Structure->Block layout->add custom block
  • Add the block title, and in the editor click source and in the text format drop down select “Full HTML”, write the html you need to add then press save.

A screenshot of a cell phoneDescription automatically generated

Click save, in the second screen that will appear you will select:

  • The content type you need your block to appear in (Article or Basic page)
  • The pages that you need your block to appear or do not appear in
  • The users that you need your block appears to (Anonymous user , Authenticated user or Administrator)
  • The region in your theme that you need your block to appear in.

A screenshot of a cell phoneDescription automatically generated

Click save block and go to your site home page to see the block in the location you selected.

Now you have learned all the basics to start creating Drupal 8 theme.

Thank you and Looking forward to help you do more with Drupal

Share this post