Custom CSS without css.php file

Question

There’s two ways that this can be done.

Write CSS File

The first option would be to write your CSS file after the user chooses the custom font. I’m guessing that your theme will have an options panel of some sort. When the user submits the data, the new CSS file would be created using that data and any other data that your options panel creates.

The following is a function that I’ve used for something similar. It checks to see if the proposed contents of the new file are different from the existing file and saves the new data if necessary. You would need to modify this, especially as this does no data processing. This may or may not work for your situation, but it’s worth taking a peak

/**
 * Determines if a Custom CSS file needs to be updated and if it can be updated
 *
 * @params string $css_file_on_server Path to CSS file of interest on server
 * @params string $new_contents Contents from the $_POST variable
 * @params string $name Name of the file being changed
 * @since r30
 * @return boolean Returns true if content was updated, false if it was not; it also records errors in the errors array
 */
function prefix_process_custom_css($css_file_on_server, $new_contents, $name){
    global $errors;

    // Get the contents of the CSS file on the server and convert it to a dechex representation
    $css_file_on_server_contents = strtoupper(dechex(crc32(trim(stripslashes(file_get_contents($css_file_on_server))))));

    // Put new contents in same dechex format
    $new_contents_representation = strtoupper(dechex(crc32(trim(stripslashes($new_contents)))));

    // Compare contents
    if ($css_file_on_server_contents != $new_contents_representation) {
        // Stripslashes
        $new_contents = stripslashes(($new_contents));
        // Make sure file is writable
        if (is_writeable($css_file_on_server)) {
            // Write file
            if(file_put_contents($css_file_on_server, $new_contents)){
                return true;
            }
            else{
                $errors[] = __('An error occurred while trying to write the "'.$name.'" CSS file.');
                return false;           
            }
        }
        else
        {
            $errors[] = __('The "'.$name.'" CSS file on the server is not writable. Check the permissions on the file and try again.');
            return false;
        }   
    } 
    else {
        return false;
    }
}

Internal Style Sheet

My other recommendation would be to use an internal style sheet for the dynamic data. You would load your static CSS content in an external style sheet, then dynamically, between style tags in the head of your header file, write the parts of the CSS that are dynamic. For instance, you could do something like in your functions.php file:

add_action('wp_print_styles', 'prefix_print_styles')

function prefix_print_styles()
{
?>
    <style type="text/css">
        p{
            font-family: <?php echo get_option('prefix-font-family'); ?>
        }
    </style>
<?php    
}

This could also be included directly in your header file, but using this method may make it play nicer with other plugins.

Of course, your normal stylesheet would be included in the header.php file with something like:

<link rel="stylesheet" type="text/css" media="all" href="https://wordpress.stackexchange.com/questions/25801/<?php bloginfo("stylesheet_url' ); ?>" />

And the wp_print_styles action will only work if you have included the wp_head() function somewhere in your header.php file (should be after you add your stylesheet).

Related Posts: