Working with Twig Templates

Creating your template

You should only use a template, if you really need it. This means if you cannot modify the output using only CSS. This would be the case if you want to hide e.g. the secondary menu, which is still not a block by default but always rendered through page.html.twig. (formerly page.tpl.php)

Naming convention

If you know the names of the templates you need from Drupal 7, it will be easy for you. Most of the time, the name of your template will have the same name. Only the .tpl.php file ending is replaced by .html.twig.

Theming with Profile2

User-profile.tpl.php

If you are designing a custom template for your user profile pages and are using the Profile2 module, you probably are looking to add your custom fields to the user-profile.tpl.php template. Here is how this can be accomplished.

This assumes that you have a Profile2 profile type called my-profile. You may easily load your fields into your custom user-profile.tpl.php by printing them like this:

Pass the theme path to javascript

Description

This extends Drupal.settings allowing you to get the theme path in a javascript file

Steps

Add a preprocess function to your theme's template.php
Using drupal_add_js we extend Drupal.settings in order to make it a variable that returns the path to the theme

p.s. don't copy the php tags into template.php just what's inside.

Pass the theme path to javascript

Description

This extends Drupal.settings allowing you to get the theme path in a javascript file

Steps

Add a preprocess function to your theme's template.php
Using drupal_add_js we extend Drupal.settings in order to make it a variable that returns the path to the theme

p.s. don't copy the php tags into template.php just what's inside.

HowTo: Copy the form buttons on node creation pages to the top

Background:

I have a custom content type with a lot of form elements (close to 100) and scrolling down to the bottom got a bit irritating when all you wanted to do it update or edit a node of this content type.
So I wanted to copy the form action buttons to the top (but still keep them at the bottom).

Here is how I did it:

1) Create a custom module

1a) In your sites/default/modules/ folder create a new folder CUSTOM_MODULE*

1b) Create the mandatory CUSTOM_MODULE.info and CUSTOM_MODULE.module files.

1c) Fill out the CUSTOM_MODULE.info file with some basic info. eg:

name = Custom node form modify module
description = Custom module to duplicate the form buttons on node creation forms and place them above the form items.
package = Custom
core = 7.x
version = 0.1

1d) Copy the following code into the CUSTOM_MODULE.module file. I'll then go through the code to explain what it does.

/**
* Implementation of HOOK_form_alter()
*/
function CUSTOM_MODULE_form_alter(&$form, $form_state, $form_id) {

/**
* Copy the action buttons (submit, preview, etc ..)
* and place them at the top of the form
*/
if(!empty($form['actions'])) {

foreach($form['actions'] as $name => $button) {

// I DEFINE EACH BUTTON SEPERATELY BECAUSE I WISH TO DEFINE THE ORDER

HowTo: Add Google Webmasters Tools verification meta tag via the themes template.php file.

This guide refers to the meta tag verification method available for Google Webmaster Tools and these instructions are specific for Drupal 7.

You can also add any other meta tag you require using this guide.

edit: Since writing this guide a module has popped up that does all this for you. You can find the Site verify module here. However, if you require a more complex approach - see the first comment for an example - or just want to learn a bit more about how it works or simply prefer the DIY approach then please do read on:

What you require:

  • Google Webmasters Tools Account - sign up here: https://www.google.com/webmasters/tools/
  • Custom theme (or a copy of a supplied theme) in either /sites/default/themes/ or /sites/all/themes/
  • Google Webmaster Tools Verification Code (meta tag)

1) Make sure you have your Google Webmaster Tools Verification Code meta tag. It looks something like this:
<meta name="google-site-verification" content="abcdefghijklmnopqrstuvwxyz0123456789" />

Pages

Subscribe with RSS Subscribe to RSS - template