Disable Drupal Cache and Debug Twig Templates – Drupal Theming Tutorial part 2

by Hamza Zia  March 20, 2017

In the last part of my Drupal 8 theme development tutorial, I highlighted the basic files and folders that are required for getting a theme recognized by the Drupal core. I also took a look at how to include CSS and Javascript libraries to the theme files.

Drupal-8-Theme-Development-Banner-2

In this part, I will discuss the very important topic of Twig debugging and how to disable the Drupal cache. These steps are essential for the Drupal theme development process because these steps remove the hassle of having to clear the cache every time a change is made to the theme.

Note: These steps are for development environment only. Make sure that you disable the settings made in this tutorial before taking your website or theme live!

The steps discussed in this tutorial are:

  1. Copy page.html.twig.
  2. Copy and rename example.settings.local.php.
  3. Changes in the settings.local.php.
  4. Changes in the settings.php.
  5. Remove error(s).
  6. Edit development.services.yml.
  7. Clear the cache.

Copy page.html.twig

First, navigate to the Drupal website’s folder core/modules/templates. Once there, copy the file named page.html.twig to the theme folder created in the first part of this tutorial series. This file will serve as the default template that Drupal will use.

In this file you will see a section {{page.content}}. This contains all the content that your Drupal website displays by default. Hence, this is where you will add any content you wish to display on your website.

Once you have successfully added the content, you will see that no change takes place upon refreshing the main page of the website. Drupal’s cache is mainly responsible for this issue. To resolve this problem, go to the configuration in the Drupal’s Admin Menu >> Performance and clear the cache. After this, refresh the page again and you will see your intended changes. Remember that this problem will reoccur after making any changes to the website’s content. To workaround this issue, you need to disable the cache in the following steps.

Copy and Rename example.settings.local.php

Now go to the Drupal’s root folder and navigate to the sites folder. In this folder, you will see a file name example.settings.local.php. Copy this file and paste it in the sites/default folder. After that, rename the file to settings.local.php. Remember that you should not alter the original files. This is often the main reason behind mysterious and hard-to-debug errors. Always remember to make a copy of the files and then alter the contents.

Changes in the settings.local.php

Once done with the previous step, open the file you renamed and find the commented out line ‘$settings [‘cache’] [‘bins’] [‘render’] = ‘cache.backend.null’;. Uncomment this line, and save the changes.

Changes in the settings.local.php

Changes in the settings.php

Now navigate to the folder sites/default/files. Here, you will find a file named settings.php. Edit this file in your preferred code editor and go to the very bottom of the file. Here you will see two commented out lines:

Changes in the settings.php

Uncomment these lines and save the changes.

Remove the Errors

Now go to your website and refresh the page. If you encounter any errors, then just type the following URL in your browser and press Enter: ‘yoursite/core/rebuild.php’ where ‘yoursite’ is the name of your website.

Changes in the development.services.yml

I will now discuss how you can enable Twig debugging. This is a very useful feature in Drupal 8 that allows theme developers to check which markups come from what template files. Enabling the Twig debugging is a fairly simple and straight-forwards task. Here is how you could do it:

Go to the folder sites/default in the Drupal website. Here you will see a file named ‘development.services.yml’. Open this file in a code or text editor. Add the highlighted lines at the end of the file:

Changes in the development.services.yml

Clear the Cache

Now go to your Drupal website and clear the cache. This is the last time you will have to do this.

Conclusion

That’s it! You have successfully disabled Drupal’s cache and enabled Twig Debugging. In doing so you have made the theme development process a lot easier. If you have any questions, then leave a comment below and I’ll be happy to help you. Till the next time, Adios!

Update: You can check out the next part of this series here.

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About Hamza Zia

Hamza is a Drupal Community Manager at Cloudways - A Managed Drupal Hosting Platform. He loves to write about Drupal and related topics. During his free time, he can be seen obsessing over Football, Cars, Android and Gaming.

Stay Connected:

You Might Also Like...