Recently while doing some work on my theme for WordPress I came across a very helpful idea. Using PHP in a stylesheet to make it more dynamic. The basic idea is to use PHP variables and define certain elements that repeat in various places such as a color code to make it easily changeable by only having to change one line instead of searching for and replacing multiple times. Other examples are fonts, images, widths, even whole sections of code could be shown or hidden with the use of variables and an if statement.

The first difference with using PHP in a stylesheet is the extension of the file has to change, from .css to .php for the web server to know how to process the PHP language in the file. Then since the file is now a php file it wont be cached by web browsers and will be reloaded every page view which is unnecessary, but there is a way to fix that. I’ll now show a very simple dynamic stylesheet then explain each part individually.

<?php
header('Content-type: text/css');
header("Cache-Control: must-revalidate");
$offset = 72000 ;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);

$bg_color = "#FFFF00";
$body_font = "Tahoma";
$link_color = "#0000FF";
$alt_color = "1";

echo <<<CSS
body {
background-color: {$bg_color};
font-family:{$body_font};
}
a {
color: {$link_color};
}
CSS;

if ($alt_color = 1) {
echo <<<CSS
body {
background-color: #FFFFFF;
}
CSS;
} // Closing If tag
?>

Lines 1-6 setup the headers of the file to allow for browser caching, the will reduce bandwidth usage and save on some server processing.

<?php
header('Content-type: text/css');
header("Cache-Control: must-revalidate");
$offset = 72000 ;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);

Next 8-11 then set up the variables that will be used through the rest of the stylesheet. Notice that everything is enclosed in quotation marks, if for some reason you need to include quotation marks in the variable then you must escape it by adding a slash in front of the mark like this \” .

$bg_color = "#FFFF00";
$body_font = "Tahoma";
$link_color = "#0000FF";
$alt_color = "1";

On lines 13- 21 the actual styles are echoed which will print it to the text of the file, but the good thing about having the php is that you can mix in your variables when echoing. Notice the echo <<<CSS this tells php to output text until it sees CSS again which is on line 21. Then you also see the {$bg_color}, this is the way to use your variables the {} tell it that it’s a php variable and to output it’s value instead of the actual text $bg_color.

echo <<<CSS
body {
background-color: {$bg_color};
font-family:{$body_font};
}
a {
color: {$link_color};
}
CSS;

Finally on lines 23-30 is a simple if statement checking the value of the $alt_color and if it equals 1 then to add lines 24-28 to the output as well. Then you’ll see the closing ?> tag which says to stop processing the file.

if ($alt_color = 1) {
echo <<<CSS
body {
background-color: #FFFFFF;
}
CSS;
} // Closing If tag
?>

Other Resources:

• PHP Documentation
• W3Schools PHP tutorials
• W3Schools CSS tutorials
• Digital Web Magazine Article

|  (1 votes, average: 5.00 out of 5)

 Loading ...