WordPress Theme Developers Tip – Call Dynamic CSS the Right Way
By Jeremy Clark
guides, tech, wordpress | 
development, php, theme | 587 views
While developing my Techozoic theme, I’ve progressed from adding custom CSS into the head section, to having an external file and using $_GET variables to pull options from the database, to now I believe is the right way to do it, using add_filter and a custom query in WordPress. By using this new method I’ve done away with unsafe $_GET variables and can now use any builtin WP functions in the external file.
First you’ll need to edit your functions.php file and add this block of code.
add_filter('query_vars', 'add_new_var_to_wp');
function add_new_var_to_wp($public_query_vars) {
$public_query_vars[] = 'my_theme_custom_var';
//my_theme_custom_var is the name of the custom query variable that is created and how you reference it in the call to the file
return $public_query_vars;
}
This sets up WP to now accept a new variable in a query called my_theme_custom_var the format of the query would be http://www.yourblog.com/index.php?my_theme_custom_var=css . The ? mark tells WP that this is a query and the = sign tells what the query variable should be set to.
Now to actually setup the function that will call the external file. I found this gem when looking at how popular WP theme called Atahualpa handled it’s external CSS.
add_action('template_redirect', 'my_theme_css_display');
function my_theme_css_display(){
$css = get_query_var('my_theme_custom_var');
if ($css == 'css'){
include_once (TEMPLATEPATH . '/style.php');
exit; //This stops WP from loading any further
}
}
This code now will check if a query is passed to WP with the value my_theme_custom_var and if it is and has the value of css then it includes the style.php file which is our dynamic CSS file. Then the code exits which stops any other functions from happening other wise the whole home page is outputted along with the style.php file, which isn’t what is needed only the file.
Now you can use any WP functions on the style.php file as it is included from the functions.php file which is a standard WP file.
Source : Will Norris
| (3 votes, average: 5.00 out of 5)
Loading ...
David GS
Feb 10th 2010 @ 6:14 pmHi Jeremy,
I didnt see another option for contact you but I just wanted to say thanks for all your effort with the techozoic theme you have been working on. I created a site teaching people how to set up a fairly basic wordpress “site” (www.EssentialWordpressSkills.com) and use your theme as the standard by which all other themes should be compared to. Its had some positive feedback so far but most of the credit goes to you.
All the best,
DGS
Tod
Apr 18th 2010 @ 6:48 pmIf the first part allows wp to accept a new variable in a query called my_theme_custom_var…
and the second part checks if a query is passed to WP with the value my_theme_custom_var…
then what/when/how is the query?
Jeremy Clark
Apr 20th 2010 @ 8:25 amThe query is this
and you can use it to call your stylesheet like this.
Tod
Apr 18th 2010 @ 7:10 pmCould this simpler code work? (or perhaps it’s missing a piece of the puzzle)
function include_external_php () {
include(TEMPLATEPATH . ‘/style.php’);
exit;
}
add_action(‘template_redirect’, ‘include_external_php’);
Jeremy Clark
Apr 20th 2010 @ 8:30 amI don’t think that would work it would include the code on every call made to a template file. So with the main page most likely on the header.php index.php footer.php sidebar.php. The above code only includes the file when it’s called with the query.
Ethan
Apr 23rd 2010 @ 10:05 amIf I wanted to create an array that would be say Footer html how could I set it up so that people could enter urls into the field?
Jeremy Clark
Apr 23rd 2010 @ 10:25 amYou’ll need to set up a theme options page. I have a tutorial here.
Mark
Jun 30th 2010 @ 6:18 pmI am using this exact code to do the same thing. However when I look at what files the page is loading I see that it is loading the style.php file twice? Any ideas why? It is only called in the header once.
Thanks,
Jeremy Clark
Jul 1st 2010 @ 11:10 amHi Mark
Do you have a link to download the theme so I could take a look at the code for you and let you know. I haven’t seen this issue before.