Dynamically Generate Static CSS with PHP

[iphoenix]

I’m a huge fan of Jason’s work, and having the ability to create a child theme on some of his stuff is going to be fun. First, in my child theme I want to create a dynamic stylesheet which retrieves values from the options panel. I’ve used the same process with my Genesis child theme and NHP, works amazing. So I thought i’d try it out with Jason’s awesome new framework. Aquagraphite outlines one of the popular ways to do this at http://aquagraphite.com/2011/11/dynamically-generate-static-css-files-using-php/. I have created a custom options.php file in my child theme’s assets folder. Here is the code for the options I added:

http://pastie.org/5378493

Next, I created a style.php file inside my assets folder and copied the contents of the style.css into the .php file. I used <?php echo themeblvd_get_option( 'text_color' ); ?> to pull the options I wanted for each area. Ref:

http://pastie.org/5378519

Finally, I created my functions.php file to automatically generate a new .css file and enqueue it:

http://pastie.org/5378539

So far the code works great. My child theme automatically generates a new .css file from my .php file! There is one issue though; the option values aren’t showing up in my .css file!? Now I’m not familiar with the theme options kit, so I’m going to ask from my experience using Lee Mason’s NHP Options (http://leemason.github.com/NHP-Theme-Options-Framework/). To retrieve value for this you need to make sure you include the options framework, in the case of NHP you would use:

<?php
$options = get_option('option_name');
?>

Jason, do I need to add something like:

<?php get_options( 'themeblvd' ); ?>

to retrieve the options values for my options.php? Thanks for the help!

Topic

[Jason Bobich]

Hello,

This is a very interesting concept.

Ok, so I think the problem is pretty simple, and is what you’re already eluding to. Basically you just need to manually pull the options from the database with default WordPress functions.

The reason is because you’re trying to call themeblvd_get_option literally at the point WordPress includes the Child theme’s files, which is before anything has actually been run yet or been setup. So, themeblvd_get_option will not do anything just yet, as there is no global array for that function to pull from just yet.

The framework saves all of your theme options into a single, standard WordPress option as one big multi-dimensional array. That means you can use WordPress’s get_option to retrieve it manually. The option ID used with WordPress is a filterable text string that, by default, is generated based on the name of your current theme. So, this will correspond to the name of your Child theme.

So, at the top of your dynamic CSS file, this is how you’d retrieve these options:

$option_name = themeblvd_get_option_name();
$options = get_option( $option_name );

Or more concisely:

$options = get_option( themeblvd_get_option_name() );

And now where ever you were trying to retrieve an option like this:

themeblvd_get_option( 'whatever' )

Instead, you’d just grab it from the array you pulled like this:

$options['whatever']

[iphoenix]

nice, that’s it!

Keep up the awesome work.

[John]

Any way to make themeblvd_get_option_name work in a plugin?
thanks,
john

[Jason Bobich]

Hello John,

Sure, why not? But this all comes back to the original problem iphoenix was having. When you’re creating these WordPress plugins and child theme customizations, you need to be aware of the order in which everything is being loaded.

http://codex.wordpress.org/Plugin_API/Action_Reference#Actions_Run_During_a_Typical_Request

Any way to make themeblvd_get_option_name work in a plugin?

In this example, you’re simply asking about using a function that is present in the theme. Well, since WordPress includes plugin files before theme files, you simply couldn’t call functions from the theme out in the open from your plugin’s files because the theme’s files haven’t been included yet.

In this case, you could pick a hook that is “after_setup_theme” or later and hook your function to that. Example:

function do_something(){
	// Now you can use functions from the theme here…
}
add_action( 'after_setup_theme', 'do_something' );

http://wp.tutsplus.com/tutorials/the-beginners-guide-to-wordpress-actions-and-filters/

[John]

Thanks Jason,
I found a different way to handle this. I was running into other problems using ‘after_setup_theme’. Thanks for the resources, I have book-marked and will refer to them in the future.
Thanks for a great product and support,
John

[John]

iphoenix (or anyone),

Did you manage to get this method to work for STATIC css using themeblvd input. If so how did you determine when the themeblvd input had been changed? The code posted above seems to be for SMOF.

$defaults = (array) $options_machine->Defaults;
update_option(STYLE,$defaults);

thanks,
john

• This reply was modified 8 years, 8 months ago by Jason Bobich. Reason: Not totally sure what's being asked, but fixed display of your code

[iphoenix]

If it’s okay with Jason, I may release this on themeforest/codecanyon and you can do with it what you’d like.

[Jason Bobich]

If it’s okay with Jason, I may release this on themeforest/codecanyon and you can do with it what you’d like.

Sure, it’s all your code.

[srumery]

This method works as described. I have seen it before and I was able to get it to work as well. I am running a few more tests and would like to get this working in a multisite environment.

Jason, how would you accomplish this? First identify the $blog_id, then store the .css file in their unique content folder? If that is the case, it would be something like this “/wp-content/uploads/sites/5/custom-styles.css”. This will expose the blog id but so does storing images in the media library. Do you see anything wrong with this? How would you do it?

[srumery]

One more question on this topic… It’s important to make sure this only fires off when the theme options are saved. Checking is_admin() isn’t enough. What is the proper hook to make sure the css file saving function is only executed when the theme options page is saved?

[Jason Bobich]

@srumery Apologies, but this whole concept is pretty far out of the realm of support. I’m honestly not very familiar with what’s going on here.

What is the proper hook to make sure the css file saving function is only executed when the theme options page is saved?

You could check what’s currently in $_POST to see if the options form is being submitted. You could maybe combine this with a check for the current wordpress page.

http://codex.wordpress.org/Function_Reference/get_current_screen

[iphoenix]

I did not make it for just an options update, but is a good idea. If you use an “assets” folder and place style.php in your assets folder. Here is the function I used:

function generate_style_css($newdata) {

    $data = $newdata; 
    $php_dir = get_stylesheet_directory() . '/assets/';
    $css_dir = get_stylesheet_directory() . '/'; //; // Shorten code, save 1 call
    ob_start(); // Capture all output (output buffering)
    require($php_dir . '/style.php'); // Generate CSS
    
    $css = ob_get_clean(); // Get generated CSS (output buffering)
    file_put_contents($css_dir . 'style.css', $css, LOCK_EX); // Save it
}
add_action( 'wp_head', 'generate_style_css' );

You could change the last line to something where the options update:

add_action( 'themeblvd_update_options', 'generate_style_css' );

• This reply was modified 8 years, 7 months ago by iphoenix.
• This reply was modified 8 years, 7 months ago by Jason Bobich.

[srumery]

Thank you Jason and iphoenix.

I ran print_r($_GET) to see that was stored there and the result was:
Array ( [page] => CHILD_THEME_NAME [settings-updated] => true )

Based on that I am using the following code to check when the file should be executed:
if ( is_admin() && $_GET['page'] == 'CHILD_THEME_NAME' && $_GET['settings-updated'] == true )

iphoenix, I tried to hook into the theme options update with your suggestion but it wasn’t firing.
add_action( 'themeblvd_update_options', 'FUNCTION_NAME' );

Where did you find the name of the hook? Is there is list of all the Jump Start framework hooks?

[John]

I used this hook:

$jma_option_name = themeblvd_get_option_name();
add_action( 'update_option_' . $jma_option_name, 'generate_style_css' );

[Jason Bobich]

I used this hook:

$jma_option_name = themeblvd_get_option_name();
add_action( ‘update_option_’ . $jma_option_name, ‘generate_style_css’ );

Perfect!

add_action( 'update_option_' .themeblvd_get_option_name(), 'generate_style_css' );

[Author]

Replies