Dynamically generate static CSS files using php

If you are a premium theme developer, there may be times when you will need to generate dynamic css/js files to be used inside your theme. An example to this is when you want the users to be able to change certain aspects of the CSS including colors, backgrounds, padding, borders etc, or add their own css classes/id’s.

[sub]Introduction[/sub]
There are a few popular approaches that theme developers used, including directly inserting the css code inside header.php, or call it from a style.php file. Most of these approaches have been explained by Ivan on The best way to create dynamic CSS for your WP theme.

But these approaches have problems of its own. For example, inserting css directly skips the wp_enqueue_style and still adding a few PHP calls to the header everytime the page loads; or using style.php would not only adding more PHP calls, but also require the server to load WordPress twice which is a no-no according to Otto – Don’t include wp-load, please. Worse of all, none of these methods provide an ideal environment for cache plugins like W3 Total Cache. Ultimately, nothing beats the old school way which is a static css (e.g. styles.css) which is then enqueued inside functions.php – and that’s the direction I’m going with this tutorial.

[sub]The method[/sub]
1. Create a styles.php file containing your css codes. Below is just an example.

/*----------------------  Body --------------------------*/
body {	 
	background:<?php echo $data['body_background_color']; ?>;
	color:<?php echo $data['body_font']['color']; ?>;
	font-family: <?php echo $data['body_font']['face']; ?>;
	font-size: <?php echo $data['body_font']['size']; ?>;
}

Notice that we have none of the bloated header("Content-type: text/css"); or include '../../../../wp-load.php';. Also, since I’m using the SMOF, my serialized options data can be called using $data['id']. Yours might look a little different, for example get_option('my_body_color').
 
2. Create a function to generate the static css file using styles.php

We are going to create a function that generates a static css file, then place this file inside our theme folder. This function is written inside admin-functions.php of the SMOF.

function generate_options_css($newdata) {

	$data = $newdata;	
	$css_dir = get_stylesheet_directory() . '/css/'; // Shorten code, save 1 call
	ob_start(); // Capture all output (output buffering)

	require($css_dir . 'styles.php'); // Generate CSS

	$css = ob_get_clean(); // Get generated CSS (output buffering)
	file_put_contents($css_dir . 'options.css', $css, LOCK_EX); // Save it
}

Since that’s more than a few lines I’m going to explain them by bits.

  • $newdata is the input which the function will process. Here I am converting the variable to $data so that I can use it inside styles.php. More on that later.
  • $css_dir defines the folder of which your css file will be stored.
  • ob_start() , ob_get_clean() – these are the two magic functions that will capture whatever was called inside styles.php, and store them inside $css.
  • Finally, your newly generated css codes will be printed on a file called options.css using file_put_contents()

 
3. Using the function
This is the most important part. The rule of thumb is, the css file MUST ONLY be generated when the variables inside styles.php were changed. Otherwise, this defeats the purpose of taking the trouble of generating a static css file to minimise the number of PHP calls on page load. For this tutorial, I’m just going to explain how it is done inside SMOF. It should serve as a guide for usage in other areas e.g. plugins or shortcodes – I’d probably write another tutorial for that in the future.

I’m going to hook the function everytime the user saves or resets the options, using this line of code:

generate_options_css($data); //generate static css file

This went into two areas inside admin-interface.php of the SMOF. The first area is when the ajax save action is called somewhere on line 710, after update_option(OPTIONS, $data);. The final code would look like this:

update_option(OPTIONS, $data);	
generate_options_css($data); //generate static css file

The second area is when the user resets the options, somewhere on line 35-37, after update_option(OPTIONS,$defaults);. The final code would look something like this:

$defaults = (array) $options_machine->Defaults;
update_option(OPTIONS,$defaults);
generate_options_css($defaults); //generate static css file

 
4. Register your static CSS file and enqueue it to your header.
From this point forward, everything else is pretty much straight forward. Here’s a little snippet of my functions.php file.

function themename_enqueue_css() {
wp_register_style('options', get_template_directory_uri() . '/css/options.css', 'style');
wp_enqueue_style( 'options');
}
add_action('wp_print_styles', 'themename_enqueue_css');

DONE!

As a wrap up, this is the summary of this tutorial:

  • Create a function to generate a static css file
  • Call this function only when the options were changed
  • Register and enqueue your static css file in your themes’ functions.php file.

And why this is better:

  • Minimise the number of PHP calls everytime the page loads
  • Avoid using wp-load that loads WordPress twice.
  • Cleaner and standard-driven coding.

I hope you find this article useful and help you to spawn more creative ways to implement it inside your themes, plugins, shortcodes, and widgets. Note that this same trick can be used for other types of files including, yes, javascript!. :)

Discussions — 64 Responses

  • shawn November 22, 2011 on 11:57 pm

    I’m not seeing any of this code in the smof files that you mention. Do you have a modified vs. of smof that incorporates these changes?

    *btw, loving smof. Having been a woothemes user for years now it is nice to see a setup that I can use in my own themes and the dynamically generated static css file is a huge addition.

    thank you

    Reply
    • Syamil shawn November 23, 2011 on 2:52 am

      Thank you for comment Shawn. Just sharing what I said to you earlier on Twitter in case someone else is wondering the same thing:

      The reason that I didn’t port this modification on SMOF before is because of the lack of documentation – which would only confuse the people who wants to use SMOF in their themes. Therefore I decided to write this article in advance before this mod is added into the next release.

      Hope that helps :)

      Reply
      • shawn Syamil November 23, 2011 on 7:34 am

        Looking forward to the updated vs. as I tried what you posted here but it didn’t seem to work. I’m probably missing something stupid, so better to wait than to go crazy trying.

        One thing that is making it more difficult for me is that I am using this in a plugin vs. a theme so the paths are totally different.

        It’s a weird scenario where I am creating a bbpress ‘theme plugin’. Basically a theme that is in a plugin –long story but is the right way of doing this particular project according to the dev JJ.

        This means I am trying to generate a css file in a weird location.

        plugin structure:
        /my-plugin/
        –/admin/ — smof
        –/theme-name/css/ – where I am trying to save the css file created
        –functions.php – includes calls to admin, smof works great with tweaks

        also:
        I noticed that smof is quite different than the original vs. Are you planning on adding his sanitization functions later?

        Reply
      • shawn Syamil November 23, 2011 on 7:45 am

        should have mentioned the bug I ran into:

        When I add generate_options_css($data); //generate static css file in the 2 spots you mention and reload the plugin it shows up fine. However if I click save, nothing happens, spinner just spins. No errors or anything just spinning

        Reply
  • Syamil November 23, 2011 on 3:35 pm

    Shawn, I took a look at your codes and I saw a few errors. Here’s your codes updated http://dl.dropbox.com/u/45581457/my-plugin.zip

    1 – You need to use generate_options_css($defaults); and not generate_options_css($data); for the reset.

    2. Use paths to your plugin and not URL. Try WP_PLUGIN_DIR or plugin_dir_path($file) instead of WP_PLUGIN_URL

    3. styles.php should not have undefined id’s, otherwise that will spit out errors in wp_debug

    Additionally, I also fixed the header location after reset to “optionsframework” (line 39 admin-interface.php)

    To avoid future problems, I would also suggest you to change this header location to something else e.g. myplugin, since it may conflict with themes that also uses optionsframework in their themes.

    Hope that helps :)

    Reply
    • shawn Syamil November 23, 2011 on 8:27 pm

      Wow, thank you so much for taking the time to help me out with this. I did download the new zip but noticed the file that has all the paths and initializes the plugin isn’t in the zip. There are the two folders admin/ my-custom-theme/.

      Can you send me the modified plugin file with the changes you are talking about?

      *I spent a lot of time reading through your plugin and it’s really really nice. Having used woo for so long it was cool to see how you kept the same structure but added some cool functionality at the same time

      Reply
  • Syamil November 23, 2011 on 9:46 pm

    My bad. I was forking it inside TwentyEleven theme, completely forgotten that it was supposed to be a plugin!

    Here’s the updated code complete with correct file paths and some examples inside styles.php http://dl.dropbox.com/u/45581457/1-my-plugin.zip

    Also just as a reminder since you’re using SMOF as a plugin, I would strongly suggest you to change filepaths definitions e.g. ADMIN_PATH etc and also change the prefixes like of_ , of- , optionsframework etc. You know the drill :)

    Reply
    • shawn Syamil November 23, 2011 on 10:22 pm

      thank you.
      I’ll make all the changes from the new files and see if I can get it working. Basically the biggest problem I am fighting is with my file paths, as I call the function to enqueue the css in a custom place, and a few other issues.

      I’ve been working my way through it this morning, and will check the new files to see what i have been doing wrong.

      I seriously appreciate this help!

      Reply
    • shawn Syamil November 23, 2011 on 10:39 pm

      Got it all sorted out, just a couple of tweaks and it is working perfectly now!

      As to changing the paths:
      Is it simply a matter of doing a find and replace for the following in all files?
      of_
      of-
      optionsframework

      Are those 3 the only ones required to change?
      thinking of doing a simple find and replace across the entire admin directory.

      Reply
      • Syamil shawn November 23, 2011 on 10:49 pm

        As far as I can remember, yup. Don’t forget the css and js files too. :)

        Reply
  • AJ Clarke November 27, 2011 on 10:32 pm

    Awesome stuff…

    The only thing I would change is the add_action function from init to ‘wp_print_styles’.

    add_action(‘wp_print_styles’, ‘add_my_stylesheet’);

    Then you can also remove the if statement ;)

    So this is what it would look like:

    function themename_enqueue_css() {
    wp_register_style(‘options’, get_template_directory_uri() . ‘/css/options.css’, ‘style’);
    wp_enqueue_style( ‘options’);
    }
    add_action(‘wp_print_styles’, ‘themename_enqueue_css’);

    ;)

    Reply
    • Syamil AJ Clarke November 27, 2011 on 11:02 pm

      Hey, thanks AJ. Will update the code now :)

      Note that I used to have some problems with wp_print_styles before if I used them in plugins, so that’s probably why I seem to sticking with the habit of using init..

      Reply
  • AJ Clarke November 27, 2011 on 11:08 pm

    I see. Honestly, both should work just as well. I just prefer to use the WP hooks to be safe.

    Reply
  • AJ Clarke November 27, 2011 on 11:27 pm

    I also like to add my code to styles.php like this example:

    if(!empty($data[‘body_link’])) { echo ‘#main a{color:’.$data[‘body_link’].';}'; }

    Just because I wouldn’t normally have any default colors set in the admin.

    Reply
    • Syamil AJ Clarke November 28, 2011 on 12:07 am

      Yep, that’s a good example of how you can call the options if the default value is empty. Otherwise it would naturally give you “undefined index” error if WP_DEBUG is turned on.

      Reply
  • AJ Clarke November 28, 2011 on 12:21 am

    Exactly. And Themeforest doesn’t like those “errors” (not really errors, but you know…)

    Reply
    • Syamil AJ Clarke November 28, 2011 on 12:42 am

      I will remember those, thanks AJ :)

      If you have a lot of default empty values, this should work too :

      $defaultArr = array ('id_1', 'id_2', 'id_3', 'etc');
      
      foreach ($defaultArr as $default) {
      	if(empty($data[$default])) $data[$default]) = '';
      }
      

      There’s also a hack to suppress these errors altogether, but I’d personally not recommend it.

      Reply
  • MichaelHi December 4, 2011 on 4:45 pm

    This is great, for some reason i’ve to save changes twice otherwise the options.css file is not updated.

    Reply
  • MichaelHi December 4, 2011 on 4:54 pm

    Also another problem could be the file permissions, maybe a solution could be:

    1.- check if the file options.css can be created.
    2.- if not, include the code in the header

    Reply
  • Syamil December 4, 2011 on 5:51 pm

    @MichaelHi Thanks for reporting on that issue. Another person also reported the same problem, but I have yet to find a solution or find out why it happened. Perhaps it would help me debug if you can let me have a peek at your codes?

    That file permission check is a good idea, but if I’m not mistaken as long as the directory is set to 755 (like most WP installation requires) it should be fine.

    Another route we could take is probably warn the users to set file permissions correctly or otherwise the writing function won’t work.

    Cheers :)

    Reply
  • MichaelHi December 5, 2011 on 7:46 am

    Hi Syamil

    Well apparently adding global $data to the generate_options_css function solve the problem, i’m not sure why but it’s working for me.

    function generate_options_css($newdata) {
    global $data;
    $data = $newdata;
    …….

    Reply
    • Syamil MichaelHi December 5, 2011 on 8:41 am

      That does seem a little weird, but I’m glad if that solved your problems.

      The next release of SMOF will have this function ported to it, so maybe you can compare it later with your codes. For now, I think it’s safe to stick with your current hack as long as long it works correctly.

      Reply
  • Robert January 5, 2012 on 5:25 pm

    The file premission is a big issue, I suggest to do a fall back to otto’s recommendation if file permission is not set it will load for example ?load=skins / ?load=scripts (instead of using style.php)

    Also, you can block all the wp_debug errors on default values if not exist by appending @ to it, i.e

    global $mframe;

    return @$mframe[‘defaults’][$key];

    Reply
    • Robert Robert January 11, 2012 on 2:36 am

      Now with new findings I ended up with ottos method, for several reasons, here are the best methods to load css into your theme frame:

      1. Insert entire css into tag using wp_head call:
      This is a good method if you have small CSS to add, when you expand a framework you will never know when you will need to add more options or less of them, frankly I’m with the latter, the more is the better, i.e change more colors and allow control of the theme.
      But wait, you also need to prepare yourself for other demands to be developed inside your frame, for example xml files can’t be loaded in the head and are required to be loaded differently, i.e via load=xml , js files are the easiest ones to use this 1# method, because you really can just pass it in the head through a variable
      2. Using template_redirect hook to create CSS output based on a special GET variable.
      This is a must method because of the flexibility it gives you to load not just the bloated CSS but xml and js if needed. The CSS i have is about 1 screen size and just can’t be added in the 1st method, even being compressed CSS it looks too much to be used in the head.
      Also, a worpress call takes only 300-350ms to load so its fairly small size if the other benefit is having more options then why not. but when it’s 2 calls that already makes it 700ms which if you want to make your site load less than 1.5-2 sec can be a problem.
      But wait, wordpress itself uses this method for their back end, i.e:
      wp-admin/load-styles.php?c=1&dir=ltr&load=admin-bar,wp-admin&ver=7f0753feec257518ac1fec83d5bced6a
      not just for the CSS but JS as well, but I think this method is cached somehow as well, see the c=1 might mean its cached, but after checking with pingdoom tools it appears to load for 300-350ms as well so…
      3. Write dynamic CSS to a file, link to the file in the head.
      This can be a nice plugin addition but not as a main solution if you decide to distribute an application simply because it’s not a 100% proof and you will probably end up getting more questions from users who this wont work if it was a stand alone solution.
      I ended up removing this solution simply because it was bloating my compact frame code but in the same time simply can’t be the main solution but only the addition.

      Overall the use of wordpress itself in the backend blows the whisle for me as a confirmation if you just end up with too much CSS.

      Reply
    • Syamil Robert January 11, 2012 on 3:23 am

      Thanks for taking the time to write those down. When I wrote the article, I was also expecting people to share some of their views about the method, since it diverges from the traditional way of dealing with CSS options.

      I am fairly intrigued by the second method you mentioned. Do you have a link somewhere that could explain this method a fair bit more? To my understanding, using /styles.php?c=1… only loads the ‘correct’ CSS needed, but not necessarily dictates what properties i.e. it doesn’t actually change any CSS properties based on the requests, it only loads the ‘right’ CSS. I may be a little confused here so I’d appreciate if you can shed some light on it.

      Regarding the method not being 100% proven, indeed, you are right. I have released a theme in which this method was used, and I found several problems with it, as follows:

      1 – File permission for options.css must be set to 0644 ( note that you should already have a ‘blank’ options.css in your theme to do this). A workaround for this is fairly simple – tell the user to change permission to 0644, then revert it back to whatever it was if they’re concern about security. Not the most elegant solution I agree, but it’s not really that hard to do as well.

      2 – Some servers blocks the use of file_put_contents() functions. I have personally never encountered a server that does this, but I’ve read on a few forums where users reported about it. In this case, having a fallback inline CSS would be nice.

      3 – Currently this will work on a MU setup, but it will create problems if two or more blogs are using the same theme. I have been testing a few methods to get around this, which detects if the theme was installed on an MU setup, the options.css file would be saved in an individual blog’s folder. There are also a few other methods that I’mm experimenting with, but looking ahead, there is no immediate need to release it yet since for a theme to be used in MU setup, the user needs to buy a Developer’s license which costs a lot. However, if you’re planning to use this in a plugin or a free theme, then it should be worth your time trying to make it work.

      Anyway, thanks again for trying the method and coming back with a really valuable feedback. I really appreciate it.

      Cheers

      Reply
  • Syamil January 13, 2012 on 7:14 am

    Robert,

    Thanks for your valuable comments and for the information. :)

    Your posts triggered me to try more workarounds to the problems at hand. Currently I’m working on a way to check for write permission on the options.css file, and if it’s not compatible with the required permission we need, the options panel will ask the user to set this before they can alter the CSS settings.

    That is in my opinion is a more practical method to warn user to set the permission correctly, and save us from all the trouble to provide support.

    As for stats, I don’t think the data I have would be very relevant to you – but I have had one customer with the write-permission problem, out of 60 who purchased the theme.

    Cheers

    Reply
    • Robert Syamil January 15, 2012 on 4:02 am

      np :)

      actually, my options.css is skins.css.php it loads all colors in there and then possibly in the future an end use can add additional options in the theme options (via blocks) and change the color sets himself from the back end, crazy i know…..

      but anyway, you can also try the php chmod() function that trys to chmod the files if it has access it might work i donno.

      yes it can be a great method if the file is not a must have file, in my case its a must have file as all my colors are loaded seperatly into skins file which also skins colors come in there as well, and custom modified colors too.

      it’s a 1.6% fail rate, useful.

      Reply
  • Andrey January 18, 2012 on 10:10 pm

    Saving settings in css only happens when I click “Save All Changes” a second time. In what may be the problem? Thank you.

    Reply
  • Trish February 1, 2012 on 9:42 pm

    I made al this tutorial 3 times and i cant get it working, the options.css is only created when i click ‘options reset’, and when i save changes normally nothing changes inside options.css

    any thoughts?

    Reply
    • Syamil Trish February 2, 2012 on 2:09 am

      You can take a look at the Burette theme, it uses this method to create options.css – I can’t personally comment on why it didn’t work for you without actually seeing the code. :)

      Reply
      • Trish Syamil February 2, 2012 on 5:06 pm

        Well i found the issue, it was something stupid, delete the coment if you want :S

        Otherwise, thanks for all your work with this framework, its amazing.

        Reply
      • Syamil Syamil February 2, 2012 on 6:52 pm

        It’s not stupid, we have all been there sometimes :)

        Reply
  • AnyDog February 9, 2012 on 6:52 pm

    Hi Syamil,
    I’m right in the middle of customizing your SMOF, and I also included this dynamic generating of static css.
    I had error while generating css, which I fixed with global $data … I’m making WP e-commerce theme, so perhaps there is something in that plugin that interferes …

    Anyway, great work and thanks for sharing your knowledge …

    Reply
    • Syamil AnyDog February 10, 2012 on 4:05 am

      Hey, great to hear that. If you have anything to share just let me know.

      I’m also in the middle of upgrading this method so that it works better with Multisite setup.

      Basically, I wanted to move options.css to the blogs.dir/#blogid folder if the theme is installed on a multisite setup, so that each individual blog will have their own options.css instead of sharing it from the same theme. It will be based off the codes I found from the Upthemes Framework (look at line 119-152). It’s still in the infancy stage though.

      Cheers

      EDIT: It’s here if you want to check it out http://snippi.com/s/2yqhb34
      Change the codes in step #2

      Reply
      • AnyDog Syamil February 10, 2012 on 10:55 am

        Great, well, I’m tempted to try something with upload images. I would like to get image in theme with wp_get_attachment_image, so I’,m trying to get attachment id into options save … Any idea how to do it ?

        Also, I would like to actually delete uploaded image (attachment AND “silent post” – optionsframwork post type)
        I don’t have the nerv to ask you to look into that … ;)

        I will try to do it, since I believe that’s the way image and media should be handeled, so if I’ll make it, I will surely share it with you …

        Reply
      • Syamil Syamil February 10, 2012 on 5:23 pm

        I’m not sure if this answers your question, but this post could probably help you out with the image attachment id.

        I don’t quite understand what you meant by the “delete uploaded image”. You can actually delete the image either from the image upload popup box or from the media library page. However you can’t delete images uploaded using the “upload” type options – this was meant for special cases like favicon which “media” type can’t handle.

        I would recommend you to open a thread on our Github page so I can assist you better – https://github.com/sy4mil/Options-Framework/issues

        Cheers :)

        Reply
        • AnyDog Syamil February 10, 2012 on 9:58 pm

          I meant – when I hit “Remove” button (it means I already uploaded image and saved options), it triggers, for instance, wp_delete_attachment function.

          And, for the uploaded images, since I added image size with add_image_size(), I would like to know, where do you save options for uploaded media … If I save attachment ID instead of image URL, I could call image with wp_get_attachment_image with that ID …

          Ok, I won’t bloat comments anymore … See you on Github … Maybe …
          Thanks again for all your help … I’ll sure try to contribute

          Reply
  • Parapxl September 16, 2012 on 11:48 pm

    Great job on this! If you are using the Advanced Custom Fields plugin with the Options add-on then the hook you want use for creating your css file is:

    add_action(‘acf_save_post’, ‘generate_options_css’, 0);

    Cheers!

    Reply
  • Jeton R October 28, 2012 on 6:31 pm

    I really like this way of creating the options.css and I know its a bit odd to ask for help when I am using NHP Framework for options which uses Transients API for database update and I have lost more than 10 hours on trying to get it work but no luck.. @Syamil If you give me a hint I would really appreciate it.

    Reply
  • gerald@wpcustoms.net November 13, 2012 on 4:46 pm

    This is an excellent workaround. Thanks for the guide. The only problem is that you need to set writeable access for the options.css file. This is no problem for web developers but 95 of 100 clients are lost with setting file permissions.
    Do you have any ideas how to get around this step?
    cheers

    Reply
    • syamilmj gerald@wpcustoms.net November 13, 2012 on 5:16 pm

      Hi Gerald, if you’re doing this on WordPress then please have a look at this article I just wrote recently. The last step from the first snippet shows how you can set the file permission. http://aquagraphite.com/2012/11/using-wp_filesystem-to-generate-dynamic-css/

      Otherwise a PHP chmod would just work fine.

      Cheers

      Reply
      • gerald@wpcustoms.net syamilmj November 13, 2012 on 11:15 pm

        thanks Syamil – I replaced the file_put_contents line with the WP_filesystem call from your linked post. It all makes sense but it does just nothing. no errors, no file update. Currently I have no idea where it fails – may be due to last 12h in front of the editor…

        Reply
        • syamilmj gerald@wpcustoms.net November 14, 2012 on 7:43 pm

          Most of the times it’s just the paths. Make sure you’re pointing to correct filename/dir/url etc. Double check everything :)

          Reply
  • James Sutherland March 1, 2013 on 4:26 pm

    Hi Syamil,

    Great tutorial, however I’m totally stuck. None of the files you seem to mention are in the SMOF I downloaded form github, for instance I can’t find the file admin-functions.php. I’ve looked in the file functions.admin.php but the following code is not present:

    update_option(OPTIONS,$defaults);

    Can you help me figure out how to get this functionality working?

    Thanks friend!

    James

    Reply
    • syamilmj James Sutherland March 1, 2013 on 6:58 pm

      They should be in functions.interface.php now

      Cheers

      Reply
      • James Sutherland syamilmj March 2, 2013 on 12:32 am

        Thanks Syamil for the super quick reply. Can I confirm in the functions.interface.php the code update_option(OPTIONS,$defaults); is not in there. But the code update_option(OPTIONS, $data); is in there three times. Do you know where I would have to put the following code:

        generate_options_css($data); //generate static css file, and
        generate_options_css($defaults); //generate static css file.

        I guess the following code goes into the functions.admin.php file:

        function generate_options_css($newdata) {

        $data = $newdata;
        $css_dir = get_stylesheet_directory() . ‘/css/'; // Shorten code, save 1 call
        ob_start(); // Capture all output (output buffering)

        require($css_dir . ‘styles.php’); // Generate CSS

        $css = ob_get_clean(); // Get generated CSS (output buffering)
        file_put_contents($css_dir . ‘options.css’, $css, LOCK_EX); // Save it
        }

        Thanks so much for all your help! Plus I love your Cuvette theme and am looking to buy it over the weekend. Great work mate. You’re a real inspiration to us budding developers.

        Cheers

        Reply
  • James Sutherland March 5, 2013 on 5:38 pm

    Hi Syamil,

    I honestly can’t thank you enough for the contribution you’ve made to WordPress. It’s made my life so much easier. I’m using SMOF and only have 3 words to say ‘I LOVE IT!’.

    Any chance you can help me get this css functionality into my theme? This tutorial doesn’t seem to match up with the latest release of SMOF on Github. Thanks again buddy. I’ll patiently wait for your response.

    James

    Reply
    • syamilmj James Sutherland March 6, 2013 on 6:29 am

      I have this functionality on all of my themes, Cuvette being the latest. If you want, you can purchase that and see how I did everything in the theme :)

      Cheers

      Reply
      • James Sutherland syamilmj March 6, 2013 on 9:09 am

        Thanks buddy! I’ll go ahead an buy it today.

        Reply
        • syamilmj James Sutherland March 6, 2013 on 5:32 pm

          Cool. I hope you enjoy it :)

          Reply
  • atinder April 25, 2013 on 3:55 am

    very neat and handy snippet

    thanks :)

    Reply
  • Ian Armstrong July 21, 2013 on 10:18 pm

    A version of this tutorial that examines how to make the WP Customizer work with the new customize_save_after hook in 3.6 would be awesome.

    http://wordpress.org/ideas/topic/do-customize_save-action-hook-after-the-settings-are-saved

    It would also be a hugely valuable first of its type article!

    Reply
    • syamilmj Ian Armstrong July 28, 2013 on 7:45 pm

      Thanks for the idea, will tinker over that :)

      Cheers

      Reply
  • Nauman August 16, 2013 on 6:37 pm

    It took me a lot of time to implement but at the end I am happy with new version of SMOF and this technique of dynamics css.
    Thank you syamilmj for sharing your all hard work. You have big heart….:D

    Reply
  • Nicholas October 18, 2013 on 4:43 am

    Hey, great guide but even greater, EPIC work.

    I was wondering how does WordPress caching work to ensure that the static file can be cached by users while at the same time recached each time it is updated? since the file name is always options.css.
    I’m just used to approaches where the generated CSS file is renamed each time it is generated

    Reply
  • Saad Irfan November 17, 2013 on 7:24 pm

    Hello syamilmj i have a small question can you tell me please how i make dynamic css file in new version of SMOF because $data change with $smof_data & where is register my function of style php file because there no admin-function.php file out there in SMOF please update me on this ASAP!

    Thanks.

    Regards:
    Saad Qureshi

    Reply
  • Zam December 4, 2013 on 5:04 pm

    Hello Dear,

    First of all great work on SMOF.

    I am using it in one of my theme and with the help of this article i successfully created css having updated custom options. But i am facing a strange error. If i wanna see the changes(options like bg color and others), i have to hit Save Changes twice, otherwise it dont display the changes.

    This is what i have in function.interface.php

    elseif ($save_type == ‘save’)
    {
    wp_parse_str(stripslashes($_POST[‘data’]), $smof_data);
    unset($smof_data[‘security’]);
    unset($smof_data[‘of_save’]);
    generate_options_css($smof_data);
    of_save_options($smof_data);
    die(‘1′);
    }
    elseif ($save_type == ‘reset’)
    {
    generate_options_css($options_machine->Defaults);
    of_save_options($options_machine->Defaults);

    die(‘1′); //options reset
    }

    Can you please tell me where i am wrong with the code?

    Many Thanks,

    Reply
  • Funny Youtube January 22, 2014 on 6:17 am

    Hi there, I enjoy reading all of your post. I like to write a little comment
    to support you.

    Reply
  • it s skin power 10 February 25, 2014 on 2:08 pm

    I am sure this piece of writing has touched all the internet visitors, its really
    really pleasant paragraph on building up new weblog.

    Feel free to surf to my website it s skin power 10

    Reply
  • oopthemesq March 24, 2014 on 5:34 am

    Hello syamilmj i am using new version of SMOF, I do not understand where should I add the code

    update_option(OPTIONS, $data);
    generate_options_css($data); //generate static css file

    in the functions.interface.php your theme is also using an older version of SMOF can you help please.

    Reply
  • click here May 29, 2014 on 7:45 am

    Great blog! Do you have any tips and hints for aspiring writers?
    I’m hoping to start my own blog soon but I’m a little lost on everything.

    Would you propose starting with a free platform like WordPress or go for
    a paid option? There are so many options out there that
    I’m totally confused .. Any suggestions? Thanks a lot!

    My web page – click here

    Reply