Guides > Theme Drupal Sites

Overview

A themer, also known as a front-end developer, sits between the designer and the developer on a project. They're responsible for the architecture and implementation of the client-facing parts of a web site. This includes working with HTML, CSS, JavaScript, and related technologies. Drupal themers also use some PHP in template files, and in Drupal 8, they use Twig. Advanced front-end developers will often create "glue code" modules, or functions in PHP that expose configuration options to site builders. Glue code modules also alter the data stored in Drupal before it's presented to a site visitor in the browser.

What will you learn

  • Override and customize template files
  • Implement layouts and regions
  • Use Twig to create dynamic templates
  • Add CSS and JavaScript libraries
  • Set up your site for theme development
  • Create responsive image styles

Drupal 8

Background and prerequisites

Essential lessons

Introduction

Theme settings

Theme inheritance

Template files

Development and debugging

Theme hook suggestions

CSS and JavaScript assets

JavaScript in Drupal

Advanced concepts

React and Drupal

Variable and string manipulation

JavaScript libraries in core

Best practice: Drupal translation

Best practice: Coding standards

Responsive design and image styles

Layouts

In Drupal, the layout of a site is a shared responsibility between a site builder and a themer. Themers are often forced to decide between hard-coding a layout into a template file or using configuration to achieve the results instead. Understanding what tools are available, and what they are capable of, helps when it comes time to make these decisions.

Navigation and lists

Drupal allows us to create static menus and dynamic lists of content using Views. The creation of menus is often completed by the site builder, but there are implications for you as a themer. You should understand where the items in a list come from, how to add new ones, and how to accommodate the fact that the number of items may vary over time.

Images and media

Drupal core can manipulate images (called "image styles") and allow file uploads that can be displayed in various ways. As a themer, you may need to customize how these images and other assets are displayed on-screen, so you may want to familiarize yourself with media management techniques in Drupal.

Learn command line tools

Drupal 7

Background and prerequisites

Layouts

In Drupal, the layout of a site is a shared responsibility between a site builder and a themer. Themers are often forced to decide between hard-coding a layout into a template file or using configuration to achieve the results instead. Understanding what tools are available, and what they are capable of, helps when it comes time to make these decisions.

Navigation and lists

Drupal allows us to create static menus and dynamic lists of content using Views. The creation of menus is often completed by the site builder, but there are implications for you as a themer. You should understand where the items in a list come from, how to add new ones, and how to accommodate the fact that the number of items may vary over time.

Images and media

Drupal core can manipulate images (called "image styles") and allow file uploads that can be displayed in various ways. As a themer, you may need to customize how these images and other assets are displayed on-screen, so you may want to familiarize yourself with media management techniques in Drupal.

Learn command line tools

Learning tips

  • There's a lot to learn, and a lot of the best information is spread out across Drupal.org and various other websites, books, and podcasts. As you're climbing the ladder, and become more proficient with Drupal, you will need to learn to differentiate between knowledge that's specific to creating a Drupal theme, and knowledge that's more general to HTML/CSS/JavaScript. Knowing the difference will help you locate appropriate resources.
  • If you are interested in taking the Acquia Certified Front-end Developer Exam, you will also want to work your way through our exam guide.
  • There are many modules that afford the opportunity to configure markup or add CSS classes, including modules for creating layouts, lists, and other display controls. It's a good idea to become familiar with how these modules can be configured so that you can either configure them yourself to your liking or effectively communicate with a site building team member. You may want to work through our guide for site builders as well to broaden your skillset and to gain a more comprehensive knowledge of how Drupal works.

Broaden your skills

There are many ways to grow your skills and knowledge outside of tutorials. Here are some of our favorite resources for exploring Drupal theming.

Contribute to the Drupal project

Although not a requirement, many Drupal developers also enjoy being active members of the Drupal community and contributing their solutions back to Drupal.org in the form of a contributed theme or by helping to resolve bugs in the themes they use -- even in Drupal core themes.

Podcasts

The following episodes of the former Drupalize.Me podcast may also be of interest to themers:

Community Events

DrupalCon sessions and other local/regional events are a great way to get up to speed on the latest in Drupal development. All DrupalCon sessions are recorded and are available for free on the Drupal Association's YouTube channel. Many Drupal "Camps" (local or regional Drupal community events) also record sessions. For DrupalCon and many other Drupal events, the recorded sessions are embedded on the session description pages on the event's website.

Meet some themers

Get to know some people who work with Drupal front-end and themes every day:

Testimonials

Back to top

"Drupalize.Me has trained thousands of Drupalistas. Their video lessons help to address our constant need for more Drupal talent. Drupal needs training like this to support its growth."

Dries Buytaert
Drupal Founder and Project Lead
Roger Carr

"They’re easy to understand. They’re thorough. They’re funny. They’re always entertaining, and it makes it easy to learn parts of Drupal and how you can integrate it into your workflow and learn more and have a good time doing it."

Roger Carr
Drupalize.Me Member
Roger Carr

FAQs

Back to top

Am I required to sign a contract?

No. You can purchase a membership and/or cancel any time. Drupalize.Me is a pay-as-you-go service.

Can I preview tutorials before joining?

Yes! Just navigate to our tutorial library. Our free tutorials are labeled with a green "FREE" tag.

Can I watch videos on my mobile device?

Yes! Drupalize.Me is a responsive site and can be accessed in the browser on any mobile device.