Options Builder Field Types

Home Forums Documentation Options Builder Field Types

This topic contains 1 reply, has 2 voices, and was last updated by  Andy 4 years, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #327


    Here’s some documentation prepared by Alex (one of the Runway developers) describing the inbuilt field types available in the Options Builder.

    I’m posting it here because the official Runway documentation site is still in development.

    It’s not carved in stone so feel free to point out anything you think has been missed, or anything that is incorrect or that you think is not clear.

    Also, if anyone has any ideas about what else should be in this particular documentation, please let me know.

    Note that there are screenshots to go with this documentation but I’ve not included them here because this is only a temporary home for the documentation.

    Options Builder Field Types

    The following field types are pre-defined for use with the Options Builder.

    • Checkbox (true/false)
    • Checkbox list
    • Colorpicker
    • Datepicker
    • File upload
    • Input text
    • Multiselect
    • Image radio buttons
    • Radio buttons
    • Select
    • Text editor
    • Textarea

    All fields of any of the above types are defined by their own class, each of which is the successor of the basic Data_Type class that is inherited from the WordPress WP_Customize_Control class. This enables values for these field types to be set also via the Appearance > Customize admin dashboard page.

    Attributes and methods



    The field type.


    The slug for the field type


    render_content($vals = null)

    Displays a custom field of the data type.


    Gets the value of a custom field of the data type.


    Saves the value of a custom field of the data type.


    Enables additional actions and filters to be defined.


    Displays in the Edit Field dialog box settings fields specific to the type of field.


    Registers a data type, after which that data type will appear in the Edit Field dialog box in the list of field types.

    Inbuilt field types

    All of these field types are available when creating or editing a custom field in Runway > Options Builder, and also when creating or editing custom fields for Headers, Footers and Layout Options in Appearance > Layout Manager > Custom Fields.

    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.


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


    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.


    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.


    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.


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

    Next I plan to write something about setting up theme options. I’ll need to have good think about this and (I hope) some direction from the guvnor.

    Watch this space, as they say.



    It’s important to mention, while this list defines the default inputs available for theme options pages, the ability to create custom fields (a.k.a. data-types) is an easy process.

    The fields are stored in the Runway sub-folder “data-types” and much like a WP plugin, anything added to this folder with the proper comment header will be read by the framework and automatically included into the Options Builder for use in theme options pages.

    You can easily duplicate an existing field in the “data-types” folder, give it a custom name, modify it for your custom purpose and drop it back in the folder to instantly have a specialized input. Some uses might include a need for custom date picker, multi-select fields, specialized support for your theme’s design options and a lot more.

    A quick example of a specialized field could be a font selection input. This could include options for Google web fonts, Adobe Edge fonts and a specified list of standard web safe fonts. The settings in the Options Builder could allow you to select which of these three sources was included, then saving the page and the new theme options page would include your custom font picker with the specific options you chose in the Options Builder interface.

    There are so many possible ways you might extend the Options Builder with custom data-types. Runway makes it easy to use the default fields included or create custom fields for your purposes.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.