Drupal themes play a pivotal role in shaping the visual experience and functionality of a website built on the Drupal Content Management System. They are basically a collection of files, including HTML templates, CSS style sheets, JavaScript files, and other assets, which collectively form the presentation layer of the website. These files define the overall look, feel, and layout, acting as the artistic framework that brings your site to life.

With the release of Drupal 10, the theming system has undergone significant improvements, providing developers with a more streamlined and efficient workflow. One of the standout features of Drupal 10 is its ability to create custom themes, empowering website owners to align their online presence with their unique branding and user experience requirements. This blog provides a step-by-step tutorial on implementing custom themes in Drupal. Before diving in, let's explore the different types of theming approaches available in the system.

Drupal theming types

Drupal CMS offers various types of theming options. You can choose the best approach from these to create a visually stunning and user-friendly website that perfectly fits your project's needs:.

• Default themes: Drupal provides a default theme called Olivero, available in both Drupal 9 and Drupal 10. Olivero theme offers a quick and effortless way to launch a website with Drupal. It is designed to be responsive, ensuring that your site looks great on various devices, including mobile and iPad.
• Contributed themes: Drupal.org offers a wide range of freely downloadable themes contributed by the Drupal community. These themes are built with a responsive design approach, prioritizing mobile devices, and can be customized extensively to suit your needs. Examples are Barrio Bootstrap 5 Theme and Zero Point.
• Third-party paid themes: You can also find third-party themes available for purchase from platforms like ThemeForest, Envato, and TemplateMonster. These themes usually offer a high level of flexibility and provide different template options to choose from, allowing you to create a unique website.
• Drupal custom theme development: For complete control and the ability to bring your specific vision to life, custom theme development is the way to go. With this approach, you can build a theme from scratch or customize an existing theme to meet your specific requirements. This approach ensures that your website's design is fully customized and aligns perfectly with your brand and goals. Here are the benefits of custom theming:

System requirements for custom theming

To ensure a successful custom theming experience in Drupal, it is essential to understand the minimum and recommended specifications to install, operate, and utilize the theme effectively. Here are the key considerations:

• Supported browsers: Drupal supports various browsers, including Google Chrome, Firefox, Safari, Microsoft Edge, and Opera.
• Database server requirements: Drupal supports multiple database management systems, such as MySQL, MariaDB, Percona Server (recommended), PostgreSQL, SQLite, Microsoft SQL Server, and MongoDB.
• Web server requirements: Drupal 8 and the later versions can run on any web server that meets the PHP version's requirements. Common web servers used with Drupal include Apache, Nginx, and Microsoft IIS.
• PHP requirements: For Drupal 10, a minimum PHP version of 8.1 is required, and PHP 8.1.6 is recommended.

Steps for custom theme development in Drupal 10

Follow these steps to establish a solid foundation for personalizing your website's look and feel while ensuring a seamless user experience.

Step 1: Setup Drupal 10.0.7

If not already installed, begin by downloading Drupal 10.0.7 and follow the installation instructions to set up the CMS on your laptop or PC. Visit this URL:

https://www.drupal.org/project/drupal/releases/10.0.7 to download the Drupal setup using ‘Compose’ or ‘download the zip file’. To download using Composer, open the command prompt and write the command:

composer create-project drupal/recommended-project:10.0.7 "drupal1007"

Step 2: Create a custom theme folder

Navigate to the "themes" folder within the root directory of your Drupal project and create a new folder for your custom theme. Inside the "custom" folder, create another folder with a unique theme name. For example, we have taken "custom_theme".

Step 3: Define theme information

Inside your custom_theme folder, create a custom_theme.info.yml file. This file will contain metadata, libraries, block regions, and all other necessary information and settings for your theme.

Step 4: Enable and set as default

Log into the Drupal admin interface, flush the cache, go to "Appearance" in the admin menu, find your theme, and click "Install and set as default".

Step 5: Customize and style

Now that your custom theme is enabled, you can start customizing the visual appearance. To add styling (CSS & JS), create a custom_theme.libraries.yml file in your theme directory. Inside the file, define a library named "global-styling" for your theme. Create "CSS" and "JS" directories and link them to the custom_theme.libraries.yml file.

Step 6: Load the library

Now that you have created the custom_theme.libraries.yml file, link it to your custom theme to ensure that the styling and functionality associated with the library are applied to your custom theme. To implement this, add it to the custom_theme.info.yml file.

Step 7: Define regions

To organize and control the placement of various components and content within your Drupal website, look for the 'regions' key in the file. If it does not exist, create it. Under the 'regions' key, define the regions for your theme by specifying their names and corresponding labels. For example:

Step 8: Define page layout

To apply the layout to all pages of your Drupal website using your custom theme, create the page.html.twig file under the templates/system directory.

Step 9: Create the page

Now let us create a basic page and populate it with your desired content.

Log in to your Drupal admin interface. Go to "Content" and select "Basic page". Provide a title, add content, and customize the page settings. Finally, save or publish the page.

If you want more flexibility, create a custom block and assign it to a specific region instead of using the basic page. This will allow you to have dynamic and customized content in different regions of your Drupal theme.

Step 10: Apply CSS styles to regions

Open the style.css file and add specific CSS rules for each region. Target the regions using their respective classes or IDs and define the desired styles. Save the file to apply the styles and customize the appearance and layout of each region according to your design requirements.

Step 10: Test and iterate

Run your website on Localhost- http://localhost/drupal1007  to preview and test the custom theming changes you have made in your Drupal 10.0.7 installation. It will allow you to review the appearance and functionality of your theme before deploying it to a live server. Make necessary adjustments and iterate until you achieve your dream website.

Now that your website is ready, maximize its potential by optimizing speed, improving user experience, and increasing the overall efficiency with these guides:

• How to Optimize Your Site for Better Performance
• The Ultimate Drupal SEO Guide

Conclusion

Custom theming in Drupal 10 CMS opens a world of possibilities for website owners and developers. Whether you choose to use default themes, leverage contributed themes, opt for third-party paid themes, or embark on custom theme development, the key is to align your theme with your brand, engage your target audience, and provide an exceptional user experience.

To achieve the full potential of custom theming in Drupal, it is important to have a deep understanding of Drupal's theming system, best practices, and industry trends. If you are seeking expert assistance with custom theming and development, Altudo offers Drupal development and personalization services tailored to your business needs. Schedule a 1:1 no-obligation consultation with our expert team today.