-
Notifications
You must be signed in to change notification settings - Fork 16
Adding Options Pages
Michiel Tramper edited this page Mar 28, 2018
·
11 revisions
Option Pages can be added by using the add method, where $values are an array of settings.
$fields = MakeitWorkPress\WP_Custom_Fields\Framework::instance();
$fields->add( 'options', $values );
On the highest level, an options field may have the following keys.
| key | type | description |
|---|---|---|
| title | string | The title of the options page (required) |
| menu_title | string | The title used in the menu (required) |
| capability | string | The capability, such as 'manage_options' (required). |
| id | string | The id of the options page (required). This is the name under which the option will be saved, as well as the slug of your options page. |
| location | string | The optional location of the options page within the dashboard menu. Defaults to 'menu'. Supports 'menu', 'submenu', 'dashboard', 'posts', 'media', 'links', 'pages', 'comments', 'theme', 'users', 'management' or 'options'. |
| menu_position | int | The position in the WordPress admin menu. A higher value is lower down in the menu. Required if the location is set to 'menu'. |
| menu_icon | string | The dashicon icon for the menu, such as ''dashicons-admin-generic''. Required if the location is set to 'menu'. |
| slug | string | The parent slug under which a sub menu page is added. Required if the location is set to 'submenu'. |
| class | string | An optional class for this page. Also supports 'tabs-left' to display tabs to the left. |
| sections | array | The sections, which each have a group of fields |
The following is an example of an options page with every possible field.
$fields = MakeitWorkPress\WP_Custom_Fields\Framework::instance();
$fields->add( 'options', array(
'class' => 'tabs-left',
'id' => 'wp_custom_fields_options_2',
'title' => __('Theme Options 2', 'wp-custom-fields'),
'capability' => 'manage_options',
'menu_title' => __('WP_Custom_Fields 2', 'wp-custom-fields'),
'menu_icon' => 'dashicons-admin-generic',
'menu_position' => 99,
'location' => 'theme',
'sections' => array(
array(
'id' => 'second_section',
'title' => __('Section Two', 'wp-custom-fields'),
'icon' => 'camera_enhance',
'fields' => array(
array(
'id' => 'field1',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'background'
),
array(
'id' => 'field2',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'border'
),
array(
'id' => 'field2',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'boxshadow'
),
array(
'id' => 'field3',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'checkbox',
'options' => array(
'thing_one' => array( 'label' => __('Label One', 'wp-custom-fields') ),
'thing_two' => array( 'label' => __('Label Two', 'wp-custom-fields') )
)
),
array(
'id' => 'field4',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'colorpicker'
),
array(
'id' => 'field5',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'dimension'
),
array(
'id' => 'field6',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'dimensions'
),
array(
'id' => 'field7',
'type' => 'divider'
),
array(
'id' => 'field8',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'editor'
),
array(
'id' => 'field9',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'export',
'option_id' => 'wp_custom_fields_options_2'
),
array(
'id' => 'field9',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'heading'
),
array(
'id' => 'field10',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'icons'
),
array(
'id' => 'field11',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'input'
),
array(
'id' => 'field12',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'location'
),
array(
'id' => 'field13',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'media'
),
array(
'id' => 'field14',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'radio',
'options' => array(
'thing_one' => array( 'label' => __('Label One', 'wp-custom-fields') ),
'thing_two' => array( 'label' => __('Label Two', 'wp-custom-fields') )
)
),
array (
'description' => __('Example Title', 'wp-custom-fields'),
'id' => 'field_repeatable',
'title' => __('Example Description', 'wp-custom-fields'),
'type' => 'repeatable',
'fields' => array(
array(
'id' => 'url',
'title' => __('Url to Social Network', 'wp-custom-fields'),
'type' => 'input',
'subtype' => 'url'
),
array(
'id' => 'network',
'title' => __('Type of Social Network', 'wp-custom-fields'),
'type' => 'select',
'options' => array(
'email' => __('Email', 'wp-custom-fields'),
'facebook' => __('Facebook', 'wp-custom-fields'),
'instagram' => __('Instagram', 'wp-custom-fields'),
'twitter' => __('Twitter', 'wp-custom-fields'),
'linkedin' => __('LinkedIn', 'wp-custom-fields'),
'google-plus' => __('Google Plus', 'wp-custom-fields'),
'pinterest' => __('Pinterest', 'wp-custom-fields'),
'reddit' => __('Reddit', 'wp-custom-fields')
)
)
)
)
array(
'id' => 'field15',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'select',
'options' => array(
'thing_one' => __('Label One', 'wp-custom-fields'),
'thing_two' => __('Label Two', 'wp-custom-fields')
)
),
array(
'id' => 'field16',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'select',
'subtype' => 'post'
),
array(
'id' => 'field17',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'slider'
),
array(
'id' => 'field18',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'textarea'
),
array(
'id' => 'field19',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'typography'
)
)
)
)
) );
The following code adds a custom metabox to pages and posts.
$fields = MakeitWorkPress\WP_Custom_Fields\Framework::instance();
$fields->add( 'meta', array(
'class' => 'tabs-left',
'id' => 'wp_custom_fields_meta',
'title' => __('Page Options', 'wp-custom-fields'),
'screen' => array('page', 'post'),
'single' => true,
'type' => 'post',
'context' => 'normal',
'priority' => 'default',
'sections' => array(
array(
'id' => 'section_1',
'title' => __('Section One', 'wp-custom-fields'),
'icon' => 'camera_enhance',
'fields' => array(
array (
'id' => 'text_field_value_7',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'checkbox',
'subtype' => 'email',
// 'style' => 'switcher switcher-disable',
'options' => array(
'full' => array('label' => __('Enable Fullwidth Content', 'wp-custom-fields') ),
'half' => array('label' => __('Enable Fullwidth Content', 'wp-custom-fields') )
)
),
array(
'title' => __('Example Heading', 'wp-custom-fields'),
'id' => 'thing_heading',
'type' => 'heading',
),
array (
'id' => 'text_field_value',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'input',
'subtype' => 'email',
'sanitize' => 'enabled',
'default' => '[email protected]'
),
array (
'id' => 'text_field_value_2',
'title' => __('Example Title 2', 'wp-custom-fields'),
'description' => __('Example Description 2', 'wp-custom-fields'),
'type' => 'input',
'subtype' => 'url',
'sanitize' => 'enabled',
'default' => 'http://www.pik.nl'
)
)
),
array(
'id' => 'section_2',
'title' => __('Section Two', 'wp-custom-fields'),
'icon' => 'camera_enhance',
'fields' => array(
array(
'id' => 'field1',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'background'
),
array(
'id' => 'field2',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'border'
),
array(
'id' => 'field2',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'boxshadow'
),
array(
'id' => 'field3',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'checkbox',
'options' => array(
'thing_one' => array( 'label' => __('Label One', 'wp-custom-fields') ),
'thing_two' => array( 'label' => __('Label Two', 'wp-custom-fields') )
)
),
array(
'id' => 'field4',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'colorpicker'
),
array(
'id' => 'field5',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'dimension'
),
array(
'id' => 'field6',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'dimensions'
),
array(
'id' => 'field7',
'type' => 'divider'
),
array(
'id' => 'field8',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'editor'
),
array(
'id' => 'field9',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'export',
'option_id' => 'wp_custom_fields_options_2'
),
array(
'id' => 'field9',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'heading'
),
array(
'id' => 'field10',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'icons'
),
array(
'id' => 'field11',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'input'
),
array(
'id' => 'field12',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'location'
),
array(
'id' => 'field13',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'media'
),
array(
'id' => 'field14',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'radio',
'options' => array(
'thing_one' => array( 'label' => __('Label One', 'wp-custom-fields') ),
'thing_two' => array( 'label' => __('Label Two', 'wp-custom-fields') )
)
),
array(
'id' => 'field15',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'select',
'options' => array(
'thing_one' => __('Label One', 'wp-custom-fields'),
'thing_two' => __('Label Two', 'wp-custom-fields')
)
),
array(
'id' => 'field16',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'select',
'subtype' => 'post'
),
array(
'id' => 'field17',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'slider'
),
array(
'id' => 'field18',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'textarea'
),
array(
'id' => 'field19',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'typography'
)
)
)
)
) );WP Custom Fields has been developed by Make it WorkPress