Revisiting My Really boring HTML & XML tag function for PHP

I’ve made some changes to the utility function I use for HTML and XML tag output. PHP is already a useful template language, but sometimes I run into places where I need to manipulate tags or output large amounts of HTML or XML tagged information. I looked everywhere for a simple function and ended up writing this boring function myself.

This version uses this technique exclusively as a function. If you want to see the earlier similar function used in a PHP class see Really boring HTML & XML tag class function for PHP. You would have to edit the original example to match these changes, but if you want to use a PHP class then I suspect you know what you are doing.

The major change is moving from sprintf to concatenated strings. I also had to change the content array key to tag_content because content is an HTML attribute (doh!). With that change I added array keys tag_content_before and tag_content_after so you can add more stuff. So picky folks can \n\n\t\t\t\t their i-want-pretty-source-code-hearts out or add comments and other junk. I also simplified the reserved array key names checks.

Remember I don’t consider myself a programming god, just an artist that writes code. I know there are plenty of great HTML PHP libraries and other coding toys, but this just a simply coded function to met my needs.

<?php
// Boring general purpose html and xml tag generation function
function the_html_tag( $html = array() ) {

    $attributes = '';
    $composite = '';
    $spacer = '';
    $reserved = array(
        'tag', 'tag_type', 'attributes', 'tag_content', 'tag_content_before', 'tag_content_after', 'return'
    );
    
    foreach ( $html as $name => $option ) {
        if ( in_array( $name, $reserved ) ) continue;
        $attributes .= $name . '="' . $option . '" ';
    }
    
    if ( $html['attributes'] != '' ) $attributes = $html['attributes'] . ' ' . $attributes;
    
    if ( $attributes != '' ) {
        $attributes = rtrim( $attributes );
        $spacer = ' ';
    }
    
    switch ( $html['tag_type'] ) {
        case 'single':
            $composite = $html['tag_content_before'] . $html['tag_content'] . '<' . $html['tag'] . $spacer . $attributes . '/>' . $html['tag_content_after'];
            break;
        case 'open':
            $composite = $html['tag_content_before'] . '<' . $html['tag'] . $spacer . $attributes . '>' . $html['tag_content'] . $html['tag_content_after'];
            break;
        case 'close':
            $composite = $html['tag_content_before'] . $html['tag_content'] . '</' . $html['tag'] . '>' . $html['tag_content_after'];
            break;
        case 'attributes':
            $composite = $attributes;
            break;          
        default:
            $composite = $html['tag_content_before'] . '<' . $html['tag'] . $spacer . $attributes . '>' . $html['tag_content'] . '</' . $html['tag'] . '>' . $html['tag_content_after'];
            break;
    }
    
    if ( $html['return'] == true ) return $composite ;
    
    echo $composite;
}
?>

Basically you call the_html_tag( $array_here ) function with an array. The array has a few special keys used to control the function output:

  • $array[‘tag’] – is the HTML or XML tag you want to create.
  • $array[‘tag_type’] – is how the tag will be composed. You can set it to one of these predefined options:
    • single – composes the tag_content_before then the tag_content and a self-closing tag (like IMG) with the attributes followed by the tag_content_after.
    • open – will compose the tag_content_before then an opening tag with attributes followed by tag_content and finally tag_content_after.
    • close – will output tag_content_before then the tag_content with a closing tag (no attributes) and followed by tag_content_after
    • attributes – will output just the attributes with no tag or tag_content key values… yum!
    • With no tag_type the default behavior  composes the tag_content_before then the tag with the attributes wrapped around tag_content with a closing tag followed by the tag_content_after.
  • $array[‘tag_content’] – is the normal content that will be enclosed in the tag, but the string content will be placed differently depending on the tag_type above.
  • $array[‘tag_content_before’] – is an extra string content value typically used in an area before tag_content depending on the tag_type value.
  • $array[‘tag_content_after’] – is another extra string content value typically used in an area after tag_content depending on the tag_type value.
  • $array[‘attributes’] = is an extra key that will push the string value into the tag attributes area before the attributes that will be generated by the non-reserved keys ( see the last note ).
  • $array[‘return’] – will either echo when set as false or return the composed string when set as true. By default it is set as false so the function will echo it’s final output.
  • All other key and value pairs set in the array will be used as attributes in the form of key name equals value. So $array[‘onclick’] = ‘fail();’ would return onclick=”fail();” for any tag_type that uses attributes.

Of course the main question might be: “Why bother when you can just write out some HTML with your PHP code?” Fine, you can do that and deal with double-quote single-quote escape madness. The examples below should be a clue for my usage of this boring, simple function.

Here is how I would use it to create a function for creating a simple H1:

<?php 
function boring_h1( $headline, $headline_classes ) {
    the_html_tag( array(
    'tag' => 'h1',
    'tag_content' => $headline,
    'id' => 'main-title',
    'class' => $headline_classes,
    'tag_content_after' => '<!-- #main-title -->'
    ) );
}
?>

<?php boring_h1( 'Look A Headline', 'title-big title-red' ); ?>

This would produce HTML that looks like:

<h1 id="main-title" class="title-big title-red">Look A Headline</h1><!-- #main-title -->

Now a more complex example is being used in my weirdo WordPress Theme Framework experimentation. For that project I wanted to move to a CSS class based layout (not ID) and allow some modifications to the class attributes of various layout elements using WordPress filters. I could write a whole article about my reasons for doing this, but that would be even more boring.

The code example below shows a fraction of how this works, but you can also view the source of this website and see the technique in action. These are two additional functions. The first is an additional utility function using the_html_tag() with filters, and the second is just used to simplify the template function used in the theme.

<?php
// Funbox element Classes takes element and array and spits out a class= with some dynamic filtering.
function funbox_theme_layout_element_attributes( $element = '' , $element_classes = array(), $return = false ) {    
    if ( $element == '' ) return;
    
    $element = sanitize_title_with_dashes( $element );
    $element_classes[] = $element . '-';

    $layout_element_defaults = array(
        'tag_type' => 'attributes',
        'id' => $element,
        'return' => $return
    );

    // So the filter is consistent. No dashes sorry!
    $element = str_replace( '-', '_', $element );
    $element_classes = apply_filters( 'funbox_theme_' . $element . '_class',  $element_classes );
    
    $layout_element_defaults['class'] = implode( ' ', $element_classes );
    
    $layout_element_defaults = apply_filters( 'funbox_theme_' . $element . '_attributes',  $layout_element_defaults );  

    the_html_tag( $layout_element_defaults );
}

// Funbox Wrapper Class
function funbox_theme_layout_wrapper_attributes() { 
    funbox_theme_layout_element_attributes( 'wrapper' , array( 'hfeed' ) );
}
?>

In a WordPress Theme I would use this template code:

<div <?php funbox_theme_layout_wrapper_attributes() ?>>

That template code would produce this type of output:

<div id="wrapper" class="hfeed wrapper-">

Have fun! :P

Leave a Reply