8.2.x theme.inc template_preprocess_field(&$variables, $hook)
8.0.x theme.inc template_preprocess_field(&$variables, $hook)
8.1.x theme.inc template_preprocess_field(&$variables, $hook)
8.3.x theme.inc template_preprocess_field(&$variables, $hook)
7.x field.module template_preprocess_field(&$variables, $hook)

Theme preprocess function for theme_field() and field.tpl.php.

See also



Related topics


modules/field/field.module, line 1042
Attach custom data fields to Drupal entities.


function template_preprocess_field(&$variables, $hook) {
  $element = $variables['element'];

  // There's some overhead in calling check_plain() so only call it if the label
  // variable is being displayed. Otherwise, set it to NULL to avoid PHP
  // warnings if a theme implementation accesses the variable even when it's
  // supposed to be hidden. If a theme implementation needs to print a hidden
  // label, it needs to supply a preprocess function that sets it to the
  // sanitized element title or whatever else is wanted in its place.
  $variables['label_hidden'] = ($element['#label_display'] == 'hidden');
  $variables['label'] = $variables['label_hidden'] ? NULL : check_plain($element['#title']);

  // We want other preprocess functions and the theme implementation to have
  // fast access to the field item render arrays. The item render array keys
  // (deltas) should always be a subset of the keys in #items, and looping on
  // those keys is faster than calling element_children() or looping on all keys
  // within $element, since that requires traversal of all element properties.
  $variables['items'] = array();
  foreach ($element['#items'] as $delta => $item) {
    if (!empty($element[$delta])) {
      $variables['items'][$delta] = $element[$delta];

  // Add default CSS classes. Since there can be many fields rendered on a page,
  // save some overhead by calling strtr() directly instead of
  // drupal_html_class().
  $variables['field_name_css'] = strtr($element['#field_name'], '_', '-');
  $variables['field_type_css'] = strtr($element['#field_type'], '_', '-');
  $variables['classes_array'] = array(
    'field-name-' . $variables['field_name_css'],
    'field-type-' . $variables['field_type_css'],
    'field-label-' . $element['#label_display'],
  // Add a "clearfix" class to the wrapper since we float the label and the
  // field items in field.css if the label is inline.
  if ($element['#label_display'] == 'inline') {
    $variables['classes_array'][] = 'clearfix';

  // Add specific suggestions that can override the default implementation.
  $variables['theme_hook_suggestions'] = array(
    'field__' . $element['#field_type'],
    'field__' . $element['#field_name'],
    'field__' . $element['#bundle'],
    'field__' . $element['#field_name'] . '__' . $element['#bundle'],


Nick.D’s picture

Here's how I changed the value of a field using this function;

function templatename_preprocess_field(&$variables) {
	if($variables['element']['#field_name'] == 'the_field_name') {
		if($variables['items']['0']['#markup'] == 'thedefaultvalue') {
			$variables['items']['0']['#markup'] = '';

I did this because I configured the field to have a default value - to demonstrate to the user that I want the field to begin with that value (it was for a URL, so it would start with 'http://'). The problem I had was that if the user didn't insert a url, the default value would still render.

This code clears the default value before it can be rendered.

TikaL13’s picture

I'm looking to do something similar in that I would like to alter the formatting of my taxonomy terms on my front page.

Currently they are displaying like such: tag,tag,tag

I would like them to display like so: tag \ tag \ tag

Would a preprocess function be the best why to get these terms to display this way?

Maybe similar to what is above:

function templatename_preprocess_field(&$variables) {
	if($variables['element']['#field_name'] == 'field_tags') {
		This is where I get lost
Michael McAndrew’s picture

If you want to change how a You probably want to implement theme_field()


There is an example in the standard Drupal Bartik theme: bartik_field__taxonomy_term_reference()

couloir007’s picture

Here is a way to allow you to create preprocess functions for any field.

function theme_preprocess_field(&$vars) { 
	$function = 'theme_preprocess_field__'. $vars['element']['#field_name'];
	if(function_exists($function)) {
		$vars = $function($vars);
Andrés Chandía’s picture

Hi there, I need to modify a field, but this change has to be triggered when saving the term and it depends on the value of another field, I explain...
-field 1: filled with options A/B/C
-field 2: <info>random_name
I save and if value in
Field 1 is A, then value in Field 2 must change to "Source: random_name"
Field 1 is B, then value in Field 2 must change to "Destination: random_name"
Field 1 is C, then value in Field 2 must change to "Product: random_name"
Note that the label <info> is the one that must change..


ressa’s picture

I couldn't get to the 'alt' field of an image, but after inserting debug($variables['items']['0'], 'debug field') and hitting refresh twice, I could see the fields.

The field I was looking for was $variables['items']['0']['#item']['alt']

DHL’s picture

What if I just want to modify a specific field in a node that display on frontpage ?

For example, I set the recent added article display at the frontpage, but I want to set the font size of those articles which display at the frontpage to be smaller. How can I use the "template_preprocess_field" function with name suggestion to achieve this ?

suvzz’s picture

Can we have a checkbox created whenever this condition is met $variable['element']['#field_name'] == 'field_step' ?

if yes then how ?

keneso’s picture

Why only classes, how can you add IDs as well to the fields; or maybe I am missing something?

jmaag’s picture

damondt’s picture

To add attributes to the field you can use: