Css Builder Field

Field type: css_builder
Renderer class: CssBuilder
Aliases using the same renderer: None

Purpose

CSS builder field.

Value shape

Associative array or nested array, depending on sub-fields.

Supported attributes

Common attributes

Attribute	Type	Description
`id`	string	Required for data-saving fields. Unique key inside the option/meta array. Required for saving.
`type`	string	Required. Field type slug, for example `text`, `select`, or `repeater`.
`title`	string	Main field label displayed in the left column.
`subtitle`	string	Small helper text below the field title.
`desc`	string/html	Description displayed below the control. Limited HTML is allowed.
`default`	mixed	Default value used when there is no saved value yet.
`placeholder`	string	Placeholder text for input/select-like fields when supported.
`dependency`	array	Conditional visibility rules. Example: `[ "field" => "enable", "operator" => "==", "value" => 1 ]`.
`sanitize_callback`	callable	Custom sanitizer callback. Receives `$value` and `$field`.

Field-specific attributes

This field does not require special attributes beyond the common field attributes.

Options Framework example

KAVRO::createSection( $prefix, array(
    'title'  => 'Css Builder Example',
    'fields' => array(
        array(
            'id' => 'demo_css_builder',
            'type' => 'css_builder',
            'title' => 'Css Builder',
            'subtitle' => 'Css Builder field example.',
            'desc' => 'This is a documented css_builder field example.',
            'default' => 'Example value',
        ),
    ),
) );

Metabox example

KAVRO::createSection( $metabox_prefix, array(
    'title'  => 'Css Builder Meta',
    'fields' => array(
        array(
            'id' => 'demo_css_builder',
            'type' => 'css_builder',
            'title' => 'Css Builder',
            'subtitle' => 'Css Builder field example.',
            'desc' => 'This is a documented css_builder field example.',
            'default' => 'Example value',
        ),
    ),
) );

Customizer example

$customize_prefix = 'kavro_customize_demo';

KAVRO::createCustomizeOptions( $customize_prefix, array(
    'title' => 'Kavro Customizer Demo',
) );

KAVRO::createSection( $customize_prefix, array(
    'title'  => 'Css Builder Customizer',
    'fields' => array(
        array(
            'id'       => 'demo_css_builder',
            'type'     => 'css_builder',
            'title'    => 'Css Builder',
            'subtitle' => 'Css Builder field example.',
            'desc'     => 'This example uses the same field configuration in this framework context.',
        ),
    ),
) );

Taxonomy Options example

$taxonomy_prefix = 'kavro_taxonomy_demo';

KAVRO::createTaxonomyOptions( $taxonomy_prefix, array(
    'taxonomy' => array( 'category', 'post_tag' ),
) );

KAVRO::createSection( $taxonomy_prefix, array(
    'title'  => 'Css Builder Term Field',
    'fields' => array(
        array(
            'id'       => 'demo_css_builder',
            'type'     => 'css_builder',
            'title'    => 'Css Builder',
            'subtitle' => 'Css Builder field example.',
            'desc'     => 'This example uses the same field configuration in this framework context.',
        ),
    ),
) );

Profile/User Options example

$profile_prefix = 'kavro_profile_demo';

KAVRO::createProfileOptions( $profile_prefix, array(
    'roles' => array( 'administrator', 'editor' ),
) );

KAVRO::createSection( $profile_prefix, array(
    'title'  => 'Css Builder User Field',
    'fields' => array(
        array(
            'id'       => 'demo_css_builder',
            'type'     => 'css_builder',
            'title'    => 'Css Builder',
            'subtitle' => 'Css Builder field example.',
            'desc'     => 'This example uses the same field configuration in this framework context.',
        ),
    ),
) );

Nav Menu Options example

$nav_menu_prefix = 'kavro_nav_menu_demo';

KAVRO::createNavMenuOptions( $nav_menu_prefix, array(
    'title' => 'Kavro Menu Item Options',
) );

KAVRO::createSection( $nav_menu_prefix, array(
    'title'  => 'Css Builder Menu Item Field',
    'fields' => array(
        array(
            'id'       => 'demo_css_builder',
            'type'     => 'css_builder',
            'title'    => 'Css Builder',
            'subtitle' => 'Css Builder field example.',
            'desc'     => 'This example uses the same field configuration in this framework context.',
        ),
    ),
) );

Widget Options example

$widget_prefix = 'kavro_widget_demo';

KAVRO::createWidgetOptions( $widget_prefix, array(
    'title' => 'Kavro Widget Options',
) );

KAVRO::createSection( $widget_prefix, array(
    'title'  => 'Css Builder Widget Field',
    'fields' => array(
        array(
            'id'       => 'demo_css_builder',
            'type'     => 'css_builder',
            'title'    => 'Css Builder',
            'subtitle' => 'Css Builder field example.',
            'desc'     => 'This example uses the same field configuration in this framework context.',
        ),
    ),
) );

Comment Options example

$comment_prefix = 'kavro_comment_demo';

KAVRO::createCommentOptions( $comment_prefix, array(
    'title' => 'Kavro Comment Options',
) );

KAVRO::createSection( $comment_prefix, array(
    'title'  => 'Css Builder Comment Field',
    'fields' => array(
        array(
            'id'       => 'demo_css_builder',
            'type'     => 'css_builder',
            'title'    => 'Css Builder',
            'subtitle' => 'Css Builder field example.',
            'desc'     => 'This example uses the same field configuration in this framework context.',
        ),
    ),
) );

Shortcode Framework example

KAVRO::createShortcode( 'kavro_demo_shortcode', array(
    'title'  => 'Kavro Demo Shortcode',
    'tag'    => 'kavro_demo',
    'fields' => array(
        array(
            'id'       => 'demo_css_builder',
            'type'     => 'css_builder',
            'title'    => 'Css Builder',
            'subtitle' => 'Css Builder field example.',
            'desc'     => 'This example uses the same field configuration in this framework context.',
        ),
    ),
) );

Get saved value

From Options Framework

$value = kavro_get_option( $prefix, 'demo_css_builder', null );

From Metabox

$value = kavro_get_post_meta( get_the_ID(), $metabox_prefix, 'demo_css_builder', null );

From Customizer

$value = get_theme_mod( 'demo_css_builder', null );

From Taxonomy Options

$value = kavro_get_term_meta( $term_id, $taxonomy_prefix, 'demo_css_builder', null );

From Profile/User Options

$value = kavro_get_user_meta( $user_id, $profile_prefix, 'demo_css_builder', null );

From Nav Menu Options

$value = kavro_get_nav_menu_item_meta( $menu_item_id, $nav_menu_prefix, 'demo_css_builder', null );

From Widget Options

$value = kavro_get_widget_option( $widget_id, $widget_prefix, 'demo_css_builder', null );

From Comment Options

$value = kavro_get_comment_meta( $comment_id, $comment_prefix, 'demo_css_builder', null );

From Shortcode Framework

Shortcode field values are passed to the shortcode callback as attributes or normalized settings depending on your shortcode registration callback.

$value = isset( $atts['demo_css_builder'] ) ? $atts['demo_css_builder'] : null;

Notes

This is a complex field. Treat the saved value as an array and inspect the returned structure before using it in frontend templates.

← Cron Schedule Css Editor →