How to attach css classes to the <h1> title attributes if node_is_page() dynamically?

Question

To preprocess the node title field is obviously not the easiest. It has its place in the node.tpl.php and in the page.tpl.php by default and it has its own status in Drupal core, which makes it not fieldable as simply as other fields and entities in a given content type bundle.

That's why there are many discussions going on at drupal.org and some little helper modules are also around already, to make the title field more flexible in different scenarios like field translation, label design, field order and much more. So if this is your problem you will easely find a little module helping you.

But what if you don't want to touch the behaviour of the title field as designed in core but only want to preprocess the title to change the markup dynamically? Suddently google keeps silent. Unlike others I agree with some core contributors who explain wisely why the title field has its reasonable difficulties and why the decision to make it simply a "field like others" is not THAT easy to make. So for some reasion I need a solution in template.php

This is how the page.tpl.php looks like in my case:

// page.tpl.php    

<?php print render($title_prefix); ?>
    <?php if ($title): ?>
        <?php if ($page): ?>
            <!-- This is where we want to get in with template.php -->
            <h1 <?php print $title_attributes; ?>> 
                <?php print $title; ?>
            </h1>
        <?php endif; ?>
    <?php endif; ?>
<?php print render($title_suffix); ?> 

And this the place where we obvisously should try to make it happen:

// template.php

function YOURTHEME_process_page(&$variables) {
    if ($variables['view_mode'] == 'full' && 
        node_is_page($variables['node'])) {
            // do something with $variables['title']['attributes'][];
    }
}

But to be honest, I am a little bit lost here, since I only want to change the rendering of <h1> to <h1 class="my_css_class">. Does anybody has an idea of how to achieve this?

The attributes class seems not to exist this way, because I get an Unknown index warning and the class gets not attached. Or maybe I have to point to $title another way? Maybe something like $node->title ? I know how to wrap the title with a new container, or how to change the suffix/prefix. But here would really appreciate your thoughts. Thank you very much ...

Answer 1

Okay, as commented under the question, I've tried out another idea: a little bit dirty since this is far away from the way it is supposed to be, but hiding '$title' in page.tpl.php and removing the IF NOT PAGE condition from the standart node.tpl.php (like in Bartik) makes it possible to access the title-attributes array, since node.tpl.php seems to know title-attributes, but page.tpl.php not...

But in this case I have to reimplement the programmatically "node is page OR node list switch" toggling of h1 and h2 again, since if-page $title in page.tpl.php did this before:

After removing the complete if-title-title part (in Bartik it looks like this, near the $content) from page.tpl.php,

<?php print render($title_prefix); ?>
  <?php if ($title): ?>
    <h1 class="title" id="page-title">
      <?php print $title; ?>
    </h1>
  <?php endif; ?>
<?php print render($title_suffix); ?>

... I have added (exchanged) this in the node.tpl.php:

//node.tpl.php

// usually we have something like the following here
/*
<?php if (!$page): ?>
   <h2<?php print $title_attributes; ?>>
      <a href="<?php print $node_url; ?>"><?php print $title; ?></a>
   </h2>
<?php endif; ?>
*/

// but we exchange it with this ...

<?php print render($title_prefix); ?>

  <?php if ($page): ?>
    <h1<?php print $title_attributes; ?>>
       <a href="<?php print $node_url; ?>">
          <?php print $title; ?>
       </a>
    </h1>
  <?php endif; ?>

  <?php if (!$page): ?>
    <h2<?php print $title_attributes; ?>>
      <a href="<?php print $node_url; ?>">
         <?php print $title; ?>
      </a>
    </h2>
  <?php endif; ?>

<?php print render($title_suffix); ?>

Now I do have my title inside of my wanted scope, where I can theme it programmatically inside the main content container. Thanks to Clive for his support on my question, and special thanks to Digidog from drupal.org, who gave me the final hint per mail.

Answer 2

This is how I add classes to titles from page.tpl.php:

In page.tpl.php:

<?php if ($title): ?><h1 <?php print $title_attributes; ?> id="page-titles"><?php print $title; ?></h1><?php endif; ?>

Note that $title prints the title itself. Note that $title_attributes prints out class='' where included classes are found in $title_attributes_array['class'][].

You can add classes the following way. In template.php:

/**
 * Implements template_preprocess_page().
 */
function hook_preprocess_page(&$vars) {

  $vars['title_attributes_array']['class'][] = 'element-invisible';

}

Note that the hook_preprocess_page function should be [your_theme_name]_preprocess_page.

What's interesting is that $title_attributes does not exist in the available variables. Drupal does some magic to allow $title_attributes to print as class='class1 class2' based on what $title_attributes_array contains.

Answer 3

If you are okay with using jQuery, then you can achieve this using the addClass method.:

 function YOURTHEME_process_page(&$variables) {

   if ($variables['view_mode'] == 'full' && node_is_page($variables['node'])) {

       drupal_add_js('
       jQuery(document).ready(function(){
            $('jQery SELECTOR OF H1').addClass('my_css_class');  
        });

    ', 'inline');

}

}

Answer 4

This is how I made it work:

template.php

/**
 * Implements template_preprocess_page.
 */
function my_theme_preprocess_page(&$vars) {
  $node = isset($vars['node']) ? $vars['node'] : '';
  // Set class name for the page's title.
  $vars['class_name'] = node_is_page($node) && $node->type == 'node_type' ? ' title-class-name' : '';
}

page.tpl.php

<?php if ($title): ?>
  <h1 id="page-title" class="title<?php print $class_name; ?>"><?php print $title; ?></h1>
<?php endif; ?>

Alternatively you may use the Display Suite module which, of course, exceeds the limits of just adding a class to a title.