How to Create a Bartik Subtheme in Drupal 8

Subthemes inherit the theme resources of their parent theme. If you want to build your site with Bartik, which is the default theme in a Drupal installation, you will have to create a subtheme. That way, you can make CSS, JS or template overrides to the subtheme, without having to worry about losing those changes when the parent theme gets updated.

Keep reading to learn how!

Step #1.- Create the Basic File Structure

In order to create a subtheme in Drupal, you only need 2 files:

my_subtheme.info.yml

my_subtheme_libraries.yml

These files have to be placed in a folder called my_subtheme inside the themes directory of your Drupal installation.

You have 2 possibilities here:

/themes/my_subtheme/

/themes/custom/my_subtheme

Drupal will locate the theme anyway.

• Create a folder called bartikssen inside the themes folder of your Drupal installation.
• Create 2 empty files inside this directory called:
  • bartikssen.info.yml
  • bartikssen.libraries.yml

The only thing you need to know about .yml (YAML) files now is that they are cool because they are easy to understand and can be used to represent and map data.

Step #2.- Theme Inheritance

As you already know, the advantage of a subtheme is basically that you can use all features of a fully-fledged theme (coded for free by some nice person or persons) and customize it to your liking with your own CSS, JS, or template tweaks.

• Open themes/bartikssen/bartikssen.info.yml in your preferred code editor.
• Open core/bartik/bartik.info.yml.
• Select the content of lines 14-47 of bartik.info.yml (Drupal version 8.8.5).
• Copy and paste it inside bartikssen.info.yml
• Close bartik.info.yml

• Select lines 10-14 (ckeditor_stylesheets) and delete them.
• Select line 5 (package) and delete it.
• Uncomment the line ‘version’
• Change the values according to the image below.
• Save bartikssen.info.yml

Something to note here is that you could have let all regions out of this file and Drupal would have assigned its default system regions. Now you can work with all Bartik regions in your own theme, you can delete some of the regions and only work with the remaining ones, or you can even add more regions to your own theme than the ones available in Bartik (the regions in Bartik are more than enough, to be honest).

Notice also that Bartikssen’s base theme is Bartik, whereas Bartik’s base theme is Classy. That means that Bartikssen is a subtheme of a subtheme.

As you can see, you have declared a library called global-styling within the info.yml file. This library has to be included in the libraries’ file.

• Open bartikssen.libraries.yml
• Copy and paste this code:

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
  js:
    js/script.js: {}

Keep in mind that indentation is one key aspect in .yml files, so preserve it as is like shown in the example code.

Step #3.- CSS and JavaScript Code

We still have to create the folder and file structure for the CSS and JavaScript code.

• Create a folder called css and place an empty file called style.css inside it.
• Create a folder called js and place an empty file called script.js inside it.

Step #4.- Enable the Subtheme

• Click Appearance
• Scroll down and look for Bartikssen.
• Click Install and set as default.

• Click the Settings tab.
• Select the Bartikssen tab on the second level.
• Upload a logo image.
• Click Save configuration.

Step #5.- Adding CSS Styles

• Open style.css.
• Copy and paste this code:

body {
    font-family: sans-serif;
    color: #616161;
}

h1 {
  color: #616161;
}

#header,
.sidebar {
    background-color: darkslategray;
    background-image: none;
}

• Save the file.
• Click Configuration > Performance.
• Click Clear all caches.
• Go to the Home of your site.

Congratulations! You have created a subtheme of Bartik. With this same logic, you could create 2 subthemes of Batikssen called Bartikgrandssen_1 and Bartikgrandssen_2 and customize each one to your personal liking. That is the well-known flexibility of Drupal.

By the way, the same process applies to create a subtheme of any other theme in Drupal. To know more about subthemes in Drupal check here.

If you want to read more about Drupal’s default regions, in case you don’t define them in the .info file, take a look at this page.

I hope you liked this tutorial. Thanks for reading!

Check out my other blog on How to Integrate a Sliding Menu.