# Adding Frontend Options

**Declare Custom Options**

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

{% hint style="info" %}
Setup ARRAY structure is the same as **Page Options**. But it doesn't use filter hook.
{% endhint %}

```
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' );
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.stylemixthemes.com/nuxy/adding-frontend-options.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
