This solution should no longer be used. After further research and reading other’s suggestions, the ideal solution is to just output the css directly to the head section of your code.
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.
[php light=”true”]
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;
}
[/php]
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.
[php light=”true”]
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
}
}
[/php]
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
By David GS February 10, 2010 - 6:14 pm
Hi 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
By Tod April 18, 2010 - 6:48 pm
If 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?
By Jeremy Clark April 20, 2010 - 8:25 am
The query is this
and you can use it to call your stylesheet like this.
By Tod April 18, 2010 - 7:10 pm
Could 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’);
By Jeremy Clark April 20, 2010 - 8:30 am
I 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.
By Ethan April 23, 2010 - 10:05 am
If 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?
By Jeremy Clark April 23, 2010 - 10:25 am
You’ll need to set up a theme options page. I have a tutorial here.
By WordPress Dynamic CSS « Equal Mark - Mark Wilkinson is Equal Mark – WordPress Consultant and Web Developer April 30, 2010 - 12:27 pm
[…] Some code from clark-technet.com […]
By Mark June 30, 2010 - 6:18 pm
I 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,
By Jeremy Clark July 1, 2010 - 11:10 am
Hi 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.
By WordPress Dynamic CSS | Equal Web Creative July 17, 2010 - 3:07 pm
[…] Some code from clark-technet.com […]
By Daniel November 8, 2010 - 4:50 am
Thank you for this… I’ve included your code in my files but it doesn’t seem to work. When I navigate to my blog and view the page source I see:
When I follow the href link I get the following:
#header-wrapper {
background: #222;
}
So everything seems to work… but this doesn’t change the background color. Just to be sure I hard-coded a css file with the same style and it does change the background color. Any thoughts?
By Daniel November 9, 2010 - 2:05 pm
Actually… just found the dynamic css works in IE but not in Firefox. Any thoughts?
By Jeremy Clark November 11, 2010 - 4:46 pm
Do you have a site that this is happening on that I could look at.
By Daniel November 12, 2010 - 12:00 pm
I think i figured my problem out… I didn’t include the document type at the start of the file:
Apparently the version of IE (7) I run doesn’t require this header but my version of Firefox (3.6) does. So this fixed the problem. Thanks again for this really useful tip on dynamic css.
By web development company India November 12, 2010 - 5:22 am
great tips thanks for sharing here
By Martin April 16, 2011 - 8:07 am
The above code only includes the file when it’s called with the query!
By Dynamic CSS stylesheets - Wordpress | Zyad Sherif August 18, 2012 - 4:46 am
[…] Call Dynamic CSS the Right Way […]
By Sleek January 2, 2013 - 6:38 am
This is actually not the ideal way of handling this as Ivan points out here:
http://vatuma.com/tutorials-tips-and-tricks/for-developers/creating-dynamic-css-for-wp-theme.html/comment-page-1#comment-9036
“This (method mentioned here) avoids the file writing problem, but now it’s not only making an extra server call, but it’s also loading all of WordPress up again, which creates a higher server CPU impact”
By Jeremy Clark January 4, 2013 - 9:01 pm
Yes I’ve stopped using the method as well, after reading Otto’s comments on performance of this and other solutions like it. Simply outputting to the head section is not ideal but far better a solution than any other.