Drupal Solution

Migrating your Drupal 7 themes to Drupal 8

Abhai.sasidharan | | 3 min read

Theming in Drupal 8 is a lot different. This article gives you a comprehensive insight into how to port your Drupal 7 theme to Drupal 8.

First of all, you need to install Drupal 8. It will take less than 5 minutes with drush: 

 drush dl drupal --drupal-project-rename=example
cd example
drush site-install standard --db-url='mysql://[db_user]:[db_pass]@localhost/[db_name]' --site-name=Example

Now we will look at the major changes in Drupal 8 theming. Short version: Everything. Since Drupal 8 uses Twig template engine, there aren’t many similarities. There isn’t even a template.php file anymore.

Info file: 

name: Bartik
type: theme
package: Custom
description: ‘Description of your theme’
engine: twig

#Optional. These stylesheets will not be loaded in this theme
stylesheets-remove:
  - core/modules/system/css/components/messages.theme.css
  - core/modules/system/css/components/menu.theme.css

libraries:
  - theme_name/global-styling

regions:
  header: Header
  primary_menu: 'Primary menu'
  secondary_menu: 'Secondary menu'
  page_top: 'Page top'
  page_bottom: 'Page bottom'
  highlighted: Highlighted
  featured_top: 'Featured top'
  breadcrumb: Breadcrumb
  content: Content
  sidebar_first: 'Sidebar first'
  sidebar_second: 'Sidebar second'
  featured_bottom_first: 'Featured bottom first'
  featured_bottom_second: 'Featured bottom second'
  featured_bottom_third: 'Featured bottom third'
  footer_first: 'Footer first'
  footer_second: 'Footer second'
  footer_third: 'Footer third'
  footer_fourth: 'Footer fourth'
  footer_fifth: 'Footer fifth'

No more .info files. They have been replaced with Twig and Yaml (.yml) files. The syntax is easy and readable, but make sure to check out a few examples as there are conventions you need to follow.

The folder structure is more or less the same, except for the schema. The schema is a yaml file in the config/schema folder. 

 /theme_name
   /color
   /config
     /schema
  /css
  /images
  /templates
  theme_name.info.yml
  theme_name.libraries.yml
  theme_name.theme

The .theme file is the replacement for the template file. Drupal 8 has .module for modules and .theme for themes. So if you want to add a library, you have to add it in the .theme file.

Adding a library is no longer via drupal_add_js or drupal_add_css. You have to create a library file like “theme_name.libraries.yml” like this: 

global-scripts:
  version: 1.x
  js:
    js/vendor/modernizr.js: {}
    js/scripts.js: {}
  dependencies:
    - core/jquery
    - core/drupal.ajax
    - core/drupal
    - core/drupalSettings
    - core/jquery.once

global-styling:
  version: 1.x
  css: 
    theme:
      css/styles.css: {}
      css/print.css: { media: print }

And then add the library in .theme. 

#adding a library

Alternatively, you can also attach the library in the twig template file,


{{ attach_library(theme_name/global-scripts') }}

Regions in Drupal haven’t changed. They are similar and self-explanatory. Default theme settings are also as before.

Breakpoints are included in the core itself. Breakpoints should be in YAML format. In Drupal 7, the breakpoint module allows you to define breakpoints and multipliers in the .info file. In Drupal 8, it should be defined in the theme_name.breakpoints.yml:

theme_name.small-width:
  label: small
  mediaQuery: '(min-width: 0px)'
  weight: 2
  multipliers:
    - 1x
theme_name.medium-width:
  label: medium
  mediaQuery: 'all and (min-width: 400px) and (max-width: 800px)'
  weight: 1
  multipliers:
    - 1x
theme_name.large-width:
  label: large
  mediaQuery: 'all and (min-width: 1000px)'
  weight: 0
  multipliers:
    - 1x

Look here for more details on breakpoints.

The most important part is twig templating. The syntax is quite different from the earlier php templating syntax and also much simpler. Here are a few conversion examples from php templating to twig templating. 

 	 	 	


  

    Function
    PHP template		
    Twig
  

  

    Naming Conventions
    html.tpl.php  

page.html.twig   

node--[content-type].tpl.php				
    html.html.twig

page.tpl.php

node--[content-type].html.twig		
  

  

    Variable (set)
     $tags = $content->tags; 		
    {% set tags = content.tags %}
  

  

    Variable (print)
     print $tags; 		
    {{ tags }}
  

  

    Conditional Statements
    if ($content->tags): 
endif;				
    {% if content.tags %}
{% endif %}		
  

  

    
    if (!empty($content->tags)): 
endif;				
    {% if content.tags %}
{% endif %}		
  

  

    
    if (isset($content->tags)): 
endif;				
    {% if content.tags is defined %}
{% endif %}		
  

  

    
    if ($count > 0): 
endif;				
    {% if count > 0 %}
{% endif %}		
  

  

    Filters
    print check_plain($something); 		
    {{ something|striptags }}
  

  

    
    print t('Home'); 		
    {{ 'Home'|t }}

These are the major things you need to know to migrate your theme to Drupal 8. Get in touch with us for more information on our Drupal development services and to know more on Drupal theming.

 

 

Related Topics