8.5.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.2.x theme.inc template_preprocess_field(&$variables, $hook)
8.3.x theme.inc template_preprocess_field(&$variables, $hook)
8.4.x theme.inc template_preprocess_field(&$variables, $hook)
8.6.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:

jaireina’s picture

I did this to apply token replacement to certain fields

function themename_preprocess_field(&$variables){
  //Replace the tokens on the fields of these content types
  $type_and_fields = array(
    'jo_blog' => array('field_body'),
    'generic_content_page' => array('body'),
    'free_style_page' => array('body'),
    'full_width_image_page' => array('body')

  foreach ($type_and_fields as $content_type => $fields) {
    //check if the content type is part of the list we need to look for
    if($variables['element']['#bundle'] == $content_type){
      //if so go through every field where we want to replace the tokens
      foreach ($fields as $field) {
        //check if this field was included in the array
        if($variables['element']['#field_name'] == $field) {
          //do the token replacement
          $variables['items']['0']['#markup'] = token_replace($variables['items']['0']['#markup']);