Creatus WordPress Theme is built on top of Unyson theme framework and comes with all it's built in options types. Beside the Unsyon defaults, we have built 30+ additional option types that made the theme development process easier.

In this section you can find only highlighted and mostly used option types and their usage examples. Any option types that are not listed in this section are for internal use only and their support is limited.

The post Option types overview appeared first on Themezly™.

Thz Ace is a code editor text area that is using ace.js for syntax highlighting.

option snippet

'option_name' => array(
    'type' => 'thz-ace',
    'label' => __('Option label', '{domain}'),
    'desc' => esc_html__('Option description.', '{domain}'),
    'help' => esc_html__('Option help.', '{domain}'),
    'value'=>'',
    'mode'=>'html', // css,html,javascript,json
    'theme'=>'chrome', // chrome, tomorrow_night
    'height'=>250
)

The post Thz Ace appeared first on Themezly™.

Thz Background is option type with multiple background selection such as none, color, gradient, image, video or shape.

option snippet simple

'option_name' => array(
    'type' => 'thz-background',
    'label' => __('Option label', '{domain}'),
    'desc' => esc_html__('Option description.', '{domain}'),
    'help' => esc_html__('Option help.', '{domain}'),
    'value'=> array(),
    //'disable' => array('image','color','video','gradient','shape'),
)

option snippet full

'option_name' => array(
    'type' => 'thz-background',
    'label' => __('Option label', '{domain}'),
    'desc' => esc_html__('Option description.', '{domain}'),
    'help' => esc_html__('Option help.', '{domain}'),
    'value'=> array(
        'type' => 'none',
        'color' => '',
        'image' => '',
        'repeat' => 'no-repeat',
        'position' => 'left-top',
        'size' => 'cover',
        'attachment' => 'scroll',
        'gradient-style' => 'linear', // linear, radial
        'gradient-angle' => '0',
        'gradient-size' => 'farthest-corner',//closest-corner, closest-side,farthest-corner,farthest-side
        'gradient-shape' => 'circle',//circle,ellipse
        'gradient-h-poz' => '50',
        'gradient-v-poz' => '50',
        'gradient-start' => '0',
        'gradient-start-color' => '#ffffff',
        'gradient-add-stop' => array(),
        'gradient-end' => '100',
        'gradient-end-color' => 'color_1',
        'video-link' => '',
        'video-poster' => '',
        'video-sound' => 0,
        'video-loop' => 1,
        'shape' => array(
            's' =>'waves', // shape name
            'p' =>'bottom', // shape position
            'f' =>'no', // shape flip
            'c' =>'color_1', // shape color
            'b' =>'',//  background color
            'w' => 100,// shape  width
            'h' =>''//  shape height
        )
    )
)

The post Thz Background appeared first on Themezly™.

Thz Box Style is full layout option type with visual reference for border, border radius and background.

option snippet simple

'option_name' => array(
    'type' => 'thz-box-style',
    'label' => __('Option label', '{domain}'),
    'desc' => esc_html__('Option description.', '{domain}'),
    'help' => esc_html__('Option help.', '{domain}'),
    'value'=> array(),
    'preview' => true, // display border,boxshadow and bacground preview,
    'popup' => true, // display option in a popup
    'button-text' =>  esc_html__('Customize box style', '{domain}'), // popup button text
    // displays only margin and padding
    'disable' => array('layout','borders','boxshadow','borderradius','boxsize','background') 

    /*
      Disable array disables specific option sections 
        layout
        padding
        margin
        borders
        borderradius
        boxsize
        boxshadow
        background
        video // display background but disable background video option
    */
)

option snippet full

'option_name' => array(
    'type' => 'thz-box-style',
    'label' => __('Option label', '{domain}'),
    'desc' => esc_html__('Option description.', '{domain}'),
    'help' => esc_html__('Option help.', '{domain}'),
    'value'=> array(
        'layout' => array(
            'display' => 'default',
            'float' => 'default',
            'clear' => 'default',
            'overflow' => 'default',
            'opacity' => '',
            'visibility' => 'default',
            'position' => 'default',
            'top' => 'auto',
            'right' => 'auto',
            'bottom' => 'auto',
            'left' => 'auto',
            'z-index' => 'auto',
        ),
        'padding' => array(
            'top' => '',
            'right' => '',
            'bottom' => '',
            'left' => '',
        ) ,
        'margin' => array(
            'top' => '',
            'right' => '',
            'bottom' => '',
            'left' => '',
        ) ,
        'borders' => array(
            'all'=> 'same',         
            'top'=> array(
                'w' => '',
                's' => 'solid',
                'c' => ''
            ),
            'right'=> array(
                'w' => '',
                's' => 'solid',
                'c' => ''
            ),
            'bottom'=> array(
                'w' => '',
                's' => 'solid',
                'c' => ''
            ),
            'left'=> array(
                'w' => '',
                's' => 'solid',
                'c' => ''
            )
        ),
        'borderradius' => array(
            'top-left' => '',
            'top-right' => '',
            'bottom-right' => '',
            'bottom-left' => '',
        ),
        'boxsize' => array(
            'width' => '',
            'height' => '',
            'min-width' => '',
            'min-height' => '',
            'max-width' => '',
            'max-height' => ''
        ),
        'boxshadow' => array(),
        'background' => array(
            'type' => 'none',
        ),
        'css'=>''
    )
)

option snippet frontend print helper function

// css print
$box_style          = thz_get_theme_option('option_name');
$box_style_print    = thz_print_box_css($box_style);
if(!empty($box_style_print)){
    $css = '.some_element{'.$box_style_print.'}';
}

The post Thz Box Style appeared first on Themezly™.

Thz Button is a button generator option type.

option snippet

'option_name' => array(
    'type' => 'thz-button',
    'label' => __('Option label', '{domain}'),
    'desc' => esc_html__('Option description.', '{domain}'),
    'help' => esc_html__('Option help.', '{domain}'),
    'value' => array(
        'buttonText'=>'Button',
        'activeColor' => 'theme',
        'buttonSizeClass' => 'small',
    ),
)

The post Thz Button appeared first on Themezly™.

Thz Color Picker is color picker option type with multiple color sets that include theme color palette combos, flat and material UI colors and it also accepts rgba color values.

option snippet

'option_name' => array(
    'type' => 'thz-color-picker',
    'label' => __('Option label', '{domain}'),
    'desc' => esc_html__('Option description.', '{domain}'),
    'help' => esc_html__('Option help.', '{domain}'),
    'value'=> '',
)

Note that palette colors are saved as palete color names eg; color_1, color_2. To convert them to color code values use the palette color processing function;

frontend pallete color processing function

$color = thz_get_option('option_name');
$color = thz_replace_palette_colors( $color );

The post Thz Color Picker appeared first on Themezly™.

Thz Icon option type is an option type that will help you select an icon from 3400+ custom picked icons.

option snippet simple

'option_name' => array(
    'type' => 'thz-icon',
    'label' => __('Option label', '{domain}'),
    'desc' => esc_html__('Option description.', '{domain}'),
    'help' => esc_html__('Option help.', '{domain}'),
    'value' => 'thzicon thzicon-themezly',
)

option snippet array

'option_name' => array(
    'type' => 'thz-icon',
    'label' => __('Option label', '{domain}'),
    'desc' => esc_html__('Option description.', '{domain}'),
    'help' => esc_html__('Option help.', '{domain}'),
    'value' => array(
        'icon' => 'thzicon thzicon-themezly',
        'size' => 28,
        'color' => 'color_1'
    ),
)

Adding custom icons to existing icons set

To add custom icons to thz-icon option type add following filter in your child-theme functions.php file;

function my_filter_font_icon_packs ($packs){

    $packs =  array(
        'myicons' => array(
            'title' => 'Icons pack name',
            'css_class_prefix' => 'icon_css_prefix', // eg; fa
            'css_file_path' => thz_theme_file_path('/some_child_theme_folder/style.css'),
            'css_file_uri' => thz_theme_file_uri('/some_child_theme_folder/style.css'),
        )
    );

    return $packs;
}

add_filter('thz_filter_font_icon_packs', 'my_filter_font_icon_packs');

Note that you need to enque frontent icons stylesheet on your own.

Transient used to save custom icon pack is thz_custom_font_icon_packs and is refreshed every 7 days. Transient can be deleted when filter is removed or with delete_transient('thz_custom_font_icon_packs') function.

The post Thz Icon appeared first on Themezly™.

Thz Multi Option is an option type that combines multiple option types in to one.

option snippet

'option_name' => array(
    'type' => 'thz-multi-options',
    'label' => __('Option label', '{domain}'),
    'desc' => esc_html__('Option description.', '{domain}'),
    'help' => esc_html__('Option help.', '{domain}'),
    'value' => array(
        'icon' => 'fa fa-rocket',
        'spinner' => 28,
        'short-text' => 'short text',
        'text' => 'text',
        'short-select' => 'two',
        'select' => 'two',
        'checkboxes' => array(
            'two' => true
        ),
        'radio' => 'two',
        'color' => 'color_1'
    ),
    'breakafter'=>'select',
    'thz_options' => array(
        'icon' => array(
            'type' => 'icon',
            'title' => esc_html__('icon', '{domain}'),
        ),
        'spinner' => array(
            'type' => 'spinner',
            'title' => esc_html__('spinner', '{domain}'),
            'addon' => 'px'
        ),
        'short-text' => array(
            'type' => 'short-text',
            'title' => esc_html__('short-text', '{domain}'),
        ),
        'text' => array(
            'type' => 'text',
            'title' => esc_html__('text', '{domain}'),
        ),
        'short-select' => array(
            'type' => 'short-select',
            'title' => esc_html__('short-select', '{domain}'),
            'choices' => array(
                'one' => esc_html__('1', '{domain}'),
                'two' => esc_html__('2', '{domain}'),
                'three' => esc_html__('3', '{domain}'),
            )
        ),
        'select' => array(
            'type' => 'short-select',
            'title' => esc_html__('select', '{domain}'),
            'choices' => array(
                'one' => esc_html__('1', '{domain}'),
                'two' => esc_html__('2', '{domain}'),
                'three' => esc_html__('3', '{domain}'),
            )
        ),
        'checkboxes' => array(
            'type' => 'checkboxes',
            'title' => esc_html__('checkboxes', '{domain}'),
            'choices' => array(
                'one' => esc_html__('1', '{domain}'),
                'two' => esc_html__('2', '{domain}'),
                'three' => esc_html__('3', '{domain}'),
            )
        ),
        'radio' => array(
            'type' => 'radio',
            'title' => esc_html__('radio', '{domain}'),
            'choices' => array(
                'one' => esc_html__('1', '{domain}'),
                'two' => esc_html__('2', '{domain}'),
                'three' => esc_html__('3', '{domain}'),
            )
        ),
        'color' => array(
            'type' => 'color',
            'title' => esc_html__('color', '{domain}'),
            'box' => true
        )
    )
)

The post Thz Multi Options appeared first on Themezly™.

Thz Typography is an option type that will help you pick font family from 15 predefined web safe fonts families, choose font familly from 800+ Google fonts. You ca also adjust font size, weight, letter spacing, line height, style, text transform, alignment and color or use built in text shadow generator to aditionaly style your font.

If your favorite webfont is not in the list or you simply need more webfonts please see Import fonts utility

option snippet

'option_name' => array(
    'type' => 'thz-typography',
    'label' => __('Option label', '{domain}'),
    'desc' => esc_html__('Option description.', '{domain}'),
    'help' => esc_html__('Option help.', '{domain}'),
    'value' => array(
        'family'        => 'default',
        'size'          => '',
        'weight'        => 'default',
        'style'         => 'default',
        'subset'        => false, // array of font subsets if used
        'line-height'   => '',
        'spacing'       => '',
        'transform'     => 'default',
        'align'         => 'default',
        'color'         => '',
        'hovered'       => '',
        'text-shadow'   => array()
    ),
    'cssprint' => true, // auto saves font CSS
    'cssclasses' => false, // auto saves font class names
    'disable' => array(), // what to disable, ex: array('size')
    /* used to limit class names, 
     * ex: biggest font classs size is thz-fs-100, 
     * if you increase it dont forget to add new class names in your stylesheet
     */
    'sizelimit' => 100, 

)

Frontend typography processing function

$typography     = thz_get_option('option_name');
$typography_css = thz_typo_print( $typography );

Adding custom font stacks to standard fonts list

To add custom font stacks to standard fonts list use this filter;

function my_filter_typography_standard_fonts ( $custom_list ){

    $custom_list = array(
        "'Arial Black', Gadget, sans-serif"
    );

    return $custom_list;
}

add_filter('thz_filter_typography_standard_fonts', 'my_filter_typography_standard_fonts' );

The post Thz Typography appeared first on Themezly™.