Adding Frontend Options

Show custom options with setting fields on Front pages

Declare Custom Options

First, you need to declare Options Setup like shown below:

Setup ARRAY structure is the same as Page Options. But it doesn't use filter hook.

add_filter( 'wpcfto_get_frontend_settings', 'my_custom_setup', 100 );

function my_custom_setup( $setups ) {
    $setups[] = array(
        /*
         * Here we specify option name. It will be a key for storing in wp_options table
         */
        'option_name' => 'my_awesome_settings',
        
        'title' => esc_html__('Theme options', 'my-domain'),
        'sub_title' => esc_html__('by StylemixThemes', 'my-domain'),
        'logo' => 'https://s3.envato.com/files/235051023/avatar-80x80.png',
    
        /*
         * Next we add a page to display our awesome settings.
         * All parameters are required and same as WordPress add_menu_page.
         */
        'page' => array(
            'page_title' => 'Awesome Settings'
        ),
    
        /*
         * And Our fields to display on a page. We use tabs to separate settings on groups.
         */
        'fields' => array(
            // Even single tab should be specified
            'tab_1' => array(
                // And its name obviously
                'name' => esc_html__('Tab 1', 'my-domain'),
                'fields' => array(
                    // Field key and its settings. Full info about fields read in documentation.
                    'awesome_1' => array(
                        'type' => 'text',
                        'label' => esc_html__('Awesome Field label', 'my-domain'),
                        'value' => 'Awesome default value',
                    ),
                    'awesome_2' => array(
                        'type' => 'text',
                        'label' => esc_html__('Awesome Field label 2', 'my-domain'),
                        'value' => 'Awesome default value 2',
                    ),
                )
            ),
    
           /*
            * Other tabs you can add below
            */
            // ....
        )
    );
    
    return $setups;
}

Render Options

In order to show options on Front templates, you need to call WPCFTO_Front_Settings::render() function with $option_name parameter on your frontend template:

if ( class_exists( 'WPCFTO_Front_Settings' ) ) {
    WPCFTO_Front_Settings::render( 'my_awesome_settings' );
}