Documentation

Everything you need to use WP Theme Options

Dynamic CSS File

If you want to create a dynamic CSS file, for example, changing colors or grid sizes, this is a great functionality for you.

Changing the javascript file

This functionality is already integrated with the Theme Options, you just need to change this piece of code:

$.ajax({
  url : formURL,
  type: "POST",
  data : postData,
  success:function(data, textStatus, jqXHR) { 	
    //Dynamic CSS Generator
    /*$.post(ajaxurl, {
      action: 'fusecoders_createCSSAjax'
    }, function (result) {
      if(result === '1') {
        FuseCoders.optionsModal.opens(fuseSucessSave,FuseCoders.optionsModal.autoClose(fuseSucessSave));
      } else {
        FuseCoders.optionsModal.opens(fuseErrorSave,FuseCoders.optionsModal.autoClose(fuseErrorSave));
      }
    });*/
    
    //Comment the next line if you activate the Dynamic CSS Generator
    FuseCoders.optionsModal.opens(fuseSucessSave,FuseCoders.optionsModal.autoClose(fuseSucessSave));
  },
  error: function(jqXHR, textStatus, errorThrown) {
    FuseCoders.optionsModal.opens(fuseErrorSave,FuseCoders.optionsModal.autoClose(fuseErrorSave));
  }
});

To this one (basically is just remove the comments):

$.ajax({
  url : formURL,
  type: "POST",
  data : postData,
  success:function(data, textStatus, jqXHR) { 	
    //Dynamic CSS Generator
    $.post(ajaxurl, {
      action: 'fusecoders_createCSSAjax'
    }, function (result) {
      if(result === '1') {
        FuseCoders.optionsModal.opens(fuseSucessSave,FuseCoders.optionsModal.autoClose(fuseSucessSave));
      } else {
        FuseCoders.optionsModal.opens(fuseErrorSave,FuseCoders.optionsModal.autoClose(fuseErrorSave));
      }
    });
    
    //Comment the next line if you activate the Dynamic CSS Generator
    //FuseCoders.optionsModal.opens(fuseSucessSave,FuseCoders.optionsModal.autoClose(fuseSucessSave));
  },
  error: function(jqXHR, textStatus, errorThrown) {
    FuseCoders.optionsModal.opens(fuseErrorSave,FuseCoders.optionsModal.autoClose(fuseErrorSave));
  }
});

The dynamic CSS

To make it work you just need to put your theme CSS in the file functions.style.php, this will rewrite your theme style.css, so be careful, because you may lose all your CSS.

Check the example:

<?php
  function fuseOptions_generateCSS() {
    global $fuseData;
?>

body {margin:0;}
p {color:<?php echo $fuseData['themeoptions_colorID1']; ?>;}

<?php } ?>