How to Create a Drupal Sub-Theme and When to Use It?


Drupal is a powerful and flexible CMS. There are many great features of Drupal, like highly scalable, enterprise-level security, and developers friendly. That being said, theming in Drupal is not easy (compared to CMS like WordPress).

In this article, we are not going to talk about Drupal theming as it’s a large topic on its own that cannot be covered in a single article. For that, visit the official site for Drupal theming. Instead, we will discuss sub-theming, a powerful way to create a new theme from an existing theme.

What is sub-theme?

A subtheme is a theme created from the existing theme. It uses all the resources (css, js etc.) of the existing theme (parent theme), and depending upon your requirements, you can add additional functionality to it.

For example: Suppose, you liked the Bartik theme (which is the default theme in both Drupal 7 and Drupal 8). However, you want to change the background color and font-family only, you can accomplish this task easily by creating a subtheme in few minutes.

How to create a subtheme in Drupal 8?

Creating a subtheme is easy. We will create a subtheme from the Bartik theme in this article.

  • In Drupal 8, all non-core theme should reside inside the /theme folder. Create a folder inside it and give it a name. It will be the name of our sub-theme. Let’s name it codex for now.
  • Inside the codex folder, create codex.info.yml file. If you used different name, create yourthemename.info.yml file.
  • To create a Bartik subtheme, copy the following code in codex.info.yml file and save it.
    name: codex 
    type: theme
    description: Codex theme, a  sub-theme of Bartik
    base theme: bartik
    core: '8.x'
    
    libraries:
      - codex/codex-styling
    
    ckeditor_stylesheets:
      - css/base/elements.css
      - css/components/captions.css
      - css/components/table.css
      - css/components/text-formatted.css
    
    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'
    
  • Create codex.libraries.yml file on the same folder where .info.yml file is located. And paste the following code:
    codex-styling:
    css:
        theme:
          style/test.css: {}
    

    This is essentially telling Drupal to use test.css file. The file should be located inside style folder which should be inside the codex folder we previously created.
    Similarly, we can add additional JavaScript files to our sub-theme.

  • Now, create the test.css file in the location as indicated above (/themes/codex/style/test.css). Here, you can write CSS to override CSS of the Bartik theme. For now, paste the following code in test.css file and save it.
    body {
        font: 18px Tahoma, sans-serif;
        color: white
    }
    .content {
        background: black;
    }
    

That’s all. You have created a Drupal sub-theme. To enable it, login to your website, go to Appearance, scroll down to Uninstall section and click Install and set as default of codex theme.

drupal-sub-theme-tutorial-install-default-codex-codexworld

Note: Regions mentioned in .info.yml file in our sub-theme comes from the bratik.info.yml file of the Bartik theme. You can easily add or remove regions in your sub-theme depending upon your needs.

The process of creating sub-theme in Drupal 7 is also similar. The only notable difference is that Drupal 7 uses .info instead of .info.yml.

When to use a sub-theme in Drupal?

When you need to make changes to the contributed theme
You found a contributed Drupal theme that almost suits your site and installed it. You want to change a few things to make it perfect for your site. You went to the theme CSS file and modified it.
For now, it works fine. But, the problem arises when the parent theme requires a new update. Suppose, there is a security update for the theme. You need to update it to make your website secure. However, updating the theme will remove all the changes you made.
So, it’s always better to create a sub-theme in such cases. When you create a subtheme, your changes will not be modified even when the parent theme is modified.

You need difference in design for two different pages or content type
There are a few notable differences: They have different menus. The Learn Python page also has a secondary menu on the top-right corner. And, the body of Learn Python page is dark blue and they have a different logo. Except that, everything is similar.
What I did was created a subtheme for Python page from the Ultimate theme (which is the parent theme used in all other pages expect articles related to Python). The subtheme has an additional CSS file with less than 100 lines of code.

Then, I used themekey module to use Ultimate Python theme (subtheme) instead of the Ultimate theme (parent theme) when the node type is python or python example.

drupal-sub-theme-tutorial-themekey-codexworld

Now, when I need to make changes specific to Python pages, I only need to change Ultimate Python theme (sub-theme).
I’m planning to create different themes for C, C++, and R as well with Ultimate as the parent theme.
Also, if you are using Drupal multi-site and want to use a different theme for different sites with small changes, sub-theming can make your task much much easier.
I hope this article has provided you enough to dig deeper into the sub-theming world of Drupal and encouraged you to try sub-theming.

Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request

Article Written By Ranjit Bhatta
Ranjit is an entrepreneur and co-founder of Programiz, a programming site for beginners. He enjoys teaching Python and C++ through his website, occasionally sharing his thoughts and knowledge through guest blog posts.

Recommended Tutorials For You

1 Comment

  1. Rajiv Said...

Leave a reply