And we’re back with a fresh tasty new tutorial for you!

In this tutorial I’ll review how to make a custom theme for a Drupal 8 site. I’ll show you how to define regions, attach css style and javascript files, and override the default design by using a Twig Template.

drupal 8 logo inline RGB 300

STEP 1:

First, place your theme folder inside the themes folder. Here’s my folder structure (I’m using “mytheme” as my theme’s name in this tutorial):

mytheme.info.yml

mytheme.theme

mytheme.png

screenshot.png

mytheme.libraries.yml

libraries/globalstyling/css/globalstyling.css

libraries/globalstyling/js/globalstyling.js

templates/

Instead of creating a theme from scratch, you can download any Drupal themes found online and use them as the base theme. You can also copy the sample themes inside your core folder.

mytheme.info.yml

name: mytheme

type: theme

description: My FIrst Drupal 8 Theme

package: Other

core: 8.x

base theme:

screenshot: mytheme-screenshot.png

libraries:

 – museumx/globalstyling

regions:

 header: Header

 content: Content

 sidebar_first: ‘Sidebar first’

 footer: Footer

 

You must define the basic information for you theme like name and description. You can attach libraries here and it will apply to your whole site (we’ll define a library later). The key here is to define the regions for your site. You can take a look at the picture below. By default Drupal 8 is using the Bartik theme which contains a lot of regions for example primary menu, secondary menu, sidebar first, sidebar second and so on. I want to keep my theme simple so my theme only has a header, content, sidebar first and footer.

block-region

Bartik Theme Block Region

 

 

2. mytheme.theme

<?php

 

/**

* @file

* Functions to support theming in the mytheme theme.

*/

 

use Drupal\Component\Utility\SafeMarkup;

use Drupal\node\Entity\Node;

 

function mytheme_preprocess_html(&$variables) {}

function mytheme_page_attachments_alter(array &$page) {}

function mytheme_preprocess_page(&$variables) {}

function mytheme_theme_suggestions_page_alter(array &$suggestions, array $variables) {}

function mytheme_theme_suggestions_node_alter(array &$suggestions, array $variables) {}

function mytheme_preprocess_block(&$variables) {}

function mytheme_theme_suggestions_field_alter(array &$suggestions, array $variables) {}

function mytheme_theme_suggestions_fieldset_alter(array &$suggestions, array $variables) {}

function mytheme_preprocess_node(&$variables) {}

function mytheme_theme_suggestions_views_view_alter(array &$suggestions, array $variables) {}

function mytheme_preprocess_form(&$variables) {}

function mytheme_preprocess_select(&$variables) {}

function mytheme_preprocess_field(&$variables, $hook) {}

function mytheme_preprocess_details(&$variables) {}

function mytheme_theme_suggestions_details_alter(array &$suggestions, array $variables) {}

function mytheme_preprocess_menu_local_task(&$variables) {}

 

This file defines the pre-processing of your site’s data. We don’t need to edit this file in this tutorial.

3. logo.svg

This will be  your site’s logo. You can also update it in your CMS menu: Appearance->setting

4. screenshot.png

You can see your theme’s screenshot in the Appearance page

5. mytheme.libraries.yml

 

globalstyling:

 version: 1.x

 css:

theme:

  libraries/globalstyling/css/globalstyling.css: {}

 js:

  libraries/globalstyling/js/globalstyling.js: {}

 

 

Your libraries are defined here.  You can attach css and js files for the whole site, one page or a subset of pages. Use some testing scripts like “body{background-color:pink}” and “console.log(“halo”)” for the css and js files enable you to test the results quickly. If you are using some front-end framework like Foundation then you have to define the css and js files here as well. For more information about attaching css or js to the theme, please visit: https://www.drupal.org/theme-guide/8/assets

6. templates/

You can replace the default core templates with your custom templates if you follow a particular naming conventions. Before overriding the templates please enable Twig debugging so that you know what template to replace. In sites/default-/services.yml, set twig debug to true:

 

twig.config:

 debug: true

 

Now go to any of the pages on your site and open the developer tool in your browser. You should be able to see the debug comment. Choose the html element you want to replace:

twig 

 

 

 

Let’s say we want to replace the whole div element page-wrapper with our own design. First, create a twig template file called page–front.html.twig (for this page only) or page.html.twig. and copy the default page.html.twig from core/themes/bartik/templates.

 

Next, open page.html.twig to view the variables like page.content, page.sidebar_first, etc. Now you can rearrange your region’s position and put it in the html file in your own way.  

 

Example:

<div class=”my-wrapper1”> {{ page.content }} </div>

<div class=”my-wrapper2”> {{ page.content_left }} </div>

 

We can get rid of the region we’re not using in this tutorial like: {{ page.footer_first }}, {{ page.footer_second }}, {{ page.footer_third }}, {{ page.footer_fourth }}

 

Now, install your theme and start making changes to your design. Go to the block layout page and you can start placing different blocks to the regions you just defined. Best of luck!

 

Reference:

Theme: https://www.drupal.org/theme-guide/8

Assets: https://www.drupal.org/theme-guide/8/assets

Twig: https://www.drupal.org/theme-guide/8/twig