Work with Drupal Themes and Front-End

Work with Drupal Themes and Front-End

Guides > Work with Drupal Themes and Front-End

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.

Want to jump ahead? Here’s a list of the sections in this document:

Meet some Drupal front-end developers

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

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 definitely want to work your way through our exam guide.

Background and prerequisites

Themers are expected to be masters of HTML and CSS. Experience with JavaScript is often important. To fully understand and edit template files, the foundation of a Drupal theme, you'll also need to know some basic PHP, and concepts in programming such as variables and conditional statements. For Drupal 8, you will need to understand the YAML syntax that is used for various information in a theme.

Free
13m57s  //  Theming, Drupal 7

Essential lessons

Themers are expected to know how to convert static design files into working Drupal themes. The core tasks you’ll work on as a themer are:

  • Add regions to a theme
  • Apply CSS to a theme
  • Integrate JavaScript into a theme
  • Override, edit, or create template files in a theme
  • Theming forms
  • Manipulating variables

Drupal 8

Drupal 7

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.

Advanced concepts

Once you’ve mastered the basics of creating a new theme, you will want to learn about the advanced concepts necessary to truly make your Drupal site look the way you want it to.

Use the Drupal Console command-line interface to generate boilerplate code to scaffold a Drupal 8 theme, complete with code comments and theming functions from the Examples module.

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 and front-end.

Podcasts

The following Drupalize.Me podcasts may also be of interest to themers.

Conference sessions

DrupalCon sessions 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. The videos are also embedded on the session description pages for each DrupalCon, so you can browse developer tracks on the DrupalCon website and find session recordings to watch after the Con.

  • DrupalCon — Find links to past and future DrupalCons and session recordings.

Events

Drupal camps, sprints, user groups are great way to connect with other Drupal developers and learn new things.