Drupal Development FAQ11 Sep 2015 | Ben Robertson
CSS and JS that need to be included in the theme should be added in the themename.info file. Each time you add a new stylesheet or script, you will need to clear the Drupal cache before your changes will become active.
Stylesheets go like this:
stylesheets[all] = compiled_css/merge.style.css
Scripts go like this:
scripts = js/main.js
SASS with Compass
Sass should be configured to compile to
sass files should be in
themename/scss. Please use scss syntax
Do it like this:
Theme templates should be kept in a folder called templates within the theme folder. The templates should be organized into folder within the template folder based on what content they template. Here is the Drupal template hierarchy (most general to most specific):
If you are using flexible content (ie. Paragraphs module and Field Collection module), then you will also have paragraph items modules and field collection modules.
Most of the default Drupal templates are located in
app/modules/system. Default field template is in
app/modules/field, default node template is in
app/modules/node. You can override these templates in your theme by creating an identically named file in your theme and styling it.
A comprehensive list of naming conventions for theme template files is located here.
To get content that you have entered in the backend to appear, put this in your
For any other template, you can use
$content is an array with various sections. You can show or hide various sections (ie comments and stuff).
####Devel and Devel Themer
Devel enables a bunch of development features. The one I use the most is the
krumo() function, which when you pass a variable (like
$content) to it shows you all the arrays/properties of that variable.
Devel Themer will give you a nice overlay that lets you see what variables are available in different regions on the page.
- Entity API
- Field Collection
- use this for any CTA / Link field. Makes CTAs so much better.
- Better Formats
- Allows us to control which fields get a CKEditor or plain text.
- There are some good recommendations here for WYSIWYG considerations in Drupal
- jQuery Update
- Allows you to set Front-End jQuery version and Backend jQuery
Better URL Structure