Drupal 7 add headings to each grouped section in my content type?

Question

I have created a content type and it has about 5 groups which are all vertical tabs.

For some reason the Field group label doesn't work for vertical tabs. the <h2> tag is always: <h2 class="element-invisible">Vertical Tabs</h2>. The title is always Vertical Tabs regardless of what is set in manage fields and it always has the class element-invisible

I noticed the exact same thing in some themes that use vertical tabs.

I also noticed that these themes have an extra heading tag above each vertical tab where it shows the heading for that group. (adaptivetheme) is a good example of this.

Anyway, to the actual question....

How do I add headings to each grouped section (vertical tabs) in my content type?

Note: this is for the actual form for adding content not the display of the content created.

Any help with this is very much apprciated.

Take a look at https://drupal.org/node/17565 for information on how to theme nodes by content type. — David H. Bennett, Mar 17 '14 at 17:05
To be sure, what you want is ADD another heading to each group (in addition of the one that is invisible) or do you want to make visible the invisible heading? If it is the second part, I agree with @nmc answer and template file. — Djouuuuh, May 02 '14 at 09:58
Thanks @justinelejeune but how do I add a heading to each group? I dont see an option for that... just fields for the user to add content. — Cybercampbell, May 31 '14 at 11:46

David H. Bennett · Answer 1 · 2014-03-17T17:57:41.780

1

Use Drupal 7 content theming to add headings to your Content type. For instance, if your content type was named mycontent then create the following script in your theme's folder:

{theme path}/page--node--mycontent.tpl.php

To preprocess the content type use the following function:

function mycontent_preprocess_page(&$vars) {
    if (isset($vars['node']->type)) { 
        $vars['theme_hook_suggestions'][] = 'page__' . $vars['node']->type;
    }
}

More information on the template_preprocess_page function is available here

edited Mar 17 '14 at 17:57

answered Mar 17 '14 at 17:37

David H. Bennett

1,822
13
16

Hi, Thanks for the responce but this is for the actual form for adding content not the display of the content created. Any other ideas? – Cybercampbell Mar 18 '14 at 02:59

score 1 · Answer 2 · answered Mar 18 '14 at 17:16

You can customize your content types form in your theme's template.php or in a custom module. This is documented here. For example, if you have a custom module in your theme MYMODULE using a custom content type article then you can customize like so:

<?php
/**
* Implements hook_theme().
*/
function MYMODULE_theme($existing, $type, $theme, $path) {
  return array(
    'article_node_form' => array(
      'render element' => 'form',
      'template' => 'article-node-form',
      // this will set to module/theme path by default:
      'path' => drupal_get_path('module', 'MYMODULE'),
    ),
  );
}
?>

To output the custom data:

<?php
/**
* Preprocessor for theme('article_node_form').
*/
function template_preprocess_article_node_form(&$variables) {
  // nodeformcols is an alternative for this solution.
  if (!module_exists('nodeformcols')) {
    $variables['sidebar'] = array();   // Put taxonomy fields in sidebar.
    $variables['sidebar'][] = $variables['form']['field_tags'];
    hide($variables['form']['field_tags']);
    // Extract the form buttons, and put them in independent variable.
    $variables['buttons'] = $variables['form']['actions'];
    hide($variables['form']['actions']);
  }
}
?>

nmc · Answer 3 · 2014-05-06T01:11:39.637

The other answers to this question were on the right track. The code responsible for the vertical tab heading is the theme_vertical_tabs function in the includes/form.inc file.

If you have your own theme, you can copy and alter this function in your theme's template.php file to override it:

function YOUR_THEME_NAME_vertical_tabs($variables) {
  $element = $variables['element'];

  // Add required JavaScript and Stylesheet.
  drupal_add_library('system', 'drupal.vertical-tabs');

  // Following line changed to use title set in field settings and remove class="element-invisible
  $output = '<h2>' . t($element['#title']) . '</h2>';  
  $output .= '<div class="vertical-tabs-panes">' . $element['#children'] . '</div>';

  return $output;
}

If you are looking to make the vertical tab heading appear in the content editing screens and you have an admin theme set, then the above modifications need to be done to the admin theme.

Drupal 7 add headings to each grouped section in my content type?

3 Answers3