As the impact of information technologies on everyday life grows, most anybody may have the need to create a dedicated website. A CMS (Content Management System) is the most common choice for those who do not have much experience but still want to create their very own personalized website.
Drupal is an example of a free modular CMS that is written in PHP. It is a back-end framework used by almost 2% of all sites in the world, which makes up about 26 million online resources. It holds third place in usual CMS 'top' lists, and a lot of people wonder how to create a custom Drupal theme due to its prevalence and simplicity.
Drupal can work with any popular OS: MacOS, Linux, and Windows. This makes it a universal content management system for any developer. This CMS can help you in creating a blog or forum or conducting surveys, and it provides the ability to keep records of site attendance and a lot of other useful functions any site owner can use.
Drupal was founded in 2000 by Dries Buytaert. A few students from Antwerp University were using a common ADSL-modem for Internet access, and Dries decided to create a site for them. The program used for this site had no name until Dries registered a domain name and misspelled the Dutch word “dorp” (a village). As a result, the site was named drop.org. Later, Dries released the source code of drop.org and named it “Drupal".
The most current stable release at the time of this writing is version 8.6.4 (December 2018). Nowadays, Drupal supports versions 7 and 8, but in our article, we are going to describe the creation of a custom theme using Drupal 8. If you want to create a Drupal theme from scratch, consider using the latest version of the software to keep your site up-to-date.
What Skills Do I Need For Drupal 8 Theme Development?
As we have already mentioned, there are differences between Drupal versions 7 and 8. If you have worked with Drupal 7 before, it may be easier for you to understand the details of Drupal development solutions. However, we expect those who want to create their own theme to be familiar with certain aspects of Drupal. You do not need to be a web design guru to build a Drupal theme, but you should have some knowledge of HTML and CSS. This will make it easier for you to work with Drupal.
It would also be good for you to read about some of the differences between Drupal 7 and Drupal 8, as well as do some research on Drupal in general. This can be done on their official website.
How Should I Begin Working with Drupal?
Firstly, you should download it from the official website. You need to download the core, which is packed in an archive. It is necessary to mention that for the operation of this CMS, you will need a web server, PHP interpreter, and MySQL server. There is no need to download and configure all of these components on your own: you can use readymade software products that include all of the necessary elements (OpenServer, Denver, etc.)
The next step is to create a database, which will be used to store your content. A tool to help you do that is usually featured by the software products we have mentioned. The final step is the installation of Drupal itself. There are some consequent phases of this process which are fully described in the installation wizard.
You can also find a full description of the installation process on the Drupal website. There is useful information on database configuration and many other helpful tips for beginning work on the product.
Theme Folder Structure & Files
In this part of the article, we are going to define some critical descriptions of what can be found in the Drupal 8 structure.
The most important file is .info.yml. It can be found in the root of any theme. This file provides you with information about what you are building - your theme in essence.
Other key files are .libraries.yml and .breakpoints.yml. The first defines your libraries and the latter fits various screen sizes. Files named .theme store the data before it becomes a part of the markup.
It is important to define where your CSS files lay. This should be done in the info and the library files using /css. The same must be done with JS files (/js). All of your markup info is placed in the /templates directory.
As soon as you have established your theme structure, make sure you know how you want your site to look. This is most important in making the development of a custom Drupal theme more comfortable for you.
Creating a Theme: Step by Step
Here are the practical phases of how to build your very own theme using Drupal.
Theme Folders
You should start in creating your Drupal 8 theme with a folder structure. Your core/theme may include a variety of sub-folders (JS, CSS, templates etc.). We have mentioned that the structure is the basis - be precise with it.
Info File
In the previous part of the article, .info.yml file was named the most important file. This is not an exaggeration, since the essential information for your project is stored there. The full file should include the following:
- name (required)
- description (recommended)
- version (optional)
- type (required)
- core (required)
- base theme (recommended)
- region (optional)
For instance, you can have your .info.yml file filled out like this:
name: Example
type: theme
description: “A simple theme created for training”
core: 8.x
regions:
headline: headline
header: header
content: content
footer: footer
The field “region” was filled with template elements, which can be different. This is done to define that you will use these regions in your theme.
Libraries
Now, you are going to create a file for libraries inside the main folder. Here, you should define all the JS and CSS files that you are going to use.
Stylesheets
In this step, we begin to customize your creation. As soon as you add the CSS and JS files you have already defined, you will be able to set the background color, font, margins of the theme parts you included in the “region” field, etc.
Design
For this step, you need to have experience in front-end development and web design. You can use some of the PHP template files, however, (.html.twig) and develop them to match your likings perfectly. You can also create a logo using logo.svg.
Enable Theme
If you want your creation to work, make sure you have enabled it. There are two ways of doing this. The first is going to /admin/appearance at the end of the URL of your site, and the second is to use Drush (a shell-based application that is used for work with Drupal sites).
If you choose the second option, update it to version 8 for correct work. Having updated and launched Drush, execute the following:
drush config-set system.theme default Example
Note you should replace the name “Example” used in this article with the title of your theme.
This is not a full-blown Drupal theme development tutorial though. If you need more exhaustive answers to any questions you may have on creating themes, you can find more tips on creating a theme online. These are illustrated with code samples, which will be useful for those who do not have much experience in coding.
How Can I Make a Theme without Coding?
Not all of us like coding since the process is rather monotonous and challenging. However, you might need a theme for your site even though you do not know how to build it. In this case, you can download ready-made solutions. There are more than 2,700 themes available for download on the Drupal website. You can choose the core, enter the search terms, and sort by different criteria to find something truly extraordinary.
Another way to get a theme is to ask professional developers to create the theme for your site. There are a lot of studios and companies that help people with Drupal 8 theme creation (and actually with other versions of Drupal as well). Sometimes you can place an order via the Internet and get your result in just a couple of days! The cost can vary from studio to studio, however, it is always better to pay for quality, especially if you are not sure how to do the job well.
Conclusion
There are over a billion websites in the Web, and almost half of them are using CMSs of some kind. It is a quick and easy way to have your site done in style, with all the necessary technologies and functions included. No matter what type of the CMS you choose, you can be sure that it is a reliable way to make your website work.
You can use Drupal to your benefit or master your skills and raise money by helping others with their web pages. Regardless, we hope that our article has helped you to understand that using a CMS is not as difficult as is sometimes described. There is no need to be a professional coder with years of experience - anyone can create a site by following the necessary steps and using simple and accessible software.
We wish you good luck on your path of website development!
