Image Radio

The image-radio lets you add image radio field.

Parameters

Here are the parameters in adding image-radio.

string | required

a unique slug-like string to use as an id and also as index in saving data in database.

label

string | optional

the label of the field.

description

string | optional

the description of the field and display under the label.

section

string | requiredl

the section where the field will be displayed.

default

string | optional

the default value of the field.

Note: the default value must exists within choices

priority

integer | optional

determines the order of fields in section.

size

array | optional

holds the width and height.

Note: "width" and "height" is required when using size and also supply by string.

direction

string | optional | default : row

determine the direction in displaying in front-end their are two directions "row" and "column".

Note: direction must be supplied only within "row" and "column"].

choices

required | optional

the list of choices to be displayed.

Note: each key must have "image" and "title" and supplied with string.

Note: "image" - the image holds the url of image to added in src - required - string.

Note: "title" - this will be used as title attribute in image - required - string.

Example


Yano::field( 'image-radio', [
   'id'                 => 'imageradiodb1',
   'label'              => 'Select Font Style',
   'description'        => 'Choose the best font style.',
   'section'            => 'section_id',
   'priority'           => 1,
   'choices'            => [
      'bold' => [
	      'image'    => trailingslashit( get_template_directory_uri() ) .'image/bold.png',
	      'title'    => 'Bold'
      ],
      'italic' => [
	      'image'    => trailingslashit( get_template_directory_uri() ) .'image/italic.png',
	      'title'    => 'Italic'
      ],
      'allcaps' => [
	      'image'    => trailingslashit( get_template_directory_uri() ) .'image/allcaps.png',
	      'title'    => 'All Caps'
      ],
      'inderline' => [
	      'image'    => trailingslashit( get_template_directory_uri() ) .'image/underline.png',
	      'title'    => 'Underline'
      ]
   ]
] );

Example with default value! note: default value must exist in choices.


Yano::field( 'image-radio', [
   'id'                 => 'imageradiodb1',
   'label'              => 'Select Font Style',
   'description'        => 'Choose the best font style.',
   'section'            => 'section_id',
   'default'            => 'bold',
   'priority'           => 1,
   'choices'            => [
      'bold' => [
	      'image'    => trailingslashit( get_template_directory_uri() ) .'image/bold.png',
	      'title'    => 'Bold'
      ],
      'italic' => [
	      'image'    => trailingslashit( get_template_directory_uri() ) .'image/italic.png',
	      'title'    => 'Italic'
      ],
      'allcaps' => [
	      'image'    => trailingslashit( get_template_directory_uri() ) .'image/allcaps.png',
	      'title'    => 'All Caps'
      ],
      'inderline' => [
	      'image'    => trailingslashit( get_template_directory_uri() ) .'image/underline.png',
	      'title'    => 'Underline'
      ]
   ]
] );

Example with size value! note: size must be provided with width or height.


Yano::field( 'image-radio', [
   'id'                 => 'imageradiodb1',
   'label'              => 'Select Font Style',
   'description'        => 'Choose the best font style.',
   'section'            => 'section_id',
   'default'            => 'bold',
   'priority'           => 1,
   'size'               => [
      'width'    => '50px',
      'height'   => '50px'
   ],
   'choices'            => [
      'bold' => [
	      'image'    => trailingslashit( get_template_directory_uri() ) .'image/bold.png',
	      'title'    => 'Bold'
      ],
      'italic' => [
	      'image'    => trailingslashit( get_template_directory_uri() ) .'image/italic.png',
	      'title'    => 'Italic'
      ],
      'allcaps' => [
	      'image'    => trailingslashit( get_template_directory_uri() ) .'image/allcaps.png',
	      'title'    => 'All Caps'
      ],
      'inderline' => [
	      'image'    => trailingslashit( get_template_directory_uri() ) .'image/underline.png',
	      'title'    => 'Underline'
      ]
   ]
] );

Example with direction value! note: row and column are the valid direction.


Yano::field( 'image-radio', [
   'id'                 => 'imageradiodb1',
   'label'              => 'Select Font Style',
   'description'        => 'Choose the best font style.',
   'section'            => 'section_id',
   'default'            => 'bold',
   'priority'           => 1,
   'direction'          => 'column',
   'size'               => [
      'width'    => '50px',
      'height'   => '50px'
   ],
   'choices'            => [
      'bold' => [
	      'image'    => trailingslashit( get_template_directory_uri() ) .'image/bold.png',
	      'title'    => 'Bold'
      ],
      'italic' => [
	      'image'    => trailingslashit( get_template_directory_uri() ) .'image/italic.png',
	      'title'    => 'Italic'
      ],
      'allcaps' => [
	      'image'    => trailingslashit( get_template_directory_uri() ) .'image/allcaps.png',
	      'title'    => 'All Caps'
      ],
      'inderline' => [
	      'image'    => trailingslashit( get_template_directory_uri() ) .'image/underline.png',
	      'title'    => 'Underline'
      ]
   ]
] );

Usage

The get_theme_mod() function is recommended to retrieve data.


// Returns an string
$checked = get_theme_mod('imageradiodb1');