Question

I would like to set my styling-colors of my wordpress-theme with theme-options. My problem is, how do I get the color-value of theme options into my css? I know where the theme-options values are stored, but how can I connect this with my css?

Answer 1

1. Use PHP to write a CSS file every time theme options change (a CSS cache).

   You can also take advantage of CSS preprocessors like Less or Sass, which compile the CSS for you.

   Sample code, assuming you are using the WP options API:

   $theme_options = get_option('my_theme_options');
   
   // previous hash
   $oldHash = get_transient('my_theme_options_hash');
   
   // hash representation of your current theme options
   $currentHash = md5(var_export($theme_options, true));
   
   // compare hashes and regenerate if necessary
   if($oldHash !== $currentHash){
   
     // compile/write your CSS to a file here
   
     // update hash and make it expire after 14 days
     set_transient('my_theme_options_hash', $currentHash, 60 * 60 * 24 * 14);
   }
   

2. Put inline CSS code in your theme header:

   <style>
     <![CDATA[]]>
      body{ 
        background-color: <?= get_option('my_theme_color'); ?>; 
      }
     ]]>
   </style>
   

3. (Worst possible option) Turn your stylesheet into a PHP script that outputs text/css. This is bad because you’re forcing your server run WordPress twice for every user page request. You could call a script that only loads basic WP components, but it’s still going to be slower than using a static CSS