I have a select list which has the following values where the key values are the same name as the css class name.


  • prim-blue|Blue
  • prim-black|Black
  • prim-orange|Orange

We also have a text field which is surrounded by the following div tag below. Before the page renders, we want to take the value from list1 and assign it as a class to the div tag. We need assistance in figuring out how to get this to work using a preprocess hook.

prim-blue {
   //some attribute
prim-black {
   //some attribute
prim-orange {
   //some attribute

/*field div tag */
<div id="target-element"> <h1> Some text values </h1> </div>

Desired results (when page renders):

**Assume list1 is set to Blue (key: prim-blue)

<div id="target-element" class="prim-blue"> <h1> Some text values </h1> </div>

Note (to provide more context):

I am using the paragraph module which a bundle that has a background color for list1 and the text field. Then on the basic page content type, i added a paragraph field.

Paragraph bundle fields:

  1. text (field_text)
  2. background color (field_bkg_clr) <-- the drop down list1

Basic Page content type:

  1. Header (field_pr_hdr, which is of type paragraph)

2 Answers 2


I have used the Field Formatter CSS class module for the same task. The client wanted to have predefined colors for heading elements in paragraph bundles. I have to admit this seems like an amendable approach, but it worked.

I had set up a vocabulary for the color names list and referenced this in the paragraph bundle as a select list (taxonomy term reference). In the display settings for the field is css-class selected. The format settings are set to target tag = entity.

This results basically in following markup:

<div class="entity entity-paragraphs-item paragraphs-item h1-colorclass-red">
    <div class="field-name-field-heading">This is a headline</div>


.h1-colorclass-red .field-name-field-heading {
    color: red;
  • I was able to use hook_prerender and hook_preprocess to take the values from the select list and using the "#prefix" and "#suffix" attribute to set the values. Commented May 13, 2016 at 17:35
  • yes that is a good option. Another option i found was to use hook_preprocess and hook_prerender to take the machine values of the select list and add it to the field using the "#suffix" and "#prefix" attributes Commented May 13, 2016 at 17:37

If you are fine with adding the classes to some wrapper all you need is hook_preprocess_HOOK.

This one adds the class retrieved from a select list field of the paragraph item to the paragraph item wrapper. I guess that's exactly what Field Formatter CSS Class is doing.

 * Implements hook_preprocess_HOOK().
function MYTHEME/MYMODULE_preprocess_entity(&$variables) {

  $my_field_name = 'field_MYSELECT';
  $my_paragraph_bundle = 'foo';

  $element = $variables['elements'];
  if ($element['#entity_type'] == 'paragraphs_item' && $element['#bundle'] == $my_paragraph_bundle) {
    foreach ($element[$my_field_name]['#items'] as $item) {
      $variables['classes_array'][] = $item['value'];

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.