Create a custom theme in a simple way in Drupal 9

Drupal 9's core frontend theme is Bartik. Additionally, six backend themes are available. There is no doubt that they are great and versatile. Nevertheless, custom theme development is for you if you want your website to stand out from the rest. How to create a custom theme simply in Drupal 9? Our blog contains the answers you need to do this, so keep reading.

Why Drupal 9 for custom theme development?

Drupal 9 is extremely flexible in composing different elements and creating the best user digital experience. In a word, you or the development team will be able to implement any vision of your site with maximum accuracy on Drupal. Now let's highlight the advantages and disadvantages of developing custom themes.

Pros of custom theme development

1. Quick load

A custom theme is often much faster than a regular free theme. The theme's responsiveness reduces the loading time of the site as a whole and has a positive effect on SEO positions.

2. High security

It is more secure to use custom themes. The custom theme contains only secure code, making it impossible for the information to leak or any vulnerability.

3. Flexibility

Themes designed specifically for you are highly flexible, making it easy to update and change if necessary.

Cons of custom theme development

Cost

A custom theme requires investment compared to a free one. The cost of creating is not as high as many people think, but still not free.

Step-by-step guide on how to build a Drupal 9 theme

Let's take a look at the Drupal 9 custom theme creation. Defining it in your-theme-name.info.yml is the most critical part of this process. This file contains all metadata, libraries, block regions, and other necessary information.

Step #1. Give a name to the future custom theme

Name your theme. So as not to repeat existing names, it is recommended to use still-unknown names. For convenience, keep names short, no more than 50 characters.

Step #2. Create your own theme in the folder

Next, we created a theme in the `web/themes/custom` folder. We'll name the folder as our theme is called.

Step #3. Create the info.yml file

Then create an info.yml file. Your info.yml file will contain the primary key values. Your code should look something like this:

1
2
3
4
5

name: Custom Theme
type: theme
description: 'Custom Theme for My Website.'
package: Other
core_version_requirement: ^9

Step #4. Create a libraries.yml file

The next step is to create a libraries.yml file to specify and place the libraries you need for your site to function correctly. There will be CSS and JS. We name the library glo-libraries.

1
2
3
4
5
6
7

glo-libraties:
version: 1.x
js:
  js/script.js: {}
css:
theme:
  css/style.css: {}

Step #5. Link libraries.yml file with the new theme

We're almost halfway there, don't give up. Now that we've created the libraries.yml file, we need to link it to our theme. To implement this, we add it to the info.yml file.

1
2

libraries:
- custom_theme/glo-libraties

Step #6. Inherit the Base Theme

A base theme allows you to choose whether to create an entirely new theme or a subtheme that inherits the resources of an existing theme. Inheriting the Drupal core theme is the next and mandatory step. As a result, info.yml will contain the base theme's key.

1

base theme: classy

Step #7. Set the "regions" for the new theme

The next logical step is to define regions for the theme. All details should be listed under the "regions" key. In the default configuration, the "regions" are already set. All changes you make to these settings will be your responsibility. *Branding here is a region identifier. The branding here is the name of the region.*

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

regions:
branding: Branding
navigation: Main navigation
search: Search
featured: Featured
content: Content
right_sidebar: Right sidebar
footer_first: Footer First
footer_second: Footer Second
footer_third: Footer Third
footer_bottom: Footer Bottom

Step #8. Override page.html.twig

You must include new region settings on the page.html.twig file if you have set up regions for your theme.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<header aria-label="Site header" class="header" id="header" role="banner">
    {{ page.branding }}
    {{ page.navigation }}
    {{ page.search }}
</header>
<section class="featured" id="featured" role="complementary">
  {{ page.featured }}
</section>
<section class="main" id="main">
  <main aria-label="Site main content" class="content" id="content" role="main">
    {{ page.content }}
  </main>
  <aside class="right--sidebar" id="sidebar" role="complementary">
    {{ page.right_sidebar }}
  </aside>
</section>
<footer aria-label="Site footer" class="footer" id="footer" role="contentinfo">
  <div class="footer--top">
    {{ page.footer_first }}
    {{ page.footer_second }}
    {{ page.footer_third }}
  </div>
  <div class="footer--bottom">
      {{ page.footer_bottom }}
  </div>
</footer>

Now we've rendered our new regions on the page.

Step #9. Find your custom theme in the Uninstalled themes section

To see the result of your actions, i.e., your custom theme, go to the Uninstalled themes section. Click the "Install and set as default" button to install it. Then go to the "Block layout" section. You will find the option "Demonstrate block regions (Custom Theme)." Follow this link to see all of the themes's regions.

Step #10. Add CSS

Finally, we got to the last step. You should apply CSS styles for each region based on your design. style.css should include CSS according to your requirements.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

.header{
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.header.region {
  padding: 5px;
}

.header.region-branding {
  flex: 0 1 20%;
}

.header.region-navigation {
  flex: 0 1 50%;
}

.header.region-search {
  flex: 0 1 30%;
}

.region.block-region {
  padding: 15px;
}

.featured{
  padding: 40px 20px;
  background-color: indianred;
}

.main{
  padding: 50px 0;
  display: flex;
  justify-content: space-between;
}

.main.content {
  flex: 0 1 65%;
}

.main.right--sidebar {
  flex: 0 1 30%;
}

.footer--top {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.footer--top .region {
  padding: 5px;
}

.region-footer-first, .region-footer-second, .region-footer-third {
  flex: 0 1 30%;
}

The Drupal 9 custom theme is ready!

Create your custom theme today

Creating your own theme in Drupal 9 is a difficult path, but worth all the effort. A ready-made theme is easier to use than a custom one. However, custom theme development allows your organization to tailor themes specifically to its requirements. We hope this mini-guide helps you get started developing Drupal 9 themes for your company. Or you can let the Meant4 team handle it! Drop us a line here.

Written by:

Oleksandr Bazyliuk

Senior PHP Developer

Oleksandr Bazyliuk, a real Drupal ninja with over 10 of experience as a Senior PHP Developer. Specializing in all Drupal versions, Oleksandr seamlessly integrates custom modules and themes, wielding PHP with precision to craft dynamic and high-performance web applications. His code is a work of art, reflecting a commitment to excellence and a knack for solving complex technical challenges

Oleksandr Bazyliuk, a real Drupal ninja with over 10 of experience as a Senior PHP Developer. Specializing in all Drupal versions, Oleksandr seamlessly integrates custom modules and themes, wielding PHP with precision to craft dynamic and high-performance web applications. His code is a work of art, reflecting a commitment to excellence and a knack for solving complex technical challenges