PHP in Themes | PostNuke Content Management

Many thousands of lines of code have gone into modularizing PostNuke themes so that layout code is completely separate from the programming logic. This is very beneficial to developers on many levels, not the least of which is interchangeable themes.

But while the removal of logic from the display is great, there's no reason PHP should be removed from the display. PHP is just a programming language. Sure it allows you to write and control logical structures, but it can also be used to automate and simplify display code.

Site developers who are not full programmers can take advantage of PostNuke's XHTML templates to format their sites without needing to learn PHP. Programmers who develop sites with PostNuke can use the dynamic benefits of the language to also automate the XHTML display itself.

Create New Theme Variables

Every PostNuke theme has a file in its root folder called theme.php. This file is designed to create the variables and code called by the templates. Here's a simple example:

 $bgcolor = '#FFFFFF';

This line of code creates a display variable you can now use throughout your theme. Xanthia themes use this feature too:

 $bgcolor = $colors['background'];

where the color codes are pulled from the Xanthia palettes in the database and applied to local variables for use in XHTML templates. The templates are parsed by the theme engine so that variable calls like this:

 <body style="background-color:<!--[$bgcolor]-->;">

reach the client browsers like this:

 <body style="background-color:#FFFFFF;">

You can use this technique to style additional design elements. Examine your site and look for theme content that's repeated. You might have contact links on various locations, so place the address in a variable:

 $mailcontact = 'webmaster@mysite.com';

Now, if you need to change your contact email, you only have to change it once to apply it to every location in every template.

Do your templates include special copyright or legal text? Do you have JavaScript menus that are reused? Pulling these components out of your design and into variables makes developing your theme easier.

Generate XHTML Dynamically

If you open an older, non-Xanthia theme, you'll immediately notice the legacy OpenTable() and CloseTable() functions:

 function OpenTable() {     echo "<table width=\"100%\" border=\"0\" cellspacing=\"1\" cellpadding=\"0\" style=\"background-color:$GLOBALS[bgcolor2]\"><tr><td>\n";     echo "<table width=\"100%\" border=\"0\" cellspacing=\"1\" cellpadding=\"8\" style=\"background-color:$GLOBALS[bgcolor1]\"><tr><td>\n"; }

These structures were designed to modularize the display of repeated features in PostNuke and are the predecessors of current templates. Although you should not need to call functions to wrap content anymore, the concept of using PHP to write out repetitious XHTML is still very useful. Replace common XHTML code with more theme variables. Here's an example snippet of code from the beginning of the master.htm file in the pnDefault theme:

 <table cellpadding="0" cellspacing="0" border="0">     <tbody>         <tr valign="top">             <td style="width:<!--[$lcolwidth]-->px;" valign="top">                 <!-- Left Block Start -->                 <!--[$leftblocks]-->                 <!-- Left Block End -->             </td>             <td>                 <img src="/books/1/160/1/html/2/<!--[$imagepath]-->/pixel.gif" width="15" height="1" alt="" />             </td>         <td valign="top">             <!-- Content Start -->             <table border="0" cellpadding="0" cellspacing="0" width="100%">                 <tr>                     <td align="left" valign="top">                         <!--[$ZBANNERA]-->                     </td>                 </tr>                 <tr>                     <td align="left" valign="top">                         <!--[$ZSCHANNELTOP]-->                     </td>                 </tr>             </table>             <table border="0" cellpadding="0" cellspacing="0" width="100%">                 <tr>                     <td align="center">                         <!--[$ZBANNERB]-->                     </td>                 </tr>                 <tr>                     <td align="left" valign="top">                         <table border="0" cellpadding="0" cellspacing="0">                             <tr>

Looking for repeated code just in this short bit, these lines come up as good candidates:

 <table cellpadding="0" cellspacing="0" border="0"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <td align="left" valign="top"> <td valign="top">

They are even more obviously repeated with further scanning of this file or comparisons to other templates. Replace the XHTML with a variable and not only can you change all the repeated references in one edit, but you don't have to type out the long XHTML each time you need it.

Another commonly repeated element is the spacer image. Many websites use this handy tool to force the width or height of XHTML structures, and spacers are also useful for marking the columns and rows in a very complex table to ensure proper browser rendering.

The entire spacer image tag can be placed in a variable for easy reuse. If your theme's image design is defined in style sheets, so that no unique images are called in the XHTML itself, this image variable is especially useful to fill up all the <div> and <td> tags that would otherwise be empty.

Generate CSS Dynamically

The CSS you use with your themes can also be generated dynamically. Start with a look at a few style definitions from the ExtraLite PostNuke theme:

 .pn-pagetitle { color: #000000; font: bold 16px Tahoma, Verdana, sans-serif; text-decoration: none; background: none; } .pn-title { color: #000000; font: bold 14px Tahoma, Verdana, sans-serif; text-decoration: none; background: #FFFFFF; } .pn-storytitle { color: #000000; font: bold 14px Tahoma, Verdana, sans-serif; letter-spacing: 3px; text-decoration: none; background: none; } .pn-normal { color: #000000; font: 13px Tahoma, Verdana, sans-serif; text-decoration: none; background: #FFFFFF; } .pn-sub { color: #000000; font: 12px Tahoma, Verdana, sans-serif; text-decoration: none; background: none; }

Obvious, repeated elements include the font color, the families, and the lack of text decoration. There's never a reason to have a CSS file like this when you have access to PHP. The file should have a .php extension and be included in the theme.php. Then at the head of the CSS, lines like these could be used:

 $families = 'Tahoma, Verdana, sans-serif'; $colortxt = '#000000';

But the static nature of ExtraLite (and similar older themes), is that they were never designed to be dynamic. Coding themes with the legacy code from ExtraLite work fine, but you have to create modularity with the previous scripting.

Dynamically generated styles can be utilized more easily by building your theme on the Xanthia model instead. For example, Xanthia stores color variables in the database so that you can make palette sets and change your theme's feel by simply changing the palette colors.

The Xanthia CSS file is thankfully already styles.php, and it's very easy to script out the rest of the style classes. Take a look at this code from pnDefault's styles.php:

 .menu {     font-family: Verdana, Arial, Helvetica;     color: "._XA_TTEXT1COLOR.";     font-size: {$text}px;     font-weight: bold;     margin: 11px; } .pn-normal {     font-family: Verdana, Arial, Helvetica;     color: "._XA_TTEXT1COLOR.";     font-size: {$text}px;     font-weight: normal; } .pn-title {     font-family: Verdana, Arial, Helvetica;     font-size: {$title}px;     font-weight: bold;     color: "._XA_TTEXT1COLOR.";     text-decoration: none; }

Notice how both the font size and color are set dynamically for the classes. This is exactly the kind of variable coding that should be universally applied to all themes. Unfortunately, the identical font-family values are still not dynamic, but you can create your own variable at the top of the file and similarly call it throughout the CSS to remedy the problem.

Look at these styles, also from pnDefault:

 .pn-normal A:link {     font-family: Verdana, Arial, Helvetica;     color: "._XA_TTEXT2COLOR.";     font-size: {$text}px;     text-decoration : underline; } .pn-normal A:visited {     font-family: Verdana, Arial, Helvetica;     color: "._XA_TTEXT2COLOR.";     font-size: {$text}px;     text-decoration : underline; } .pn-normal A:hover {      font-family: Verdana, Arial, Helvetica;      color: "._XA_TSEPCOLOR.";      font-size: {$text}px;      border-color: "._XA_TTEXT2COLOR.";      text-decoration: none; } .pn-normal A:active {      font-family: Verdana, Arial, Helvetica;      color: "._XA_TTEXT2COLOR.";      font-size: {$text}px;      text-decoration: underline; }

Except for the color and one underline reference, they are completely identical. And there are many other sets of similar classes, all of which can be automated using a simple function.

Suppose, for example, you know those colors and the text size are all available variables. At the top of the page, there would need to be one more variable for the font-family and the function as follows:

 $mainfonts = 'Verdana, Arial, Helvetica'; function writeAnchorClasses ($name, $fonts, $colors, $size, $decoration) {     $aClasses = array("link", "visited", "hover", "active");     for($i=0; $i < count($aClasses); $i++) {         echo ".$name A:$aClasses[$i] {\n";         echo "    font-family:$fonts;\n";         echo "    color:$colors[$i];\n";         echo "    font-size:".$size."px;\n";         echo "    text-decoration:$decoration[$i];\n";         echo "    }\n";         }     }

Each time you need to write a set of anchor classes, you can reduce the 25 lines down to just 4:

 $class = 'pn-normal'; $aColor = array(_XA_TTEXT2COLOR, _XA_TTEXT2COLOR, _XA_TSEPCOLOR, _XA_TTEXT2COLOR); $aDeco = array("underline", "underline", "none", "underline"); writeAnchorClasses($class, $mainfonts, $aColor, $text, $aDeco);

Now if you want to change that font size from px to pt, or add an italic line or background color variable, all the changes can be accomplished nearly immediately. And creating more styles with anchor classes is a snap. With a little more creativity, even the nonanchor class could be generated from the same single function.

As you are designing your own themes and writing your own styles, always look for ways to write your code leaner and smarter. PHP is a tool to make your development easier, and it can do wonders if you let it.