INTRO
Drupal allows you to easily change the order of your displayed fields using the Manage Display option for your content types but it does not allow you to change the order of the title field (because this field is rendered directly from the node template). But there may be times that you want to display your custom field(s) before the title field. For example, if you have an image field that you want to float to the left of your title and remaining node content.
Luckily, the solution is quite easy to implement.
STEP 1
Create a node template file for the content type you want to change the title order on. Note that if your theme already has a custom node template for the content type you want to change then you can skip to step 2.
If you don't already have a specific node template in your theme for this content type then you can simple copy the node.tpl.php from the /node directory in your root Drupal install file into your theme directory and rename it to node--CONTENT_TYPE_NAME.tpl.php.
Example:
If your content type's machine name is article then your copy of the node.tpl.php file will be named node--article.tpl.php.
If your content type's machine name is team_bio then the file will be named node--team_bio.tpl.php. Notice the underscore in the content type name are retained and not converted to dashed.
IMPORTANT: Be sure to clear your site caches so your new template file will be used.
STEP 2
Once you have a custom node template for your content type all we need to do is make a slight change to it. With Drupal 7 we can harness the power of render and hide within the template files.
This is a stripped down and simplistic version of what your current custom node template might look like:
<article>
<h2><?php print $title; ?></h2>
<?php print render($content); ?>
</article>Now we can modify our template to manually output our image field before the title like so:
<article>
<?php print render($content['field_name_of_image']); ?>
<h2><?php print $title; ?></h2>
<?php print render($content); ?>
</article>And when a node of the template's content type if rendered it will now print the image before the title and when the remaining content is output using print render($content); Drupal will know that the image field has already been output and will now leave this off when the rest of the content is rendered.
Render and hide are really quite powerful features to use in your theme's template files. For example, you can use hide($content['comments']); to prevent the comments from being rendered with render($content) and then manually render them later in your template using render($content['comments']).
The most important concepts to grasp when dealing with render and hide are:
- render($content['FIELD_NAME']) will manually print a field in your template.
- hide($content['FIELD_NAME']) will prevent a field from being rendered with the content is printed using render($content)
- You can always manually print a field that has been hidden from the main content rendering
- If you manually print a field using render then it will not be output when using render($content)