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]
<?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
?>
[/php]
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]
<?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);
[/php]
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 \” .
[php firstline=”8″]
$bg_color = "#FFFF00";
$body_font = "Tahoma";
$link_color = "#0000FF";
$alt_color = "1";
[/php]
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.
[php firstline=”13″]
echo <<<CSS
body {
background-color: {$bg_color};
font-family:{$body_font};
}
a {
color: {$link_color};
}
CSS;
[/php]
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.
[php firstline=”23″]
if ($alt_color = 1) {
echo <<<CSS
body {
background-color: #FFFFFF;
}
CSS;
} // Closing If tag
?>
[/php]
Other Resources:
By Tod April 18, 2010 - 5:54 pm
Once you’ve created style.php, how do you make the website call it?
I’ve added @import url(‘style.php’); to my style.css, but no go.
By Tod April 18, 2010 - 6:10 pm
Also trying , but no go.
By Tod April 18, 2010 - 6:29 pm
Redirecting to http://clark-technet.com/2010/01/wordpress-theme-developers-tip-call-dynamic-css-the-right-way
By Amy June 4, 2010 - 12:31 am
2 brief questions:
I’m setting this up for image width. My array in controlpanel.php looks like this:
—————————————————————————–
array( “name” => “Image width”,
“desc” => “Enter the image’s width.”,
“id” => $shortname.”m_width”,
“std” => “137”,
“type” => “text”
),
—————————————————————————–
style.php looks like this:
—————————————————————————–
.first_li span {
background: transparent url(‘path/image.png’) no-repeat;
width: px;
height: 62px;
top: -87px;
left: -40px;
}
—————————————————————————–
The css works fine, but the php variable for ‘m_width’ isn’t being recognized.
What am I missing here?
*************************************************************
*************************************************************
Also, how do you handle a second set of options? ie: 2 seperate arrays?
—————————————————————————–
$options = array (
/* Image #1. Option: Image Width. */
/* This is the option for TEXT BOX. */
array( “name” => “Image width”,
“desc” => “Enter the image’s width.”,
“id” => $shortname.”m_width”,
“std” => “137”,
“type” => “text”
),
/* Image #1. Option: Image Height. */
/* This is the option for TEXT BOX. */
array( “name” => “Image height”,
“desc” => “Enter the image’s height.”,
“id” => $shortname.”m_height”,
“std” => “62”,
“type” => “text”
)
);
$options2 = array (
/* Image #2. Option: Image Width. */
/* This is the option for TEXT BOX. */
array( “name” => “Image width”,
“desc” => “Enter the image’s width.”,
“id” => $shortname.”m_width”,
“std” => “132”,
“type” => “text”
),
/* Image #2. Option: Image Height. */
/* This is the option for TEXT BOX. */
array( “name” => “Image height”,
“desc” => “Enter the image’s height.”,
“id” => $shortname.”m_height”,
“std” => “82”,
“type” => “text”
)
);
Image #1
:
Image #2
:
—————————————————————————–
By Jeremy Clark June 6, 2010 - 10:31 am
Sorry for the delay in answering for some reason your comment was flagged as spam. Some of your code wasn’t handled correctly so I can’t see how you were calling the options. I have an updated theme framework with examples and files you can download to see how they work here. As far as the two separate arrays for different options. It’s easier just to append a number to the end of the second option id and call it they way instead of trying to deal with two arrays. I hope the new version of the framework will help if not please let me know and I’ll try to help any way I can.
By Sam January 31, 2013 - 6:46 pm
I presume then you could create a theme option and change the colour through that?
I’m working on a wordpress theme to sell. This would be very useful if I could use this way to get the user to choose their colour scheme.
By Jeremy Clark January 31, 2013 - 8:27 pm
The best way currently is to just output the CSS to the head section of the theme. Although not desirable the performance hit is much less.