Formatting HTML output of theme function

Question

I've implemented my own theme function (theme_my_theme_function) and have implemented hook_theme to tell Drupal about my function. Everything works correctly and I get the output I want on the page, except...

When I look at the HTML source code, all the HTML code outputted by my function is all in one long line! How do I get my theme function to output formatted HTML that is neat and easy to read?

possible duplicate of [How to properly indent PHP/HTML mixed code?](http://stackoverflow.com/questions/1155799/how-to-properly-indent-php-html-mixed-code) — Gajus, Feb 22 '14 at 12:51

pifantastic · Accepted Answer · 2011-07-21T14:51:52.303

If you want the HTML to be formatted, you're going to have to do it yourself when you build the HTML strings. The easier way to do that is to use a template file as opposed to building strings of HTML manually (remember that PHP is essentially a HTML template language). There is a pretty good write up of how to do that here: http://drupal.org/node/165706

The core node module has a pretty good example:

node.module:

<?php

/**
 * Implementation of hook_theme()
 */
function node_theme() {
  return array(
    'node' => array(
      'arguments' => array('node' => NULL, 'teaser' => FALSE, 'page' => FALSE),
      'template' => 'node',
    )
  );
}

node.tpl.php:

<div id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished'; } ?> clear-block">

<?php print $picture ?>

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

  <div class="meta">
  <?php if ($submitted): ?>
    <span class="submitted"><?php print $submitted ?></span>
  <?php endif; ?>

  <?php if ($terms): ?>
    <div class="terms terms-inline"><?php print $terms ?></div>
  <?php endif;?>
  </div>

  <div class="content">
    <?php print $content ?>
  </div>

  <?php print $links; ?>
</div>

There may also be a way to integrate HTMLTidy into Drupal so that it "beautifies" the markup before it's output, but I've never done that myself.

Ultimately, I would highly recommended not worrying about the formatting of your HTML output. Instead, use Firebug for Firefox or Inspector for Chrome/Safari. These both have an "Inspect Element" tool that lets you view the markup of the page in a nice browsable, editable tree. It's invaluable for web development.

*EDIT* theme_item_list does minimal formatting of HTML output. Here is an example of a list generated by theme_item_list:

<div class="item-list"><ul><li class="first">1</li> 
<li>2</li> 
<li>3</li> 
<li class="last">4</li> 
</ul></div>

In the code for theme_item_list you can see that it just adds a "\n" after the <li>:

$output .= '<li' . drupal_attributes($attributes) . '>' . $data . "</li>\n";

Thanks for that idea. I'm wondering how built-in Drupal theme functions can render so nicely. Example is [`theme_item_list`](http://api.drupal.org/api/drupal/includes--theme.inc/function/theme_item_list/7). Any ideas on how this function creates such nicely formatted HTML output? — nmc, Jul 21 '11 at 13:16
The only big of extra formatting theme_item_list does is place a newline after each list item. I'll edit my original post to illustrate. — pifantastic, Jul 21 '11 at 14:48

Formatting HTML output of theme function

1 Answers1