David's Technical Musings

Note (Feb. 12, 2008)

Andre has implemented a version of styling that I feel is superior to this one.  I’ll provide an update at some point, but check out the MailPress2 style for details.

One of the limitations of MailPress themes is that you can’t use CSS.  You can still use styles, but you have to specify them inline using the style=”" attribute.  One of the things that CSS does for you is it gives you the ability to apply the same style across your templates without having to duplicate it every place you use it.  To deal with this limitation, I thought, can’t I just define variables that contain the styles that can be referenced by all the templates just like a CSS style can?

The answer is yes – in functions.php.

I’ll show you how to do this by converting the MailPress theme.  First let’s look at a simple template – daily.php.  It looks like this:

<?php $this->get_header() ?>
  <table style='margin:0;padding:0;border:none;width:100%;'>
<?php while (have_posts()) : the_post(); ?>
    <tr>
      <td style='margin:0;padding:0pt 0pt 20px 45px;border:none;width:450px;float:left;color:#333333;text-align:left;font-family:Verdana,Sans-Serif;'>
        <div style='margin:0pt 0pt 40px;padding:0;border:none;text-align:justify;'>
          <h2 style='margin:30px 0pt 0pt;padding:0;border:none;color:#333;font-size:1.4em;font-weight:bold;font-family:Verdana,Sans-Serif;'>
            <a style='text-decoration:none;color:#333;' href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
          </h2>
          <small style='margin:0;padding:0;border:none;line-height:2em;color:#777;font-size:0.7em;font-family:Arial,Sans-Serif;'>
<?php the_time('F j, Y') ?>
          </small>
          <div style='margin:0;padding:0;border:none;'>
            <p style='margin:0;padding:0;border:none;line-height:1.4em;font-size:0.85em;'>
<?php the_content(); ?>
            </p>
          </div>
        </div>
      </td>
    </tr>
<?php endwhile; ?>
  </table>
<?php $this->get_footer() ?>

Other templates (such as weekly.php and monthly.php) are very similar. Making a change is rather tedious as a result.  What if we simple define those style strings as variables in functions.php?  The result would look like this:

<?php $this->get_header() ?>
  <table style='<?php echo $mptheme_style_outer_table; ?>'>
<?php while (have_posts()) : the_post(); ?>
    <tr>
      <td style='<?php echo $mptheme_style_title_td; ?>'>
        <div style='<?php echo $mptheme_style_title_div; ?>'>
          <h2 style='<?php echo $mptheme_style_title_h; ?>'>
            <a style='<?php echo $mptheme_style_title_a; ?>' href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
          </h2>
          <small style='<?php echo $mptheme_style_small_date; ?>'>
<?php the_time('F j, Y') ?>
          </small>
          <div style='<?php echo $mptheme_style_content_div; ?>'>
            <p style='<?php echo $mptheme_style_content_p; ?>'>
<?php the_content(); ?>
            </p>
          </div>
        </div>
      </td>
    </tr>
<?php endwhile; ?>
  </table>
<?php $this->get_footer() ?>

Here are the contents of function.php:

<?php
$mptheme_style_font_family = 'font-family: Verdana, Sans-Serif;';

$mptheme_style_outer_table = 'margin: 0; padding: 0; border: none; width: 100%;';

$mptheme_style_small_date =
    $mptheme_style_font_family
    . 'margin: 0;'
    . 'padding: 0;'
    . 'border: none;'
    . 'line-height: 2em;'
    . 'color: #777;'
    . 'font-size: 0.7em;';

// Message title styles.
$mptheme_style_title_td =
    $mptheme_style_font_family
    . 'margin: 0;'
    . 'padding: 0 0 20px 45px;'
    . 'border: none;'
    . 'width: 450px;'
    . 'float: left;'
    . 'color: #333333;'
    . 'text-align: left;';
$mptheme_style_title_div =
    'margin: 0 0 40px;'
    . 'padding: 0;'
    . 'border: none;'
    . 'text-align: justify;';
$mptheme_style_title_h =
    $mptheme_style_font_family
    . 'margin: 30px 0 0 0;'
    . 'padding: 0;'
    . 'border: none;'
    . 'color: #333;'
    . 'font-size: 1.4em;'
    . 'font-weight: bold;';
$mptheme_style_title_a = 'text-decoration: none; color: #333;';
// Content styles.
$mptheme_style_content_div = 'margin: 0; padding: 0; border: none;';
$mptheme_style_content_p =
    'margin: 0;'
    . 'padding: 0;'
    . 'border: none;'
    . 'line-height: 1.4em;'
    . 'font-size: 0.85em;';
?>

I believe this technique is important for maintaining themes.  As I was developing a theme based on the MailPress theme I got tired of making the same modifications over and over again.  Using this mechanism, I can make a change in one place (functions.php) and it will be applied consistently across all templates.

One caveat I found is that you can’t use definitions from functions.php in your header.php or footer.php files, which is a real shame.

A converted version of the themes I’ve converted can be found on my downloads page with some additional minor modifications.

Resources

•   MailPressThemeWithStyles.zip (59.9 KiB, 737 hits)