WordPress Theme Developers Tip – Call Dynamic CSS the Right Way
By Jeremy Clark
guides, tech, wordpress | 
development, php, theme | 2,310 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
Related posts:
- WordPress Theme Dev Tip – Dynamic Stylesheets
- WordPress Theme Options Framework Ver 2
- WordPress Theme Options Framework
- CSS Tip: Image Rollover effect
- Optimize your WordPress theme for Search Engines – Part 1
| (4 votes, average: 4.75 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.
Daniel
Nov 8th 2010 @ 4:50 amThank 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?
Daniel
Nov 9th 2010 @ 2:05 pmActually… just found the dynamic css works in IE but not in Firefox. Any thoughts?
Jeremy Clark
Nov 11th 2010 @ 4:46 pmDo you have a site that this is happening on that I could look at.
Daniel
Nov 12th 2010 @ 12:00 pmI 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.
web development company India
Nov 12th 2010 @ 5:22 amgreat tips thanks for sharing here
Martin
Apr 16th 2011 @ 8:07 amThe above code only includes the file when it’s called with the query!