Data_Type

Attributes and methods

Attributes

type
The field type. Usually set to the same value as the type_slug.
type_slug
The slug for the field.
label
The display name for the field.

Methods

render_content($vals = null)
Prints the HTML for the field in the theme options page. This is called with the echo construct.

Use of the render_content() method in a custom data type:

public function render_content($vals = null) { 

  do_action( self::$type_slug . '_before_render_content', $this ); 

  if($vals != null){
    $this->field = (object)$vals;
  }  
  $section = (isset($this->page->section) && $this->page->section != '') ? 'data-section="'.$this->page->section.'"' : '';
  ?>

  <fieldset>
    <legend class="customize-control-title"><span><?php echo stripslashes( $this->field->title ) ?></span></legend>
    <input type="hidden" value="false" name="<?php echo $this->field->alias ?>"  />
    <label>
      <input <?php $this->link(); ?> class="input-check custom-data-type" <?php echo $section; ?> data-type="checkbox-bool-type" type="checkbox" value="true" name="<?php echo $this->field->alias ?>" <?php  if( $this->get_value() == 'true' ) echo 'checked '; ?> /> <?php _e( 'Yes', 'framework' ) ?>
    </label>
  </fieldset> <?php

  do_action( self::$type_slug . '_after_render_content', $this ); 
}

get_value()
Returns the value of a custom field from the database. By default the Data_Type() class will do this for custom data types. You can override the method as needed.

Use of the get_value() method in a custom data type:

public function get_value() {
  $value = parent::get_value();
  
  if(is_array($value)) {
    return $this->field->values;
  } else {
    return $value;
  }
}

save()
Saves the values of the filed into the database. By default the Data_Type() class will do this for custom data types. If the method is overridden the save process must be completely managed within.
assign_actions_and_filters()
Define additional actions and filters.
For a filter to be applied when the data is retrieved from the database it can be named get_options_data_type_{type_slug}

A filter applied when the data is retrieved:

add_filter('get_options_data_type_' . self::$type_slug, 'do_shortcode', 10 );

Use of the assign_actions_and_filters() method in a custom data type:

public static function assign_actions_and_filters() {
  add_filter( 'get_options_data_type_' . self::$type_slug, 'htmlspecialchars_decode', 5 );
  add_filter('get_options_data_type_' . self::$type_slug, 'wptexturize', 10 ); 
  add_filter('get_options_data_type_' . self::$type_slug, 'convert_smilies', 10 ); 
  add_filter('get_options_data_type_' . self::$type_slug, 'wpautop', 10 );        
  add_filter('get_options_data_type_' . self::$type_slug, 'do_shortcode', 10 );        
}

render_settings()
Displays in the Edit Field dialog box and settings fields for the data type in the Options Builder admin interface.

Use of the render_settings() method in a custom data type:

public static function render_settings() { ?>
  
  <script id="checkbox-bool-type" type="text/x-jquery-tmpl">

    <?php do_action( self::$type_slug . '_before_render_settings' ); ?>

    <div class="settings-container">
      <label class="settings-title">
        Value:
        <br><span class="settings-title-caption"></span>
      </label>
      <div class="settings-in">

        <label>
          {{if values == 'true'}}
          <input name="values" value="true" checked="true" type="checkbox">
          {{else}}
          <input name="values" value="true" type="checkbox">
          {{/if}}
          Checked
        </label>

        <br><span class="settings-field-caption"></span>
      </div>
    </div><div class="clear"></div>

    <?php do_action( self::$type_slug . '_after_render_settings' ); ?>

  </script>

<?php }

data_type_register()
Registers a data type, after which that data type will appear in the Edit Field dialog box in the list of field types for the Options Builder.

Use of the data_type_register() method in a custom data type:

public static function data_type_register() { ?>

  <script type="text/javascript">

    jQuery(document).ready(function ($) { 
      builder.registerDataType({
        name: '<?php echo self::$label ?>',
        alias: '<?php echo self::$type_slug ?>',
        settingsFormTemplateID: '<?php echo self::$type_slug ?>'
      });
    });

  </script>

<?php }

Sample use

The following example shows the Checkbox data type. The complete file can be found in the data-types folder of the Runway framework.

<?php
class Checkbox_bool_type extends Data_Type {

  public $type = 'checkbox-bool-type';
  public static $type_slug = 'checkbox-bool-type';
  public $label = 'Checkbox (true / false)';

  public function render_content($vals = null) { 

    do_action( self::$type_slug . '_before_render_content', $this ); 

    if($vals != null){
      $this->field = (object)$vals;
    }  
    $section = (isset($this->page->section) && $this->page->section != '') ? 'data-section="'.$this->page->section.'"' : '';
    ?>
  
    <fieldset>
      <legend class="customize-control-title"><span><?php echo stripslashes( $this->field->title ) ?></span></legend>
      <input type="hidden" value="false" name="<?php echo $this->field->alias ?>"  />
      <label>
        <input <?php $this->link(); ?> class="input-check custom-data-type" <?php echo $section; ?> data-type="checkbox-bool-type" type="checkbox" value="true" name="<?php echo $this->field->alias ?>" <?php  if( $this->get_value() == 'true' ) echo 'checked '; ?> /> <?php _e( 'Yes', 'framework' ) ?>
      </label>
    </fieldset> <?php

    do_action( self::$type_slug . '_after_render_content', $this ); 
  }

  public static function render_settings() { ?>
    
    <script id="checkbox-bool-type" type="text/x-jquery-tmpl">

      <?php do_action( self::$type_slug . '_before_render_settings' ); ?>

      <div class="settings-container">
        <label class="settings-title">
          Value:
          <br><span class="settings-title-caption"></span>
        </label>
        <div class="settings-in">

          <label>
            {{if values == 'true'}}
            <input name="values" value="true" checked="true" type="checkbox">
            {{else}}
            <input name="values" value="true" type="checkbox">
            {{/if}}
            Checked
          </label>

          <br><span class="settings-field-caption"></span>
        </div>
      </div><div class="clear"></div>

      <?php do_action( self::$type_slug . '_after_render_settings' ); ?>

    </script>

  <?php }

  public function get_value() {

    $value = parent::get_value();
    
    if(is_array($value)) {
      return $this->field->values;
    } else {
      return $value;
    }

  }

  public static function data_type_register() { ?>        
          
    <script type="text/javascript">

      jQuery(document).ready(function ($) { 
        builder.registerDataType({            
          name: 'Checkbox (true / false)',            
          alias: '<?php echo self::$type_slug ?>',                
          settingsFormTemplateID: '<?php echo self::$type_slug ?>'
        });
      });

    </script>

  <?php }
} ?>

Default data types

The data types listed below are defaults in the Runway framework and can be used as examples for building custom data types. Each of these data types can be found in the runway-framework/data-types folder.

Checkbox (true/false)

Defined by the Checkbox_bool_type() class, accepts one of two values – true or false – depending on the setting of the “Checked” option.

Checkbox list

Defined by the Checkbox_type() class, accepts all values from the supplied list.

Colorpicker

Defined by the Colorpicker_type() class, accepts the RGB value of the selected color.

Datepicker

Defined by the Datepicker_type() class, accepts the chosen date in the selected date format.

File upload

Defined by the Fileupload_type() class, enables the selection and uploading of a file. Accepts one value: a full path to the file that is to be uploaded.

Input text

Defined by the Input_text() class, accepts the text entered into the input box.

Multiselect

Defined by the Multi_select_type() class, accepts all values from the supplied list.

Image radio buttons

Defined by the Radio_buttons_image() class, accepts the value chosen from the supplied list of image URLs.

Radio buttons

Defined by the Radio_buttons() class, accepts the value chosen from the supplied list of values.

Select

Defined by the Select_type() class, accepts the value chosen from the supplied list of values.

Text editor

Defined by the Text_editor() class, enables comprehensive text editing in Visual and Text modes, accepts the contents of the text editor window.

Textarea

Defined by the Textarea_type() class, enables simple text editing, accepts the content of the textarea input box.

Create a Note

Google+