Like most output in Drupal, Views relies on Twig templates for a significant amount of its rendering. In this tutorial we'll identify where you can find the default Views templates within your file system, what the common templates are for, and how to name your templates so that they are applied to specific views.
By the end of this tutorial, you should be able to:
- Identify where to find default views templates
- Understand which templates apply to what part of a view
- Get a sense of the template suggestions and how to use them to limit where your custom templates are applied
- Identify a view's machine name
- Identify a display's machine name
- Identify a field's machine name
Now that we understand what templates are and how we can use them, let's override some templates! In this tutorial we'll copy the views wrapper template to our theme and override it so that we can customize the markup for the Baseball Players view. Then we'll modify the template so that our view's pager appears both above and below our table of players.
By default, individual forms in Drupal are not output using Twig template files. It's possible to associate a form with a Twig template file by creating a new theme hook, and then referencing that theme hook from the $form
array that defines the form. Doing so allows theme developers to customize the layout of the elements in the form using HTML and CSS.
This is useful when you want to change the layout of the entire form. For example, putting the elements into 2 columns. If you want to change individual elements in the form, you can often do so by overriding element specific Twig template files.
In this tutorial, we'll:
- Learn how to create a new theme hook that can be used to theme an element in a render array.
- Associate the
$form
we want to theme with the new theme hook we created. - Create a Twig template file for the theme hook that will allow us to lay out the form elements using custom HTML.
By the end of this tutorial, you should be able to associate a Twig template file with any form in Drupal, so that you can customize its layout using HTML and CSS.
This guide was written, and is maintained, by Drupalize.Me. For more high quality written and video Drupal tutorials created by our team of experts, check out the collection of Drupalize.Me Guides.
The Learn Drupal Ladder
CourseIn this series we introduce the Drupal Ladder project, and walk through the lessons in the Drupal Ladder.
In this video we'll be looking at some background on this project, and then we'll be looking at how you can actually get involved and progress to becoming a contributor yourself.
The Drupal Ladder Project was a community initiative that started in 2011. The purpose of the project was to get more people contributing to Drupal Core, by teaching people the skills that they need, exposing them to the tools that they need to use within the Drupal Community, and teaching people not just Drupal best practices in terms of code, but also how to actually interact and work with the community.
Additional resources
Install Git
FreeIn this video we walk through getting Git version control installed, and then show how to do a few basic things, including how to get a copy of the latest Drupal development code. This video follows the instructions found in the Install Git lesson on learndrupal.org.
This video is installing Git on Windows, because it has the most steps involved. Installation on Mac and Linux is very simple, in that they do not have a wizard to walk through, so they are not demonstrated. All commands used on the command line in the video work on Windows, Mac, and Linux, because Windows is using the Git Bash shell which is part of the Git installation.
Additional resources
In this step we turn our attention to Drupal.org and the community issue queue. This is where all of the active work for Drupal core takes place. We will look at the queue and create our issue to see how it works. This video follows the instructions for the Getting started in the issue queue lesson on learndrupal.org.
Test Patches
FreeIn this video we will walk through the process of testing existing patches in the Drupal.org issue queue. We will read an issue, download and apply the patch with Git, and then test it to see if it works. This video follows the instructions on the Test patches lesson on learndrupal.org.
The lines that I have in my .bash_profile (shown at the end of this video) to add the Git branch to my command line prompt is:
function parse_git_branch {
git branch --no-color 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
}
export PS1="\h:\W \u\$(parse_git_branch)\$ "
I'm using a Mac, so your mileage may vary on other systems.
Write a Patch
FreeIn this video we will write our own patch to resolve an issue. We will take a screenshot of the issue before and after our patch, and upload the images and patch to the Drupal.org issue queue. This video follows the instructions in the Write a patch lesson on drupalladder.org.
Development Environments
TopicDevelopment environments provide a sandbox where you can work on your application without affecting the live site.
Layouts
TopicA layout can describe how various components are arranged on various levels—from an entire page from the header to the footer, to just the “middle” where the dynamic content goes, to individual components. It can apply to templates for managed content or one-off designs for landing pages.
Back up Your Drupal Site
TopicA reliable backup will allow you to restore your site if something goes wrong.
Drupal Coding Standards
TopicCoding standards provide a set of rules for how your code should be formatted, and best practice guidelines for naming conventions and the location of files.
Content Types
TopicA content type is a subtype of the [content entity](link to Entity topic). When a content creator goes to add new content to the site, they are presented with a list of content types to choose from to get the appropriate form to fill out.
An overview of some of our favorite Drupal documentation resources.
Drush
TopicDrush is a command line interface that enables you to interact with your Drupal site without clicking around the graphical user interface (GUI).
Fields and the Field API
TopicFields are the building blocks of Drupal's powerful content modeling system. The Field API allows for the development of custom field types to suit almost any data display and collection needs.
JavaScript in Drupal
TopicJavaScript files are included by a module or a theme by creating an asset library. Using this asset library system you can selectively choose which files to load, overwrite existing files, or customize them to suit your needs.
PhpStorm
TopicThe PhpStorm integrated development environment (IDE) contains dozens of useful features that make working with a Drupal codebase easier.