Title: Using Theme Options in CSS
Last modified: August 19, 2016

---

# Using Theme Options in CSS

 *  Resolved [Equal](https://wordpress.org/support/users/equalmark/)
 * (@equalmark)
 * [16 years ago](https://wordpress.org/support/topic/using-theme-options-in-css/)
 * I am trying to offer some styling options in my theme options page. I have created
   theme options for the body color and this is retrievable with `<?php echo get_option('
   st_bgcolor'); ?>` which works fine when placed in my index.php file for example,
   but fails in my stylesheet which I have below:
 *     ```
       <?php header("Content-type: text/css"); ?>
       body {
       	background-color: #<?php get_option('st_bgcolor'); ?>;
       }
       ```
   
 * I have also included the following in the header.php page to call the new stylesheet:
 * `<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style-options.
   php" type="text/css" media="screen" />`
 * The stylesheet works and styles the page until I add the <?php echo get_option(‘
   st_bgcolor’); ?> which is where it fails.
 * Anybody any ideas why? Or perhaps how to fix it? Or even another way of doing
   this?
 * Thanks,

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [Jeremy Clark](https://wordpress.org/support/users/jeremyclark13/)
 * (@jeremyclark13)
 * [16 years ago](https://wordpress.org/support/topic/using-theme-options-in-css/#post-1466288)
 * It’s because the wordpress functions aren’t available on your style-options.php
   file because it isn’t included are called in any way by wordpress. The best way
   is to use a custom query in wordpress. [http://willnorris.com/2009/06/wordpress-plugin-pet-peeve-2-direct-calls-to-plugin-files](http://willnorris.com/2009/06/wordpress-plugin-pet-peeve-2-direct-calls-to-plugin-files)
 * I’ve adapted this for use in themes:
    [http://clark-technet.com/2010/01/wordpress-theme-developers-tip-call-dynamic-css-the-right-way](http://clark-technet.com/2010/01/wordpress-theme-developers-tip-call-dynamic-css-the-right-way)
 *  Thread Starter [Equal](https://wordpress.org/support/users/equalmark/)
 * (@equalmark)
 * [16 years ago](https://wordpress.org/support/topic/using-theme-options-in-css/#post-1466292)
 * Thanks for the quick response.
 * So that code that is on this page is included in the themes functions.php?
 *  Thread Starter [Equal](https://wordpress.org/support/users/equalmark/)
 * (@equalmark)
 * [16 years ago](https://wordpress.org/support/topic/using-theme-options-in-css/#post-1466296)
 * I understand why the php file will not accept WP functions however studying the
   links you have provided I am not able to understand how to get the style-options.
   php file to accept WP functions.
 * Could you explain a little further how this is done?
 * Thanks
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [16 years ago](https://wordpress.org/support/topic/using-theme-options-in-css/#post-1466300)
 * could be what jeremy is talking about, and also, imho, get_option does not actually
   output anything, it needs to be echoed:
    [http://codex.wordpress.org/Function_Reference/get_option](http://codex.wordpress.org/Function_Reference/get_option)
 *  Thread Starter [Equal](https://wordpress.org/support/users/equalmark/)
 * (@equalmark)
 * [16 years ago](https://wordpress.org/support/topic/using-theme-options-in-css/#post-1466302)
 * OK I have finally worked this one out. You need to add the following to your 
   themes functions.php file:
 *     ```
       <?php
       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;
       }
       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-options.php');
               exit;  //This stops WP from loading any further
           }
       }
       ?>
       ```
   
 * Then call the php css file with the following in your themes header.php file 
   inside `<head>`
 * `<link rel="stylesheet" href="<?php bloginfo('url'); ?>/?my_theme_custom_var=
   css" type="text/css" media="screen" />`
 * You should then be able to create a file called style-options.php which will 
   be able to accept WP functions.
 * Thanks to jeremyclark13

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Using Theme Options in CSS’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [dynamic CSS](https://wordpress.org/support/topic-tag/dynamic-css/)

 * 5 replies
 * 3 participants
 * Last reply from: [Equal](https://wordpress.org/support/users/equalmark/)
 * Last activity: [16 years ago](https://wordpress.org/support/topic/using-theme-options-in-css/#post-1466302)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics