Hi.
i like this settings api class very much. but how i can add custom element class. for eg

i need to add wc-enhanced-select to my select box. how i can add.

array(
                    'name'    => 'selectbox',
                    'label'   => __( 'A Dropdown', 'wedevs' ),
                    'desc'    => __( 'Dropdown description', 'wedevs' ),
                    'type'    => 'select',
                    'default' => 'no',
                    'class' => 'wc-enhanced-select',  # I tried this but no use
                    'options' => array(
                        'yes' => 'Yes',
                        'no'  => 'No'
                    )
                ),

Right now I am using this class for multiple projects and I would love if I could see what version my class have compared to the version on github.

Sup!
The color picker is instantiating regardless if its being used or not. If not being used it throws a js error.

If I get some time I can try to patch this but someone may pick it up before I do.

-Edit*
Colorpicker doesn't even seem to work. I'm using the OOP method.
http://screencast.com/t/tDif4DPO8cZn

Would you be willing to do a new release when you are ready? It appears that you've made several updates since the Oct 2015 release.

I ask because I'm currently pointing to dev-master and Composer gives me warnings on composer validate.

require.tareq1988/wordpress-settings-api-class : unbound version constraints (dev-master) should be avoided

It would be nice to get rid of that.

Thank you,
Daniel

The WeDevs_Settings_API' class not found :(

I create a folder with git hub files and the functions.php and require this three files (
class.settings-api, procedural-example, settings-api)

Using wordpress 3.9.1

Am i doing something wrong?

Hi there,

Not sure if this should be included or deliberately left out but personally I think when you give a field a default value it should be passed to the add_option call so that it is saved in the database as soon as the class is called.

In 3.9 the theme customizer will be used even more by users with the new widget management etc.

This means that user would want options in the frontend instead of backend. The Redux framework has a method to add their options to the theme customizer. Can we add something similar to this class? If it is already possible, can you then provide an example of how it is done? :)

I am using your class to specify some custom css. To invoke the changes I am creating a static css file on the server with the new css rules. This file will be enqueued when the theme is loaded.

However my dilemma is how I fire the function to create the css file? Preferably I would only like to do this when I save an options screen, but I dont know the best way to do this.

Should I modify the class to call my css build function or can I somehow hook the function to when the options are updated/saved? Or is there a better way to do this?

Any thoughts are appreciated :)

Should the code be re factored to tabs instead of spaces as indicated in the Wordpress coding standards ?

Since WP 4.7.0 register_setting's 3rd parameter is an array. Please update it in the code...

Want to log this before I forget about it. Small cosmetic issue on 3.8.

http://screencast.com/t/TejSr4ge

Just noticed this but the example shows a bug where there are multi tabs and each tab has a file field.
The first file field you use is working.
Now choose different tab and choose image for the file field there and it's input field is not being filled. Instead the url being filled in the first file field you used in the other tab.

How do I register subsection like the screenshot I attached

I read your blog post here: https://tareq.co/2012/06/wordpress-settings-api-php-class/

but I can't find any resource on creating subsections

Is there a way to create subsections ?

Sometimes I need to create sub heading or heading field for showing some separator.

I am trying to write we can achieve that. The way wordpress renders the setting api it creates tabular format, fields labels in one col and field in 2nd col, we need to create a col with 2 col width or 'colspan' needs 2.

new field type: subheading

how to declare field

               array(
                    'name'        => 'This is my heading here',
                    'desc'        => __( 'This is heading description' ),
                    'type'        => 'subheading'
                ),

now , in the setting class you need to add the field definition method

                       /**
			 * Displays a  2 colspan subheading field for a settings field
			 *
			 * @param array $args settings field args
			 */
			function callback_subheading( $args ) {

				$html = '<h3 class="setting_subheading">'.$args['name'].'</h3>';
				$html .= $this->get_field_description( $args );

				echo $html;
			}

we are almost done, now in the setting api in javascript code area put some js code like below

              //make the subheading single row
		$('.setting_subheading').each(function (index, element) {		
			var $element = $(element);
			var $element_parent = $element.parent('td');
			$element_parent.attr('colspan', 2);
			$element_parent.prev('th').remove();
		});

Hi, I seem to have an issue with single checkboxes where the value is always "on" even when they are not checked.

If they have not been used, the option doesnt exist and I can test it with isset(), but once used, I cant test properly as the value is always "on".

Investigated the code and it there is a hidden input value of "off" prior to the checkbox input but when not 'checked' this still seems to overwrite the hidden value when saved.

How can I get around this?

Please change visibility for WeDevs_Settings_API::settings_sections property private to protected. So plugin developers can extend it.

Thanks!

Proposed addition:

    /**
     * Displays a rich text textarea for a settings field
     *
     * @param array $args settings field args
     */
    function callback_wysiwyg( $args ) {

        $value = $this->get_option( $args['id'], $args['section'], $args['std'] );
        $size = isset( $args['size'] ) && !is_null( $args['size'] ) ? $args['size'] : 'regular';

        echo '<div style="width: ' . $size . ';">';

        wp_editor( 
            $value, 
            $args[ 'section' ] . '[' . $args[ 'id' ] . ']', 
            array( 'teeny' => true, 'textarea_rows' => 10 )
        );

        echo '</div>';

        echo sprintf( '<br><span class="description"> %s</span>', $args['desc'] );
    }

I cloned this repo and replaced the oop-example include with the procedural file and it does not work.

The way that you just create a new instance make no sense to me but I have not looked at now the class works.

You should actually test it and include a test that is executed by default for it.

I created a network setting page but it is not working.
When I submit it is showing 404 page.
To fix this I just remove the action name "options.php" from the form.
Now it is not saving data.

In woocommerce each section can be separated again to subsection using 'title' and 'sectionend'
Look here: https://woocommerce.com/document/adding-a-section-to-a-settings-tab/

It will be great if we can add subsection, as settings can be have multidimentional child.

It would be nice if there was a class attribute on fields and/or if the parent container on settings pages had some sort of common ID or CSS class (such as id="wordpress_settings_api_container" or class="wordpress-settings-api group".

'class' => 'my-custom-class some-other-class',

This would make it easier to do some UI goodness. (On an unrelated note, I kind of wish that the html field type had the option of spanning full-width as opposed to being limited to the second table column.)

Nice work, by the way.

I see here on ticket #27 where the default values are initialized in the add_option and saved in the database as soon as the class is called, such as when the plugin is first activated.

To me, this is very helpful since I want my plugin to immediately work upon activation with the default value that I've set and then let the user change these values themselves. I see this issue was brought up on #22, but it has been label as wontfix.

Just plan to try out how this is made, I found one issue,

1. Go to Settings page,
2. Make changes to the fields in both tabs,
3. Hit save,
4. Only the active tab fields saved, other tab's changes are ignored.

Regards,

The main class doesn't have a static getinstance() method implimented.

The wordpress-settings-api-class uses the show_forms function to generate the form pages. It is now only possible to generate input fields, sections and descriptions, which makes the layout of the form quite limited.

Would it be possible to add an option for just displaying plain text/HTML as well (so the form includes some text, or a link, without an input field).

I've included a screenshot of WordPress SEO by Yoast to show what I mean:

Hi.
Please, tell me, under which licence distribute your code? It GNU GPL v2/v3 or something else?
In the file plugin.php it missing.

Now we have a file upload field and it contains a input field with the URL of the selected file. It would be better to have a image field with a image thumbnail preview.

I am trying to use this array:

'us_basic' => array(
array(
'name' => 'us_pinterest_default',
'label' => __( 'Default Pinterest Image', 'ultimate-social' ),
'desc' => __( 'Image that is passed if a post have no images', 'ultimate-social' ),
'type' => 'file',
'default' => '',
),
),

But 'file' is not working when clicking browse.

In the oop-example.php file, what does the get_pages() function do exactly?

    function get_pages() {
        $pages = get_pages();
        $pages_options = array();
        if ( $pages ) {
            foreach ($pages as $page) {
                $pages_options[$page->ID] = $page->post_title;
            }
        }
        return $pages_options;
    }

Based on the comment code above it:

/**
 * Get all the pages
 *
 * @return array page names with key value pairs
 */

Does this return multiple plugin page settings that are defined in admin_menu()?

This should really be fixed as it poses a potential security risk.

Right now we are saving attachment URLs in the option. Wouldn't it be better to save attachment ids instead?

So if its a file, we can use wp_get_attachment_url(). If its an image, we could get full, thumbnail, medium images if we wanted. What do you guys think?

Changing to attachment_id will also break the existing forms as users are already fetching URLs and acting on that.

I tried to use your plugin directly into the theme, but I failed miserably.

IN FUNCTIONS.PHP →

locate_template( 'inc/admin/class.settings-api.php', true );
locate_template( 'inc/admin/o-functions.php', true );

#o-functions.php code:#

<?php

/**
* Registers settings section and fields
*/
function wedevs_admin_init() {

    $sections = array(
        array(
            'id'    => 'wedevs_basics',
            'title' => __( 'Basic Settings', 'wedevs' )
        ),
        array(
            'id'    => 'wedevs_advanced',
            'title' => __( 'Advanced Settings', 'wedevs' )
        ),
        array(
            'id'    => 'wedevs_others',
            'title' => __( 'Other Settings', 'wpuf' )
        )
    );

    $fields = array(
        'wedevs_basics' => array(
            array(
                'name' => 'text',
                'label' => __('Text Input', 'wedevs'),
                'desc' => __('Text input description', 'wedevs'),
                'type' => 'text',
                'default' => 'Title'
            ),
            array(
                'name' => 'textarea',
                'label' => __('Textarea Input', 'wedevs'),
                'desc' => __('Textarea description', 'wedevs'),
                'type' => 'textarea'
            ),
            array(
                'name' => 'checkbox',
                'label' => __('Checkbox', 'wedevs'),
                'desc' => __('Checkbox Label', 'wedevs'),
                'type' => 'checkbox'
            ),
            array(
                'name' => 'radio',
                'label' => __('Radio Button', 'wedevs'),
                'desc' => __('A radio button', 'wedevs'),
                'type' => 'radio',
                'options' => array(
                    'yes' => 'Yes',
                    'no' => 'No'
                )
            ),
            array(
                'name' => 'multicheck',
                'label' => __('Multile checkbox', 'wedevs'),
                'desc' => __('Multi checkbox description', 'wedevs'),
                'type' => 'multicheck',
                'options' => array(
                    'one' => 'One',
                    'two' => 'Two',
                    'three' => 'Three',
                    'four' => 'Four'
                )
            ),
            array(
                'name' => 'selectbox',
                'label' => __('A Dropdown', 'wedevs'),
                'desc' => __('Dropdown description', 'wedevs'),
                'type' => 'select',
                'default' => 'no',
                'options' => array(
                    'yes' => 'Yes',
                    'no' => 'No'
                )
            )
        ),
        'wedevs_advanced' => array(
            array(
                'name' => 'text',
                'label' => __('Text Input', 'wedevs'),
                'desc' => __('Text input description', 'wedevs'),
                'type' => 'text',
                'default' => 'Title'
            ),
            array(
                'name' => 'textarea',
                'label' => __('Textarea Input', 'wedevs'),
                'desc' => __('Textarea description', 'wedevs'),
                'type' => 'textarea'
            ),
            array(
                'name' => 'checkbox',
                'label' => __('Checkbox', 'wedevs'),
                'desc' => __('Checkbox Label', 'wedevs'),
                'type' => 'checkbox'
            ),
            array(
                'name' => 'radio',
                'label' => __('Radio Button', 'wedevs'),
                'desc' => __('A radio button', 'wedevs'),
                'type' => 'radio',
                'default' => 'no',
                'options' => array(
                    'yes' => 'Yes',
                    'no' => 'No'
                )
            ),
            array(
                'name' => 'multicheck',
                'label' => __('Multile checkbox', 'wedevs'),
                'desc' => __('Multi checkbox description', 'wedevs'),
                'type' => 'multicheck',
                'default' => array('one' => 'one', 'four' => 'four'),
                'options' => array(
                    'one' => 'One',
                    'two' => 'Two',
                    'three' => 'Three',
                    'four' => 'Four'
                )
            ),
            array(
                'name' => 'selectbox',
                'label' => __('A Dropdown', 'wedevs'),
                'desc' => __('Dropdown description', 'wedevs'),
                'type' => 'select',
                'options' => array(
                    'yes' => 'Yes',
                    'no' => 'No'
                )
            )
        ),
        'wedevs_others' => array(
            array(
                'name' => 'text',
                'label' => __('Text Input', 'wedevs'),
                'desc' => __('Text input description', 'wedevs'),
                'type' => 'text',
                'default' => 'Title'
            ),
            array(
                'name' => 'textarea',
                'label' => __('Textarea Input', 'wedevs'),
                'desc' => __('Textarea description', 'wedevs'),
                'type' => 'textarea'
            ),
            array(
                'name' => 'checkbox',
                'label' => __('Checkbox', 'wedevs'),
                'desc' => __('Checkbox Label', 'wedevs'),
                'type' => 'checkbox'
            ),
            array(
                'name' => 'radio',
                'label' => __('Radio Button', 'wedevs'),
                'desc' => __('A radio button', 'wedevs'),
                'type' => 'radio',
                'options' => array(
                    'yes' => 'Yes',
                    'no' => 'No'
                )
            ),
            array(
                'name' => 'multicheck',
                'label' => __('Multile checkbox', 'wedevs'),
                'desc' => __('Multi checkbox description', 'wedevs'),
                'type' => 'multicheck',
                'options' => array(
                    'one' => 'One',
                    'two' => 'Two',
                    'three' => 'Three',
                    'four' => 'Four'
                )
            ),
            array(
                'name' => 'selectbox',
                'label' => __('A Dropdown', 'wedevs'),
                'desc' => __('Dropdown description', 'wedevs'),
                'type' => 'select',
                'options' => array(
                    'yes' => 'Yes',
                    'no' => 'No'
                )
            )
        )
    );

    $settings_api = new WeDevs_Settings_API();

    //set sections and fields
    $settings_api->set_sections( $sections );
    $settings_api->set_fields( $fields );

    //initialize them
    $settings_api->admin_init();
}

add_action( 'admin_init', 'wedevs_admin_init' );


/**
* Register the plugin page
*/
function wedevs_admin_menu() {
    add_options_page( 'Settings API', 'Settings API', 'delete_posts', 'settings_api_test', 'wedevs_plugin_page' );
}

add_action( 'admin_menu', 'wedevs_admin_menu' );


/**
* Display the plugin settings options page
*/
function wedevs_plugin_page() {
    $settings_api = new WeDevs_Settings_API();

    echo '<div class="wrap">';
    settings_errors();

    $settings_api->show_navigation();
    $settings_api->show_forms();

    echo '</div>';
}

/**
* Get the value of a settings field
*
* @param string $option settings field name
* @param string $section the section name this field belongs to
* @param string $default default text if it's not found
* @return mixed
*/
function my_get_option( $option, $section, $default = '' ) {

    $options = get_option( $section );

    if ( isset( $options[$option] ) ) {
    return $options[$option];
    }

    return $default;
}

Code for class.settings-api.php

But I think sub-menus are not registering thats why nothing is populating in the backend. see here →

whats the Fix?

ooops please delete

Is there any documentation on how to use the procedural example? If I create it using the class (op-example.php), it seems I cannot pull values in the front-end.

If I use the procedural example, it doesn't show anything in the backend. It does let me pull values though.

Hi

Would it be possible for you to prepare a new release, so when we require with composer it can meet minimum stability requirements without degrading it to dev? :-)

/ Nicolai

Right now I've set up a multicheck with defaults set like so:

array(
    'name' => 'multi_slug',
    'label' => __( 'Multicheckboxes', 'example' ),
    'type' => 'multicheck',
    'default' => array(
        'option_2' => 'option_2',
        'option_3' => 'option_3',
    ),
    'options' => array(
        'option_1' => 'Option #1',
        'option_2' => 'Option #2',
        'option_3' => 'Option #3',
        'option_4' => 'Option #4',
    )
),

I am able to uncheck the checkboxes and save those changes. Yet, if I uncheck all of the checkboxes, it will revert back to having the default checkboxes (option_2 and option_3) checked again.

Where can I fix that in the class.settings-api.php?

Curious if you plan on adding a button to reset the options back to the defaults

seems line breaks or new line doesn't work for textarea

@tareq1988 thanks for the great work ,

I have tried to set the default value for mutlicheck field like this

$metas = array(....);
$fields['my-section-name'] = array();
foreach ($metas as $section => $values) {

$fields['my-section-name'][] = array(
        'name' => $section,
        'label' => $section,
        'type' => 'multicheck',
        'default' => array_flip($values),
        'options' => array_combine(
                $values
                , $values
        )
    );
}

The checkboxes are displayed correctly , but the default array is ignored , after some digging I found this in following line : https://github.com/tareq1988/wordpress-settings-api-class/blob/master/src/class.settings-api.php#L234

I think it must be something like this :

$checked = isset( $value[$key] ) ? $key : '0';

Maybe I am doing it the wrong way ? Should I send PR for this ?

Hi,
I am trying to use the multicheck filed, it's working fine, But problem is if I check nothing form multicheck and click save change button it's giving me a warning of invalid argument supplied for foreach in setting api php class 386 line.
It's not giving me warning if WP_DEBUG if false.

Thanks
Imran Khan