008_TF_Generate-CSS-Automatically-for-Your-OptionsTitan Framework can now generate your CSS automatically for all your options! We also have included scssphp – a Sass compiler (supports Scss syntax only) to compile and minify your CSS! New in version 1.2, the framework now has these two methods of defining your CSS:

  • All options now have the css parameter for defining CSS rules for your option
  • The createCSS function for defining more complex CSS rules across all your options

The CSS Parameter

The css parameter is available for all admin page options and theme customizer options. Note that meta box options are not supported as those options are tied up to a certain page/post and should not normally be used for changing styles.

To use the parameter, you simply need to define a CSS rule in it. For example:

$panel->createOption( array(
'name' => 'Background Color',
'id' => 'my_background_color',
'type' => 'color',
'css' => 'body { background-color: value; }'
) );​

In the above example, we just set our option to generate the CSS rule:

body { background-color: value; }​

The value parameter inside the CSS rule will be automatically replaced with the current value of my_background_color.

The createCSS Function

Aside from setting the css parameter above, you can also use the createCSS function to declare all your CSS styles.

Let’s say we have an admin page with a single color picker option:

$titan = TitanFramework::getInstance( 'my-theme' );
$panel = $titan->createAdminPanel( array(
'name' => 'My Admin Page',
) );
$panel->createOption( array(
'name' => 'Background Color',
'id' => 'my_background_color',
'type' => 'color',
) );​

We can then define our CSS rules:

$titan->createCSS( "
body {
background-color: $my_background_color;
}
" );​

The Sass variable `$my_background_color` corresponds to the the ID of the option you want to get the value of.

[zilla_alert]Important: In the example above, the dollar sign for `$my_background_color` is escaped so that it won’t be parsed as a PHP variable inside our double quotes. You can also use single quotes as an alternative to avoid escaping the dollar sign:

$titan->createCSS( '
body {
background-color: $my_background_color;
}
' );

[/zilla_alert]

Using Values from Your Options

In some options (e.g. radio-palette and select-googlefont), your saved option would have multiple values. For example, the radio-palette option’s value would be the hex colors of all the colors selected:

'options' => array(
array(
"#69D2E7",
"#A7DBD8",
"#E0E4CC",
"#F38630",
"#FA6900",
),
array(
"#D9CEB2",
"#948C75",
"#D5DED9",
"#7A6A53",
"#99B2B7",
),
)​

In instances like this, writing your CSS like these would not work since the value is an array:

body { background-color: value; }​

or

body { background-color: $my_background_color; }​

For array-type options, you can access the values by using a dash followed by the index or key. For example, to access the radio-palette values, you can do something like this in your CSS:

body { background-color: value-0; }
.some-other-element { background-color: value-1; }​

or

body { background-color: $my_background_color-0; }
.some-other-element { background-color: $my_background_color-1; }​

For select-googlefont, since it uses an associative array, you can do this:

body { 
font-family: value-name; 
font-weight: value-variant; 
}​

You can check the individual detailed documentation for each option.

Using SCSS

Titan uses scssphp to parse the CSS you input. scssphp implements SCSS 3.2.12. You can use nested style selectors, variables, mixins and operators in your styles.

Here’s an example of nesting, you can do this inside the css parameter as well:

$titan->createCSS( "
body {
background-color: $my_background_color;
.some-class {
background-color: $my_background_color;
}
}
" );​

Auto Generated CSS

Titan automatically generates a CSS file that contains all your CSS rules for you. It creates the file inside WordPress’ uploads folder in the format:

titan-framework-<namespace>-css.css

If at any chance the CSS file cannot be created (maybe the permissions are wrong), the CSS will be loaded inside your head tag.

[zilla_alert]The CSS file generated will have the permissions 664. Ideally, the uploads folder for WordPress should have the permissions 755. Folder ownership should belong to your local user, and the group ownership should be the same as the one your web service run in. [/zilla_alert]

10 thoughts

  1. Yay! This thing seems to promising! I just wish I was even a little bit of a coder. 😉
    Question: If I wanted to do something similar but with an image being defined as a background for a specific element… What would be the best way to accomplish this?

    I created an option:

    $panel->createOption( array(
    ‘name’ => ‘Logo URL’,
    ‘id’ => ‘logo_link’,
    ‘type’ => ‘text’,
    ‘desc’ => ‘Enter the full URL to your logo’
    ) );

    The user would enter the fully qualified URL as text.
    i.e., http://sitename/directoryname/imagename.png

    I’d need to be able to get that into my CSS where ever that image was needed.
    i.e., div.example {
    background-image: url(‘whould_I_stick_something_in_here_to_get_$logo_link?’); /* <– Unless I'm nuts this shouldn't work, right? */
    background-size: contain;
    background-repeat: no-repeat;
    back…
    }

    Sorry. My brain just doesn't get this stuff. LOL!

    What's the best way to accomplish something like this?
    I really appreciate your help.

    1. For the image option, you can just use the css parameter when defining your option. You can do this (Just changed some code in the repo, download the plugin from GitHub to do this):

      'css' => 'div.example { background-image: value; }'

      Or, you can also create add an action hook to wp_head then do a getOption from there: http://www.titanframework.net/upload-option/

  2. Benjamin,
    Great framework, thanks! I’ve cruised through most of it.

    The auto-generated CSS is very cool. I finally got stuck when I tried the createCSS part above. I followed your example, hoping to use the variable I had defined on an option, and I checked the names very carefully.

    I keep getting…
    Fatal error: Uncaught exception ‘Exception’ with message ‘parse error: failed at `background-color: ;`
    … as if it doesn’t like the syntax of the variable.

    Any thoughts, please? I started to wonder if maybe this was only for SCSS, or needed to be an array, or something. 🙂

    Super plugin!
    Thanks! Dave

  3. Hi!
    Auto-generated CSS works great!

    I also tried your createCSS example above, and got a fatal error. it seemed to die at the dollar variable there.

    Any thoughts?

    Great plugin!!!
    Thanks, Dave

  4. Hi,

    I know this article says this cant be used for metaboxes and the reason given is they are tied to a post.

    However, I am using a custom post type that has meta boxes that set values for that post and then use a shortcode eg: [myshortcode id=”132″]

    Each shortcode outputs a layout that I’d like to add styling options to. So in this scenario the meta boxes would be needed to apply the styles.

    How would I go about doing this?

    Thanks,

    Andy

Leave a Reply