Work with Drupal Themes and Front-End

Work with Drupal Themes and Front-End

This guide focuses on theming in Drupal 7, with Drupal 8 lessons highlighted with version information. This covers the skills you need to become a Drupal themer, working on the front-end of Drupal sites.

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

About themers

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.

Meet some Drupal front-end developers

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

Learn to be a Drupal themer

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, here are some things to keep in mind:

  • 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.

  • Our Favorite HTML and CSS Resources — Do you need to brush up on HTML or CSS? You’ll get the most out of our Drupal theming tutorials if you already have a good foundation with these basic web technologies. This list contains some of our favorite resources and references around the Internet related to HTML and CSS.
  • JavaScript Resources on MDN — The Mozilla Developer Network (MDN) provides reference and tutorial documentation for many web technologies. Check out their beginning, intermediate, and advanced JavaScript tutorials, a comprehensive JavaScript reference section, and links to web-based tools for writing and debugging JavaScript code.
  • Start with PHP for Themers, and then progress to PHP Fundamentals — You can do a lot in Drupal without learning PHP, and you can even do quite a bit of theming with just HTML, CSS, and JavaScript. But if you want to go beyond the basics, eventually you’re going to need to learn some PHP.
  • Coding Standards in Drupal — If you’re coding in Drupal, you will need to know and use Drupal’s coding standards and best practices. This video will get you up-to-speed on Drupal’s coding standards, and how to use them.

Core 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 novice 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
  • Create, install, and enable a theme

Tutorials in these series cover the main concepts you will use as a Drupal themer:

  • Drupal 8 Theming Guide (Drupal 8) — This is a comprehensive guide that covers the main skills and technologies for theming in Drupal 8, from the basics of what a theme is to working with Twig and JavaScript.
  • Theming Basics (Drupal 7) — Start here. Learn what a theme is, what role they fill, and all the essential skills for overriding Drupal’s default output. The information in these series will be assumed knowledge for almost everything else we talk about.
  • PSD to Theme (Drupal 7) — The strategies theme developers use to efficiently translate from design comps to Drupal theme. Learn to think like a themer.

Layouts

In Drupal, the layout of a site is a shared responsibility between a site builder and a themer. The following tutorials, while created for site builders, will also be useful to you as a themer. These lessons cover the layout of content (using Display Suite or Panels), and also site-wide layout (Panels). 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 modules are available and what they are capable of helps when it comes time to make these decisions.

  • Overview of the Popular Tools — This blog post, “Code-Free Layout Tools for Theming Drupal” gives a quick overview of the big players in this space. Start here if you’re unfamiliar with this group of modules and unsure of where to start.
  • Panels — One of the most popular, and most fully featured Drupal layout building tools allows you to take over individual regions or entire pages, and place anything from blocks, to individual fields attached to a content type into a layout. This is a must for anyone doing regular work with Drupal.
  • Display Suite — Display Suite is primarily focused on providing tools to work with reusable view modes for content types. If you’re doing anything with card based design or components, you’ll want to look at Display Suite.
  • Context, Features, and Beans — Learn to use Context for advanced placement of blocks into regions, and then export those placements into configuration using Features. A common pattern for creating re-usable or deployable layout based on Drupal’s block system.
  • Introduction to Omega 3.x — Omega is a base theme that provides a nice framework for creating a responsive theme, and extensive configuration options. If you’re just getting started with responsive design in Drupal, this may be a good starting point. Note: This series covers a previous version of Omega, but many of the same concepts will apply.

Navigation and lists

Drupal allows us to create static menus, and dynamic lists of content. The creation of menus is often completed by the site builder, but there are implications for you as a themer. Understanding 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.

  • Creating Menus — Menus are Drupal’s primary system for dealing with navigation.
  • Working with Secondary Menus — Understand how secondary menus work in Drupal, for example make them appear in the right column when someone navigates to a menu item in the main navigation.
  • Creating Listing Pages with Views — The Views module is the tool of choice for creating pages that list dynamic content, as a themer knowing how to use Views to modify the output of a list is important.
  • Introduction to Views — A complete overview of the Views module, how it works, and how to create various different types of lists of your Drupal site’s content, users, and other dynamic entities.

Images and media

Drupal generates images at different sizes for us. (These are called “image styles" in Drupal’s Configuration section.) As a themer, you may need to customize how these images are displayed on-screen. You may also want to familiarize yourself with media management techniques in Drupal.

Front-end technologies

A number of our tutorials assume you have done some prerequisite learning on a non-Drupal specific topic. Perhaps you’re a designer who’s learning front-end development. We help bring you up to speed with related technologies with the following learning series.

  • Sass and Compass — Using a CSS preprocessor is quickly becoming an industry best-practice. Learn to use the Sass CSS preprocessor to write CSS more efficiently.
  • Introduction to jQuery jQuery is the most popular JavaScript framework in the world, and it ships with Drupal core. So whether you’re building Drupal themes, or working on other projects, knowing how and when to use jQuery is an important skill.

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. Themers increasingly need to be able to work with programming languages, such as PHP and JavaScript. If you know that you don’t need to learn programming for your job, you can safely skip these lessons; however, you may need to return to them in the future if you want to dive into front-end development.

  • Advanced Theming — This series of video tutorials picks up where Theming Basics left off, introduces more Drupal-specific knowledge, covers conditional CSS, theming forms, and manipulation of variables via preprocess functions before they are presented to template files for display.
  • Introduction to Responsive Web Design in Drupal — An overview of the key components of responsive web design, how to apply them in the context of a Drupal theme. In this series, you will learn how to convert a pixel-based 960-grid-based-theme to a flexible, responsive theme. You will also learn utilize skills that use both site building and front-end development skills such as refactoring a slideshow using Views and contributed modules and external JavaScript libraries.
  • jQuery and JavaScript in Drupal — Everything you need to know about using jQuery and JavaScript in a Drupal theme (or module) and some tips for efficiency and common gotchas.
  • If you don’t have a background in PHP, start with PHP for Themers, and then progress to PHP Fundamentals — You can do a lot in Drupal without learning PHP, and you can even do quite a bit of theming with just HTML, CSS, and JavaScript. But if you want to go beyond the basics, eventually you’re going to need to learn some PHP.

Prepare for theming in Drupal 8

Almost every aspect of the theming layer has been touched in one way or another during the Drupal 8 development cycle. We think some of the important ones to learn about are:

  • How Drupal 8 makes the theme layer easier to understand
  • Changes to help make Drupal responsive and mobile friendly
  • The adoption of current best practices for HTML5, CSS, and JavaScript
  • The addition of a new template engine based on Twig

The tutorials and presentations here below will give you an overview of what's new in the theming layer of Drupal 8 as well as an introduction to tools, syntax, and concepts you will need to understand. If you want to dive straight in, you can go directly to the complete Drupal 8 Theming Guide.

  • What’s New in Drupal 8: Theming — After watching this presentation you should have a better understanding of the things you’ll need to learn in order to create themes in Drupal 8 and where you might need to brush up.
  • YAML — As a themer, you’ll need to know how to create, edit, and understand YAML syntax.
  • Twig — Twig template files have replace PHP template files as the primary templating language in Drupal 8. In this series, you will learn about Twig, in a framework-agnostic context.
  • Understand Responsive Web Design — Drupal 8 will ship with out-of-the-box mobile-friendly and responsive design features. Although this series focuses on a Drupal 7 theme refactoring exercise, you will learn concepts like responsive typography, flexible layouts, media queries, and breakpoints that you will help you understand these features in Drupal 8.

On the blog: Drupal 8 theming

During the Drupal 8 Beta phase, the Drupalize.Me team wrote blog posts about various topics in Drupal 8, including new features in the theming layer. The implementation particulars in these posts might have changed during Drupal 8 development, but many of the features and concepts persist.

This is just a selection of what we have on this topic. To get a full list of all tutorials categorized as “theming”, please use our tutorial library page. You may also want to explore videos categorized as “site building” for additional topics which are configured in the administrative interface, and which affect how things are displayed on the rendered page.

Broaden your skills

To become a great Drupal themer, find various sources of information, communities, and events to broaden your skills, find the right job, and meet others on a similar journey. Here is a sampling of some podcasts, events, and blog posts to help you dive deeper, and support you on your way to mastery.

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, present, 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.

Blog posts