Home>Support>Create custom field

Create custom field

Hello,

I want create a custom field, i can create a simple custom field like defined in the documentation.
But I want do a custom filed with many element.
I want have in my custom field :
– a radiobuttons
– a field type “slider”
– a field type “media”

In my render_field function I write for the slider element :

<div class="siteorigin-widget-field siteorigin-widget-field-type-slider siteorigin-widget-field-opacity">		<label for="widget-mdsow-bloc3elements-c29-bloc3-opacity-1" class="siteorigin-widget-field-label">
                        Opacity		</label>
                    <div class="siteorigin-widget-slider-value">82</div>
                    <div class="siteorigin-widget-slider-wrapper">
                        <div class="siteorigin-widget-value-slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 82%;"></span></div>
                    </div>
                    <input type="number" class="siteorigin-widget-input" name="widgets[c29][bloc3][opacity]" id="widget-mdsow-bloc3elements-c29-bloc3-opacity-1" value="50" min="0" max="100" step="1">
                </div>

In my render_field function I write for the media element :

<div class="siteorigin-widget-field siteorigin-widget-field-type-media siteorigin-widget-field-picto">
                    <label for="widget-mdsow-bloc3elements-c29-bloc3-picto-1" class="siteorigin-widget-field-label">
                        Picto		</label>
                    <div class="media-field-wrapper">
                        <div class="current">
                            <div class="thumbnail-wrapper">
                                <img src="" class="thumbnail" style="display:none">
                            </div>
                            <div class="title"></div>
                        </div>
                        <a href="#" class="media-upload-button" data-choose="Choose picture" data-update="Set" data-library="image">
                            Choose picture			</a>
                        <a href="#" class="find-image-button">
                            Rechercher une image				</a>
                    </div>

                    <a href="#" class="media-remove-button remove-hide">Retirer</a>
                    <input type="hidden" value="0" name="widgets[c29][bloc3][picto]" class="siteorigin-widget-input">

                    <div class="clear"></div>
                </div>
                </div>

The design is good but I can’t move the slider cursor and nothing do when I click on media field.

How can I do to use fields type defined here in my custom field : https://siteorigin.com/docs/widgets-bundle/form-building/form-fields.

Thank’s

MD

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 1 year, 5 months ago Alex S Hi, I Work Here

    Hi Micdub,

    Form fields can be added to your widget by definining them in the $form_options, which is set in the initial construct, or the get_widget_form method. For an example of the latter, please refer to the SIteOrigin Editor widget.

    Kind regards,
    Alex

  2. 1 year, 5 months ago micdub

    Hi Alex,
    thank’s for your response but my question is to do this in a custom field.

    I’m create a custom field extended of SiteOrigin_Widget_Field_Base.
    In my render_field method I can create my own HTML but, I want my custom field have many HTML composants.
    For exemple, in my custom field I want put 1 html checkbox (I arrived to do this) but I want also put the “slider” field (like when creating widget) and the “media” field (like when creating widget).

    But I not arrived to do this.

    When I put the HTML of “slider” or “media” composant, I have the look but it’s not working, I think javascript is not launch when I do like that.

    Thank’s

    Michaël

  3. 1 year, 5 months ago Alex S Hi, I Work Here

    Hi Michaël,

    Adding form fields in the same way as with widgets isn’t directly possible due to how class inheritance works. You can indirectly do this for one form field by extending the form field you wish to add.

    To do what you’ve outlined your best bet would be to create several form fields (one for each particular part of the field that extends an existing form field) and then create a widget uses the existing form fields instead. You can then add that widget to other widgets.

    Kind regards,
    Alex

  4. 1 year, 5 months ago micdub

    Hi Alex,

    Very good idea, I hadn’t thought of it. Thank you very much, I will try.

    Michaël

  5. 1 year, 3 months ago micdub

    HI Alex,

    I tried to do as you told me but I have a problem.
    I cannot retrieve what I entered in the fields of my widget when displaying the passage of my variables to the template in the get_template_variables function.
    I have the name of my field in the instances but it is empty whereas if I open the widget in the BO, my information is saved.

    Do you have an idea?
    thank you so much

  6. 1 year, 3 months ago Alex S Hi, I Work Here

    Hi Micdub,

    Can you please provide me with your entire widget’s code so I can take a look over it?

    Values selected in the widgets are in the $instance variable, or first paramater if you’re using the filter. For example, if I had a field called example I could retrieve the value by using $instance[‘example’].

    Kind regards,
    Alex

  7. 1 year, 3 months ago micdub

    Hi Alex

    The first widget :

    <?php
    /*
    Widget Name: Background
    Description: Bloc background
    Author: Michaël DUBOIS
    */
    
    class MD_S0Widget_BlocBackground_Widget extends SiteOrigin_Widget {
    	function __construct() {
    		parent::__construct(
    			'mdsow-blocbackground',
    			'Background',
    			array(
    				'description' => 'Bloc background',
    				'help' => ''
    			),
    			array(
    
    			),
    			false,
    			plugin_dir_path(__FILE__)
    		);
    	}
    
    	function get_widget_form() {
    		return array(
                'bck2prc' => array(
                    'type' => 'select',
                    'label' =>  'Size background 2',
                    'default' => '',
                    'options' => array(
                        '' => '',
                        'prc5' =>  'prc5',
                        'prc10' =>  'prc10',
                        'prc15' =>  'prc15',
                        'prc20' =>  'prc20',
                        'prc25' =>  'prc25',
                        'prc30' =>  'prc30',
                        'prc35' =>  'prc35',
                        'prc40' =>  'prc40',
                        'prc45' =>  'prc45',
                        'prc50' =>  'prc50',
                        'prc55' =>  'prc55',
                        'prc60' =>  'prc55',
                        'prc65' =>  'prc65',
                        'prc70' =>  'prc70',
                        'prc75' =>  'prc75',
                        'prc80' =>  'prc80',
                        'prc85' =>  'prc85',
                        'prc90' =>  'prc90',
                        'prc95' =>  'prc95',
    
    
                    )
                ),
    		);
    	}
    
    	function get_style_hash($instance) {
    		return substr( md5( serialize( $this->get_less_variables( $instance ) ) ), 0, 12 );
    	}
    }
    
    siteorigin_widget_register('mdsow-blocbackground', __FILE__, 'MD_S0Widget_BlocBackground_Widget');
    add_action('siteorigin_widgets_enqueue_admin_scripts_mdsow-blocbackground', function (  ){
        $dirAssets = dirname(__FILE__) . DIRECTORY_SEPARATOR . 'assets' . DIRECTORY_SEPARATOR;
    
        $file = $dirAssets . 'css' . DIRECTORY_SEPARATOR . 'admin.css';
        if(is_file($file)) {
            $name = preg_replace('|\.php$|', '', basename(__file__));
            $url = get_template_directory_uri().'/widgets/so-page-builder/'.$name.'/assets/css/admin.css';
            $vers = date("YmdGis", filemtime($file));
            $id = strtolower($name) . '-css';
            wp_enqueue_style( $id, $url, array(), $vers );
        }
    
        $file = $dirAssets . 'js' . DIRECTORY_SEPARATOR . 'admin.js';
        if(is_file($file)) {
            $name = preg_replace('|\.php$|', '', basename(__file__));
            $url = get_template_directory_uri().'/widgets/so-page-builder/'.$name.'/assets/js/admin.js';
            $vers = date("YmdGis", filemtime($file));
            $id = strtolower($name) . '-js';
            wp_enqueue_script( $id, $url, array(), $vers, true );
        }
    }, 10, 2);
    

    The widget who include the first :

    <?php
    /*
    Widget Name: Pictos
    Description: Bloc Pictos
    Author: Michaël DUBOIS
    */
    
    class MD_S0Widget_BlocPictos_Widget extends SiteOrigin_Widget {
    	function __construct() {
    
    		parent::__construct(
    			'mdsow-blocpictos',
    			'Pictos',
    			array(
    				'description' => 'Bloc Pictos',
    				'help' => ''
    			),
    			array(
    
    			),
    			false,
    			plugin_dir_path(__FILE__)
    		);
    	}
    
    	function get_widget_form() {
    
    
    		return array(
                'backgroundwidget' => array(
                    'type' => 'widget',
                    'label' =>  'Background',
                    'class' => 'MD_S0Widget_BlocBackground_Widget',
                    //'hide' => true
                ),
    
                'type' => array(
                    'type' => 'select',
                    'prompt' =>  'Type',
                    'options' => array(
                        'columns3' =>  '3 columns',
                        'columns4' =>  '4 colomns',
                    )
                ),
                'title' => array(
                    'type' => 'text',
                    'label' => 'Title',
                ),
                'text' => array(
                    'type' => 'textarea',
                    'label' => 'Text',
                ),
    
                'pictos' => array(
                    'type' => 'repeater',
                    'label' => 'Pictos',
                    'item_name'  => 'Picto',
                    'item_label' => array(
                        'selector'     => "[id*='pictotitle']",
                        'update_event' => 'change',
                        'value_method' => 'val'
                    ),
                    'fields' => array(
                        'picture' => array(
                            'type' => 'media',
                            'label' => 'Picture',
                            'choose' => 'Choose picture',
                            'update' => 'Set',
                            'library' => 'image',
                            //'fallback' => true
                        ),
                        'pictotitle' => array(
                            'type' => 'textarea',
                            'label' => 'Title',
                        ),
                        'pictotext' => array(
                            'type' => 'textarea',
                            'label' => 'Text',
                        ),
                    )
                ),
    
                'cta' => array(
                    'type' => 'text',
                    'label' => 'CTA',
                ),
                'url' => array(
                    'type' => 'text',
                    'label' => 'URL',
                ),
    		);
    	}
    
    	function get_style_hash($instance) {
    		return substr( md5( serialize( $this->get_less_variables( $instance ) ) ), 0, 12 );
    	}
    
    
    
    	public function get_template_variables( $instance, $args ) {
    	    if(isset($_GET['test-md'])) {
    	        echo('<pre>');
    	        print_r($instance);
    	        echo('</pre>');
    	        exit();
            }
    
            $bckImage  = '';
            $bckClass  = '';//($instance['background'] == 'image') ? '' : $instance['background'];
    
            $pictos = array();
            if( ! empty( $instance['pictos'] ) ) {
                foreach ( $instance['pictos'] as $picto ) {
                    $pictos[] = array(
                        'pictotitle' => trim($picto['pictotitle']),
                        'pictotext' => trim($picto['pictotext']),
                        'pictoimg'  => wp_get_attachment_url($picto['picture'], 'full'),
                    );
                }
            }
    
    		return array(
                'type'       => $instance['type'],
                'title'      => trim($instance['title']),
                'text'       => trim($instance['text']),
                'pictos'     => $pictos,
    		    'bckClass'   => $bckClass,
    		    'cta'       => trim($instance['cta']),
    		    'url'       => trim($instance['url']),
                'preview'    => ( !empty( $instance[ 'is_preview' ] ) ) ? true : false,
    		);
    	}
    
    	function get_less_variables($instance){
    		if ( empty( $instance ) ) {
    			return array();
    		}
    		return array();
    	}
    }
    
    siteorigin_widget_register('mdsow-blocpictos', __FILE__, 'MD_S0Widget_BlocPictos_Widget');
    /*add_action('siteorigin_widgets_enqueue_admin_scripts_mdsow-blocpictos', function (  ){
        $dirAssets = dirname(__FILE__) . DIRECTORY_SEPARATOR . 'assets' . DIRECTORY_SEPARATOR;
    
        $file = $dirAssets . 'css' . DIRECTORY_SEPARATOR . 'admin.css';
        if(is_file($file)) {
            $name = preg_replace('|\.php$|', '', basename(__file__));
            $url = get_template_directory_uri().'/widgets/so-page-builder/'.$name.'/assets/css/admin.css';
            $vers = date("YmdGis", filemtime($file));
            $id = strtolower($name) . '-css';
            wp_enqueue_style( $id, $url, array(), $vers );
        }
    
        $file = $dirAssets . 'js' . DIRECTORY_SEPARATOR . 'admin.js';
        if(is_file($file)) {
            $name = preg_replace('|\.php$|', '', basename(__file__));
            $url = get_template_directory_uri().'/widgets/so-page-builder/'.$name.'/assets/js/admin.js';
            $vers = date("YmdGis", filemtime($file));
            $id = strtolower($name) . '-js';
            wp_enqueue_script( $id, $url, array(), $vers, true );
        }
    }, 10, 2);*/
    

    For test, I use argument “test-md=1” in the URL for the page where is integrated the widget and in the printf we so that “backgroundwidget” value is empty.

    Thank’s for your help

    Michaël

  8. 1 year, 3 months ago Alex S Hi, I Work Here

    Hi Micdub,

    I just ran a test using the provided widget and `backgroundwidget` reflects the selected widget value. To confirm, you’ve selected an option from that widgets select, right? I ask as if you don’t select an option, that value will be empty as the select field has been set to default to nothing.

    Kind regards,
    Alex

  9. 1 year, 3 months ago micdub

    Hi Alex,

    I just put in backgroundwidget one select to send you. In my complete widget I have many fields.
    I select an option and I save the page in admin. When I open the page in admin, my option is selected but if I saw in front page, the value is empty.

    In your test, you can show the value in the front page ?

    Michaël

  10. 1 year, 3 months ago Alex S Hi, I Work Here

    Hi Michaël,

    What do you see when you add print_r( $instance ); to the general widget output, and then preview the widget? That is what I was testing using and the $instance was working as expected.

    In your test, you can show the value in the front page ?

    Can you please provide me with a copy of the template files for these two widgets? I’m unable to actually view the widget on the frontend without them.

    Kind regards,
    Alex

  11. 1 year, 3 months ago micdub

    Alex,

    in print_r, I saw empty.

    I have update for send you all files and now I saw the values.

    I don’t know why.

    You can see the files here :

    In the two widget, I want load javascript when the widget window is open in admin. I find sample code in forum but it’s not working.
    My script is in assets/js/admin.js

    Have you an idea why it’s not working ?

    Thank’s

  12. 1 year, 3 months ago micdub

    The link it’s not written

    http://md-dev.fr/widgets.zip

  13. 1 year, 3 months ago Alex S Hi, I Work Here

    Hi Micdub,

    Thanks. I just tried the provided layout and I’m unable to replicate the reported issues you’re having with $instance not having the selected values. Are you able to replicate this issue on a different website?

    Regarding the JavaScript, the event you’re using isn’t correct for this usage. I recommend using this JavaScript to do this. You’ll also need to load the JavaScript using this method.

    Kind regards,
    Alex

  14. 1 year, 3 months ago micdub

    Thank’s Alex, it’s good for me.

    Michael

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More