{"id":49153055,"url":"https://github.com/maddisondesigns/customizer-custom-controls","last_synced_at":"2026-04-22T07:04:29.668Z","repository":{"id":47964071,"uuid":"90274218","full_name":"maddisondesigns/customizer-custom-controls","owner":"maddisondesigns","description":"WordPress Customizer Custom Controls","archived":false,"fork":false,"pushed_at":"2023-08-21T09:37:50.000Z","size":3274,"stargazers_count":409,"open_issues_count":0,"forks_count":118,"subscribers_count":26,"default_branch":"master","last_synced_at":"2026-04-22T07:04:12.828Z","etag":null,"topics":["customizer","jquery","php","wordpress","wordpress-customizer"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maddisondesigns.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-04T14:40:11.000Z","updated_at":"2026-03-31T22:10:41.000Z","dependencies_parsed_at":"2024-07-31T07:21:24.066Z","dependency_job_id":null,"html_url":"https://github.com/maddisondesigns/customizer-custom-controls","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"purl":"pkg:github/maddisondesigns/customizer-custom-controls","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maddisondesigns%2Fcustomizer-custom-controls","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maddisondesigns%2Fcustomizer-custom-controls/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maddisondesigns%2Fcustomizer-custom-controls/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maddisondesigns%2Fcustomizer-custom-controls/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maddisondesigns","download_url":"https://codeload.github.com/maddisondesigns/customizer-custom-controls/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maddisondesigns%2Fcustomizer-custom-controls/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32125101,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-22T00:31:26.853Z","status":"online","status_checked_at":"2026-04-22T02:00:05.693Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["customizer","jquery","php","wordpress","wordpress-customizer"],"created_at":"2026-04-22T07:04:27.651Z","updated_at":"2026-04-22T07:04:29.661Z","avatar_url":"https://github.com/maddisondesigns.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Customizer Custom Controls #\n\n**Author:** Anthony Hortin  \n**Author URI:** https://maddisondesigns.com  \n**License:** GNU General Public License v2 or later  \n**License URI:** http://www.gnu.org/licenses/gpl-2.0.html  \n**Version:** 1.3.1\n\n## Description ##\n\nThere are several different types of basic Core Controls built into the Customizer that are ready to use straight-out-of-the-box. These include text, checkbox, textarea, radio, select and dropdown-pages controls. Later versions of WordPress also introduced Color, Media, Image and Cropped Image controls. If none of the basic core controls suit your needs, you can create and add your own custom controls.\n\nThis example code shows how to incorporate Customizer functionality into your theme (or plugin), including examples of how to create Panels, Sections and how to update the Live Preview window. As well as showing the usage of the (built-in) core controls, there are also a number of Custom Controls that have been built that you're welcome to make use of.\n\nThe example code in `customizer.php` will create a new Panel in the Customizer called `Header \u0026 Navigation` which contains three sections (`Social Icons`, `Contact` \u0026 `Search`). It also creates two new Sections. One called `Sample Custom Controls`, which contains examples of all the custom controls I created. The other new Section, `Default Controls`, contains examples of all the core controls that come with WordPress.\n\nIf you'd like to learn more about Customizer development, check out my Customizer Developers Guide:  \n[The WordPress Customizer – A Developers Guide (Part 1)](https://maddisondesigns.com/2017/05/the-wordpress-customizer-a-developers-guide-part-1)  \n[The WordPress Customizer – A Developers Guide (Part 2)](https://maddisondesigns.com/2017/05/the-wordpress-customizer-a-developers-guide-part-2)\n\nYou can download a sample theme and plugin showing how to implement these Controls, with the following links. Please note though, since both the sample theme and sample plugin use the same Customizer Controls code, don't try to activate the sample plugin on the same site where the sample theme is activated. This will cause an error as you'll be trying to instatiate classes with the same name since they're both using the same code base:  \n[https://github.com/maddisondesigns/Customizer-Custom-Controls-Sample-Theme](https://github.com/maddisondesigns/Customizer-Custom-Controls-Sample-Theme)  \n[https://github.com/maddisondesigns/Customizer-Custom-Controls-Sample-Plugin](https://github.com/maddisondesigns/Customizer-Custom-Controls-Sample-Plugin)  \n\n\n## Core Controls ##\nInput Control (Text, Email, URL, Number, Hidden, Date)  \nCheckbox Control  \nSelect Control  \nRadio Control  \nDropdown Pages Control  \nTextarea Control  \nColor Control  \nMedia Control  \nImage Control  \nCropped Image Control  \nDate Time Control (WP 4.9+)\n\n## Custom Controls ##\nThis code includes the following Custom Controls:  \nToggle Switch  \nSlider  \nSortable Repeater  \nImage Radio Button  \nText Radio Button  \nImage Checkbox  \nSingle Accordion  \nSimple Notice  \nDropdown Select2  \nDropdown Posts  \nTinyMCE Editor  \nGoogle Font Select  \nAlpha Color  \nWPColorPicker Alpha Color  \nSortable Pill Checkbox  \nDivider  \nUpsell Section  \n\n### Toggle Switch ###\n\nThe Toggle Switch Custom Control is basically just a fancy type of checkbox. It allows for two states, either off or on.\n\n![Toggle Switch](https://maddisondesigns.com/wp-content/uploads/2017/05/ToggleSwitch.jpg \"Toggle Switch\")\n\n**Usage**  \nadd_control( $id, $args );\n\n**Parameters**  \n**$id** - (string) (required) Customize Control object or ID of the Setting associated with this Control. Default: None  \n**$args** - (array) (optional) An associative array containing arguments for the setting. Default: empty array  \n\n**Arguments for $args**  \n**label** - Optional. The label that will be displayed. Default: Blank  \n**section** - Required. The Section where there control should appear  \n\n**Example**\n\n````\n$wp_customize-\u003eadd_setting( 'sample_toggle_switch',\n\tarray(\n\t\t'default' =\u003e 0,\n\t\t'transport' =\u003e 'refresh',\n\t\t'sanitize_callback' =\u003e 'skyrocket_switch_sanitization'\n\t)\n);\n$wp_customize-\u003eadd_control( new Skyrocket_Toggle_Switch_Custom_control( $wp_customize, 'sample_toggle_switch',\n\tarray(\n\t\t'label' =\u003e esc_html__( 'Toggle switch' ),\n\t\t'section' =\u003e 'sample_custom_controls_section'\n\t)\n) );\n````\n\n### Slider ###\n\nThe Slider Custom Control allows you to drag a handle across a horizontal bar to increase or decrease a numeric value. The control also has a reset button, allowing you to reset the value back to the default value. The accompanying input field shows you the value of the slider whilst also giving you the ability to manually enter a value as well.\n\nYou can specify the minimum and maximum values for the slider as well as the step size, which is the size of each interval between the minimum and maximum values.\n\n![Slider](https://maddisondesigns.com/wp-content/uploads/2017/05/SliderControl.jpg \"Slider\")\n\n**Usage**  \nadd_control( $id, $args );\n\n**Parameters**  \n**$id** - (string) (required) Customize Control object or ID of the Setting associated with this Control. Default: None  \n**$args** - (array) (optional) An associative array containing arguments for the setting. Default: empty array  \n\n**Arguments for $args**  \n**label** - Optional. The label that will be displayed Default: Blank  \n**section** - Required. The Section where there control should appear  \n**input_attrs** - Required. List of custom input attributes for control output.  \n **min** - Required. Minimum value for the slider  \n **max** - Required. Maximum value for the slider  \n **step** - Required. The size of each interval or step the slider takes between the min and max values\n\n**Example**\n\n````\n$wp_customize-\u003eadd_setting( 'sample_slider_control',\n\tarray(\n\t\t'default' =\u003e 48,\n\t\t'transport' =\u003e 'postMessage',\n\t\t'sanitize_callback' =\u003e 'skyrocket_sanitize_integer'\n\t)\n);\n$wp_customize-\u003eadd_control( new Skyrocket_Slider_Custom_Control( $wp_customize, 'sample_slider_control',\n\tarray(\n\t\t'label' =\u003e esc_html__( 'Slider Control (px)' ),\n\t\t'section' =\u003e 'sample_custom_controls_section',\n\t\t'input_attrs' =\u003e array(\n\t\t\t'min' =\u003e 10, // Required. Minimum value for the slider\n\t\t\t'max' =\u003e 90, // Required. Maximum value for the slider\n\t\t\t'step' =\u003e 1, // Required. The size of each interval or step the slider takes between the minimum and maximum values\n\t\t),\n\t)\n) );\n````\n\n### Sortable Repeater ###\n\nThe Sortable Repeater Custom Control allows you to collect values from one or more input fields. On top of that, the fields can be reordered by simply dragging 'n dropping each field. The control provides an icon handle for easy drag 'n drop reordering, a button for deleting a row and a button for adding a new row.\n\nThis particular Control has been designed for collecting one or more URL's and will validate the fields as such. It will also automatically add 'https://' to any url if it is missing. If you want to collect other type of data, such as plain text, simply duplicate this control and modify as necessary.\n\nThe setting for this control will be saved as a comma delimited string of URL's. To use this setting in your theme, I recommend using the PHP `explode()` function to convert the comma delimited string to an array of strings.\n\n![Sortable Repeater](https://maddisondesigns.com/wp-content/uploads/2017/05/SortableRepeater.jpg \"Sortable Repeater\")\n\n**Usage**  \nadd_control( $id, $args );\n\n**Parameters**  \n**$id** - (string) (required) Customize Control object or ID of the Setting associated with this Control. Default: None  \n**$args** - (array) (optional) An associative array containing arguments for the setting. Default: empty array  \n\n**Arguments for $args**  \n**label** - Optional. The label that will be displayed Default: Blank  \n**description** - Optional. The description to display under the label. Default: Blank.  \n**section** - Required. The Section where there control should appear  \n**button_labels** - Optional. Array containing a list of labels for the control  \n **add** - Optional. Button label for add button. Default: Add\n\n**Example**\n\n````\n$wp_customize-\u003eadd_setting( 'sample_sortable_repeater_control',\n\tarray(\n\t\t'default' =\u003e '',\n\t\t'transport' =\u003e 'refresh',\n\t\t'sanitize_callback' =\u003e 'skyrocket_url_sanitization'\n\t)\n);\n$wp_customize-\u003eadd_control( new Skyrocket_Sortable_Repeater_Custom_Control( $wp_customize, 'sample_sortable_repeater_control',\n\tarray(\n\t\t'label' =\u003e __( 'Sortable Repeater' ),\n\t\t'description' =\u003e esc_html__( 'This is the control description.' ),\n\t\t'section' =\u003e 'sample_custom_controls_section',\n\t\t'button_labels' =\u003e array(\n\t\t\t'add' =\u003e __( 'Add Row' ), // Optional. Button label for Add button. Default: Add\n\t\t)\n\t)\n) );\n````\n\n### Image Radio Button ###\n\nThe Image Radio Button works the same as an ordinary radio button control, in that you can only choose one item out of a number of items. The difference is that it allows you to display images for each selection choice. This is useful where an image provides a better indicator for the user, than simple text. A common use of this type of control is where a user might select the layout of their site.\n\nWhen adding your control, you can specify the url for the image to display, the title text to display when hovering the cursor over the image and the value for each item.\n\nLike an ordinary radio button, the setting that gets saved to the database is the value that you specify for each radio button choice\n\n![Image Radio Button](https://maddisondesigns.com/wp-content/uploads/2017/04/ImageRadioButton.png \"Image Radio Button\")\n\n**Usage**  \nadd_control( $id, $args );\n\n**Parameters**  \n**$id** - (string) (required) Customize Control object or ID of the Setting associated with this Control. Default: None  \n**$args** - (array) (optional) An associative array containing arguments for the setting. Default: empty array  \n\n**Arguments for $args**  \n**label** - Optional. The label that will be displayed Default: Blank  \n**description** - Optional. The description to display under the label. Default: Blank.  \n**section** - Required. The Section where there control should appear  \n**choices** - Required. List of custom choices.  \n **key** - Required. Data that will be stored for the setting\n **image** - Required. URL for the image to display  \n **name** - Required. Title text to display\n\n**Example**\n\n````\n$wp_customize-\u003eadd_setting( 'sample_image_radio_button',\n\tarray(\n\t\t'default' =\u003e 'sidebarright',\n\t\t'transport' =\u003e 'refresh',\n\t\t'sanitize_callback' =\u003e 'skyrocket_text_sanitization'\n\t)\n);\n$wp_customize-\u003eadd_control( new Skyrocket_Image_Radio_Button_Custom_Control( $wp_customize, 'sample_image_radio_button',\n\tarray(\n\t\t'label' =\u003e __( 'Image Radio Button Control' ),\n\t\t'description' =\u003e esc_html__( 'Sample custom control description' ),\n\t\t'section' =\u003e 'sample_custom_controls_section',\n\t\t'choices' =\u003e array(\n\t\t\t'sidebarleft' =\u003e array(  // Required. Value for this particular radio button choice\n\t\t\t\t'image' =\u003e trailingslashit( get_template_directory_uri() ) . 'images/sidebar-left.png', // Required. URL for the image\n\t\t\t\t'name' =\u003e __( 'Left Sidebar' ) // Required. Title text to display\n\t\t\t),\n\t\t\t'sidebarnone' =\u003e array(\n\t\t\t\t'image' =\u003e trailingslashit( get_template_directory_uri() ) . 'images/sidebar-none.png',\n\t\t\t\t'name' =\u003e __( 'No Sidebar' )\n\t\t\t),\n\t\t\t'sidebarright' =\u003e array(\n\t\t\t\t'image' =\u003e trailingslashit( get_template_directory_uri() ) . 'images/sidebar-right.png',\n\t\t\t\t'name' =\u003e __( 'Right Sidebar' )\n\t\t\t)\n\t\t)\n\t)\n) );\n````\n\n### Text Radio Button ###\n\nThe Text Radio Button is another type of radio button, and again, works the same as an ordinary radio button control. The Text Radio Button simply displays the choices in a compact row of text.\n\nWhen adding your control, you specify the text to display for each choice and the setting for each item.\n\nLike an ordinary radio button, the setting that gets saved to the database is the value that you specify for each radio button choice.\n\n![Text Radio Button](https://maddisondesigns.com/wp-content/uploads/2017/05/TextRadioButton.png \"Text Radio Button\")\n\n**Usage**  \nadd_control( $id, $args );\n\n**Parameters**  \n**$id** - (string) (required) Customize Control object or ID of the Setting associated with this Control. Default: None  \n**$args** - (array) (optional) An associative array containing arguments for the setting. Default: empty array  \n\n**Arguments for $args**  \n**label** - Optional. The label that will be displayed Default: Blank  \n**description** - Optional. The description to display under the label. Default: Blank.  \n**section** - Required. The Section where there control should appear  \n**choices** - Required. List of custom choices.  \n **key** - Required. Data that will be stored for the setting  \n **value** - Required. Data that is displayed for the radio button choice\n\n**Example**\n\n````\n$wp_customize-\u003eadd_setting( 'sample_text_radio_button',\n\tarray(\n\t\t'default' =\u003e 'right',\n\t\t'transport' =\u003e 'refresh',\n\t\t'sanitize_callback' =\u003e 'skyrocket_text_sanitization'\n\t)\n);\n$wp_customize-\u003eadd_control( new Skyrocket_Text_Radio_Button_Custom_Control( $wp_customize, 'sample_text_radio_button',\n\tarray(\n\t\t'label' =\u003e __( 'Text Radio Button Control' ),\n\t\t'description' =\u003e esc_html__( 'Sample custom control description' ),\n\t\t'section' =\u003e 'sample_custom_controls_section',\n\t\t'choices' =\u003e array(\n\t\t\t'left' =\u003e __( 'Left' ), // Required. Setting for this particular radio button choice and the text to display\n\t\t\t'centered' =\u003e __( 'Centered' ), // Required. Setting for this particular radio button choice and the text to display\n\t\t\t'right' =\u003e __( 'Right' ) // Required. Setting for this particular radio button choice and the text to display\n\t\t)\n\t)\n) );\n````\n\n### Image Checkbox ###\n\nThe Image Checkbox works the same as an ordinary checkbox control, in that you can select one or more items out of a number of items. The difference is that it allows you to display images for each selection choice. This is useful where an image provides a better indicator for the user, than simple text. A common use of this type of control is where a user might select the weight of a font (e.g. Bold, Italic etc.).\n\nWhen adding your control, you can specify the url for the image to display, the title text to display when hovering the cursor over the image and the value for each item.\n\nThe setting that gets saved to the database is a comma-separated string of values for each of the items that are selected.\n\n![Image Checkbox](https://maddisondesigns.com/wp-content/uploads/2017/04/ImageCheckbox.jpg \"Image Checkbox\")\n\n**Usage**  \nadd_control( $id, $args );\n\n**Parameters**  \n**$id** - (string) (required) Customize Control object or ID of the Setting associated with this Control. Default: None  \n**$args** - (array) (optional) An associative array containing arguments for the setting. Default: empty array  \n\n**Arguments for $args**  \n**label** - Optional. The label that will be displayed Default: Blank  \n**description** - Optional. The description to display under the label. Default: Blank.  \n**section** - Required. The Section where there control should appear  \n**choices** - Required. List of custom choices.  \n **key** - Required. Data that will be stored for the setting  \n **image** - Required. URL for the image to display  \n **name** - Required. Title text to display\n\n**Example**\n\n````\n$wp_customize-\u003eadd_setting( 'sample_image_checkbox',\n\tarray(\n\t\t'default' =\u003e 'stylebold,styleallcaps',\n\t\t'transport' =\u003e 'refresh',\n\t\t'sanitize_callback' =\u003e 'skyrocket_text_sanitization'\n\t)\n);\n$wp_customize-\u003eadd_control( new Skyrocket_Image_checkbox_Custom_Control( $wp_customize, 'sample_image_checkbox',\n\tarray(\n\t\t'label' =\u003e __( 'Image Checkbox Control' ),\n\t\t'description' =\u003e esc_html__( 'Sample custom control description' ),\n\t\t'section' =\u003e 'sample_custom_controls_section',\n\t\t'choices' =\u003e array(\n\t\t\t'stylebold' =\u003e array( // Required. Setting for this particular radio button choice\n\t\t\t\t'image' =\u003e trailingslashit( get_template_directory_uri() ) . 'images/Bold.png', // Required. URL for the image\n\t\t\t\t'name' =\u003e __( 'Bold' ) // Required. Title text to display\n\t\t\t),\n\t\t\t'styleitalic' =\u003e array(\n\t\t\t\t'image' =\u003e trailingslashit( get_template_directory_uri() ) . 'images/Italic.png',\n\t\t\t\t'name' =\u003e __( 'Italic' )\n\t\t\t),\n\t\t\t'styleallcaps' =\u003e array(\n\t\t\t\t'image' =\u003e trailingslashit( get_template_directory_uri() ) . 'images/AllCaps.png',\n\t\t\t\t'name' =\u003e __( 'All Caps' )\n\t\t\t),\n\t\t\t'styleunderline' =\u003e array(\n\t\t\t\t'image' =\u003e trailingslashit( get_template_directory_uri() ) . 'images/Underline.png',\n\t\t\t\t'name' =\u003e __( 'Underline' )\n\t\t\t)\n\t\t)\n\t)\n) );\n````\n\n### Single Accordion ###\n\nThe Single Accordion Control allows you to display a large block of text such as instructional information, whilst keeping it hidden or minimised until clicked. When the control is clicked, the content will become visible and when clicked again, the content will hide.\n\nThere's no settings saved for this control, it's purely for showing/hiding a block of content.\n\nYou can pass it an array of key/values pairs or plain text content (incl. basic html tags `a`, `br`, `em`, `strong`, `i`).\n\n![Single Accordion](https://maddisondesigns.com/wp-content/uploads/2017/04/SingleAccordion.jpg \"Single Accordion\")\n\n**Usage**  \nadd_control( $id, $args );\n\n**Parameters**  \n**$id** - (string) (required) Customize Control object or ID of the Setting associated with this Control. Default: None  \n**$args** - (array) (optional) An associative array containing arguments for the setting. Default: empty array  \n\n**Arguments for $args**  \n**label** - Optional. The label that will be displayed Default: Blank  \n**description** - Required. The text to hide under the accordion, passed as an array or string  \n**section** - Required. The Section where there control should appear\n\n**Example**\n\n````\n$sampleIconsList = array(\n\t'Behance' =\u003e __( '\u003ci class=\"fa fa-behance\"\u003e\u003c/i\u003e', 'skyrocket' ),\n\t'Bitbucket' =\u003e __( '\u003ci class=\"fa fa-bitbucket\"\u003e\u003c/i\u003e', 'skyrocket' ),\n\t'CodePen' =\u003e __( '\u003ci class=\"fa fa-codepen\"\u003e\u003c/i\u003e', 'skyrocket' ),\n\t'DeviantArt' =\u003e __( '\u003ci class=\"fa fa-deviantart\"\u003e\u003c/i\u003e', 'skyrocket' ),\n\t'Dribbble' =\u003e __( '\u003ci class=\"fa fa-dribbble\"\u003e\u003c/i\u003e', 'skyrocket' ),\n\t'Etsy' =\u003e __( '\u003ci class=\"fa fa-etsy\"\u003e\u003c/i\u003e', 'skyrocket' ),\n\t'Facebook' =\u003e __( '\u003ci class=\"fa fa-facebook\"\u003e\u003c/i\u003e', 'skyrocket' ),\n\t'Flickr' =\u003e __( '\u003ci class=\"fa fa-flickr\"\u003e\u003c/i\u003e', 'skyrocket' ),\n\t'Foursquare' =\u003e __( '\u003ci class=\"fa fa-foursquare\"\u003e\u003c/i\u003e', 'skyrocket' ),\n\t'GitHub' =\u003e __( '\u003ci class=\"fa fa-github\"\u003e\u003c/i\u003e', 'skyrocket' ),\n);\n$wp_customize-\u003eadd_setting( 'sample_single_accordion',\n\tarray(\n\t\t'default' =\u003e '',\n\t\t'transport' =\u003e 'refresh',\n\t\t'sanitize_callback' =\u003e 'skyrocket_text_sanitization'\n\t)\n);\n$wp_customize-\u003eadd_control( new Skyrocket_Single_Accordion_Custom_Control( $wp_customize, 'sample_single_accordion',\n\tarray(\n\t\t'label' =\u003e __( 'Single Accordion Control' ),\n\t\t'description' =\u003e $sampleIconsList, // Required. Passing an array of key/values pairs which are displayed in a list\n\t\t'section' =\u003e 'sample_custom_controls_section'\n\t)\n) );\n\n$wp_customize-\u003eadd_setting( 'another_sample_single_accordion',\n\tarray(\n\t\t'default' =\u003e '',\n\t\t'transport' =\u003e 'refresh',\n\t\t'sanitize_callback' =\u003e 'skyrocket_text_sanitization'\n\t)\n);\n$wp_customize-\u003eadd_control( new Skyrocket_Single_Accordion_Custom_Control( $wp_customize, 'another_sample_single_accordion',\n\tarray(\n\t\t'label' =\u003e __( 'Another Single Accordion Control' ),\n\t\t'description' =\u003e 'This is some simple text with an \u003ca href=\"http://google.com\"\u003ehtml link\u003c/a\u003e included.',  // Required. Passing some text with some basic html content\n\t\t'section' =\u003e 'sample_custom_controls_section'\n\t)\n) );\n````\n\n### Simple Notice ###\n\nThe Simple Notice Control allows you to display a block of text such as instructional information. There's no settings saved for this control, it's purely for displaying a block of content.\n\nThe text content can include basic html tags such as `a`, `br`, `em`, `strong`, `i`, `span` and `code`.\n\n![Simple Notice](https://maddisondesigns.com/wp-content/uploads/2017/04/SimpleNotice.png \"Simple Notice\")\n\n**Usage**  \nadd_control( $id, $args );\n\n**Parameters**  \n**$id** - (string) (required) Customize Control object or ID of the Setting associated with this Control. Default: None  \n**$args** - (array) (optional) An associative array containing arguments for the setting. Default: empty array  \n\n**Arguments for $args**  \n**label** - Optional. The label that will be displayed Default: Blank  \n**description** - Required. The text to display  \n**section** - Required. The Section where there control should appear\n\n**Example**\n\n````\n$wp_customize-\u003eadd_setting( 'sample_simple_notice',\n\tarray(\n\t\t'default' =\u003e '',\n\t\t'transport' =\u003e 'postMessage',\n\t\t'sanitize_callback' =\u003e 'skyrocket_text_sanitization'\n\t)\n);\n$wp_customize-\u003eadd_control( new Skyrocket_Simple_Notice_Custom_control( $wp_customize, 'sample_simple_notice',\n\tarray(\n\t\t'label' =\u003e __( 'Simple Notice Control' ),\n\t\t'description' =\u003e __('This Custom Control allows you to display a simple title and description to your users. You can even include \u003ca href=\"http://google.com\" target=\"_blank\"\u003ebasic html\u003c/a\u003e.' ),\n\t\t'section' =\u003e 'sample_custom_controls_section'\n\t)\n) );\n````\n\n### Dropdown Select2 ###\nSelect2 is a jQuery based replacement for select boxes. Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.\n\nThe Dropdown Select2 Custom Control provides a simple way of implementing a Select2 Dropwdown in the Customizer. One of the main benefits of using this Select2 Dropdown over a regular Dropdown is that it provides a handy input field allowing you to type in and search for the item your looking for. This is really handy when your dropdown list is extremely long and scrolling through the list becomes cumbersome. An example of where you might want to use this over a regular Dropdown is when you have a list of Countries or Timezones. Basically, any Dropdown list that is more than a dozen entries would benefit from using this Select2 Custom Control over a regular Dropdown control.\n\nOne of the other benefits of this control is the ability to handle Multi-Select lists. That is, it provides you with the ability to easily select multiple entries in your list, rather than just a single entry, if you so desire. This can be achieved simply by including `'multiselect' =\u003e true` in your `input_attrs`.\n\nThe Dropdown Select2 Custom Control handles a straight forward list of entries by passing your entries as an array using the `'choices'` parameter. Alternatively, if you want your Dropdown list to show Option Groups (i.e. the ability to group your list into different sections), then you can also pass an array of arrays to `'choices'`.\n\nIf you wish to select default values, pass a simple string when using the control to select a single entry. When using the control as a mutli-select, pass an array of strings to select multiple default values.\n\nTo santize your controls data, use my `skyrocket_text_sanitization` function or any other function that can sanitize a simple string and also a series of comma delimited strings. It's worth noting that the multiselect dropdown will either save a single string or a series of comma delimited strings, depending on the number of entries selected in the dropdown.\n\nWhen only a single entry is selected, even when using the multiselect dropdown, then the setting will be saved to the database as a single string. If you are using the multiselect dropdown (i.e. `'multiselect' =\u003e true`) and you've selected multiple entries, they will be saved to the database as a series of comma delimited strings.\n\n![Dropdown Select2](https://maddisondesigns.com/wp-content/uploads/2017/05/DropdownSelect2Control.png \"Dropdown Select2\")\n\n**Usage**  \nadd_control( $id, $args );\n\n**Parameters**  \n**$id** - (string) (required) Customize Control object or ID of the Setting associated with this Control. Default: None  \n**$args** - (array) (optional) An associative array containing arguments for the setting. Default: empty array  \n\n**Arguments for $args**  \n**label** - Optional. The label that will be displayed Default: Blank  \n**description** - Required. The text to display  \n**section** - Required. The Section where there control should appear\n**input_attrs** - Optional. List of custom choices.  \n **placeholder** - Optional. The Placeholder value to display. Select2 requires a Placeholder value to be set when using the clearall option. Default = 'Please select...'  \n **multiselect** - Optional. Select a single entry from the dropdown or select multiple. Either true or false. Default = false  \n**choices** - Required. List of custom choices.  \n **key** - Required. Data that will be stored for the setting  \n **value** - Required. Text to display in the control  \n\n**Example**\n\n````\n// Test of Dropdown Select2 Control (single select)\n$wp_customize-\u003eadd_setting( 'sample_dropdown_select2_control_single',\n\tarray(\n\t\t'default' =\u003e 'vic',\n\t\t'transport' =\u003e 'refresh',\n\t\t'sanitize_callback' =\u003e 'skyrocket_text_sanitization'\n\t)\n);\n$wp_customize-\u003eadd_control( new Skyrocket_Dropdown_Select2_Custom_Control( $wp_customize, 'sample_dropdown_select2_control_single',\n\tarray(\n\t\t'label' =\u003e __( 'Dropdown Select2 Control', 'skyrocket' ),\n\t\t'description' =\u003e esc_html__( 'Sample Dropdown Select2 custom control (Single Select)', 'skyrocket' ),\n\t\t'section' =\u003e 'sample_custom_controls_section',\n\t\t'input_attrs' =\u003e array(\n\t\t\t'placeholder' =\u003e __( 'Please select a state...', 'skyrocket' ),\n\t\t\t'multiselect' =\u003e false,\n\t\t),\n\t\t'choices' =\u003e array(\n\t\t\t'nsw' =\u003e __( 'New South Wales', 'skyrocket' ),\n\t\t\t'vic' =\u003e __( 'Victoria', 'skyrocket' ),\n\t\t\t'qld' =\u003e __( 'Queensland', 'skyrocket' ),\n\t\t\t'wa' =\u003e __( 'Western Australia', 'skyrocket' ),\n\t\t\t'sa' =\u003e __( 'South Australia', 'skyrocket' ),\n\t\t\t'tas' =\u003e __( 'Tasmania', 'skyrocket' ),\n\t\t\t'act' =\u003e __( 'Australian Capital Territory', 'skyrocket' ),\n\t\t\t'nt' =\u003e __( 'Northern Territory', 'skyrocket' ),\n\t\t)\n\t)\n) );\n\n// Test of Dropdown Select2 Control (Multi-Select) with Option Groups\n$wp_customize-\u003eadd_setting( 'sample_dropdown_select2_control_multi',\n\tarray(\n\t\t'default' =\u003e array ( 'Antarctica/McMurdo', 'Australia/Melbourne', 'Australia/Broken_Hill' ),\n\t\t'transport' =\u003e 'refresh',\n\t\t'sanitize_callback' =\u003e 'skyrocket_text_sanitization'\n\t)\n);\n$wp_customize-\u003eadd_control( new Skyrocket_Dropdown_Select2_Custom_Control( $wp_customize, 'sample_dropdown_select2_control_multi',\n\tarray(\n\t\t'label' =\u003e __( 'Dropdown Select2 Control', 'skyrocket' ),\n\t\t'description' =\u003e esc_html__( 'Sample Dropdown Select2 custom control (Multi-Select)', 'skyrocket' ),\n\t\t'section' =\u003e 'sample_custom_controls_section',\n\t\t'input_attrs' =\u003e array(\n\t\t\t'multiselect' =\u003e true,\n\t\t),\n\t\t'choices' =\u003e array(\n\t\t\t__( 'Antarctica', 'skyrocket' ) =\u003e array(\n\t\t\t\t'Antarctica/Casey' =\u003e __( 'Casey', 'skyrocket' ),\n\t\t\t\t'Antarctica/Davis' =\u003e __( 'Davis', 'skyrocket' ),\n\t\t\t\t'Antarctica/DumontDurville' =\u003e __( 'DumontDUrville', 'skyrocket' ),\n\t\t\t\t'Antarctica/Macquarie' =\u003e __( 'Macquarie', 'skyrocket' ),\n\t\t\t\t'Antarctica/Mawson' =\u003e __( 'Mawson', 'skyrocket' ),\n\t\t\t\t'Antarctica/McMurdo' =\u003e __( 'McMurdo', 'skyrocket' ),\n\t\t\t\t'Antarctica/Palmer' =\u003e __( 'Palmer', 'skyrocket' ),\n\t\t\t\t'Antarctica/Rothera' =\u003e __( 'Rothera', 'skyrocket' ),\n\t\t\t\t'Antarctica/Syowa' =\u003e __( 'Syowa', 'skyrocket' ),\n\t\t\t\t'Antarctica/Troll' =\u003e __( 'Troll', 'skyrocket' ),\n\t\t\t\t'Antarctica/Vostok' =\u003e __( 'Vostok', 'skyrocket' ),\n\t\t\t),\n\t\t\t__( 'Atlantic', 'skyrocket' ) =\u003e array(\n\t\t\t\t'Atlantic/Azores' =\u003e __( 'Azores', 'skyrocket' ),\n\t\t\t\t'Atlantic/Bermuda' =\u003e __( 'Bermuda', 'skyrocket' ),\n\t\t\t\t'Atlantic/Canary' =\u003e __( 'Canary', 'skyrocket' ),\n\t\t\t\t'Atlantic/Cape_Verde' =\u003e __( 'Cape Verde', 'skyrocket' ),\n\t\t\t\t'Atlantic/Faroe' =\u003e __( 'Faroe', 'skyrocket' ),\n\t\t\t\t'Atlantic/Madeira' =\u003e __( 'Madeira', 'skyrocket' ),\n\t\t\t\t'Atlantic/Reykjavik' =\u003e __( 'Reykjavik', 'skyrocket' ),\n\t\t\t\t'Atlantic/South_Georgia' =\u003e __( 'South Georgia', 'skyrocket' ),\n\t\t\t\t'Atlantic/Stanley' =\u003e __( 'Stanley', 'skyrocket' ),\n\t\t\t\t'Atlantic/St_Helena' =\u003e __( 'St Helena', 'skyrocket' ),\n\t\t\t),\n\t\t\t__( 'Australia', 'skyrocket' ) =\u003e array(\n\t\t\t\t'Australia/Adelaide' =\u003e __( 'Adelaide', 'skyrocket' ),\n\t\t\t\t'Australia/Brisbane' =\u003e __( 'Brisbane', 'skyrocket' ),\n\t\t\t\t'Australia/Broken_Hill' =\u003e __( 'Broken Hill', 'skyrocket' ),\n\t\t\t\t'Australia/Currie' =\u003e __( 'Currie', 'skyrocket' ),\n\t\t\t\t'Australia/Darwin' =\u003e __( 'Darwin', 'skyrocket' ),\n\t\t\t\t'Australia/Eucla' =\u003e __( 'Eucla', 'skyrocket' ),\n\t\t\t\t'Australia/Hobart' =\u003e __( 'Hobart', 'skyrocket' ),\n\t\t\t\t'Australia/Lindeman' =\u003e __( 'Lindeman', 'skyrocket' ),\n\t\t\t\t'Australia/Lord_Howe' =\u003e __( 'Lord Howe', 'skyrocket' ),\n\t\t\t\t'Australia/Melbourne' =\u003e __( 'Melbourne', 'skyrocket' ),\n\t\t\t\t'Australia/Perth' =\u003e __( 'Perth', 'skyrocket' ),\n\t\t\t\t'Australia/Sydney' =\u003e __( 'Sydney', 'skyrocket' ),\n\t\t\t)\n\t\t)\n\t)\n) );\n````\n\n### Dropdown Posts ###\n\nThe Dropdown Posts Custom Control allows you to display a dropdown list of your Posts. You can display all Posts or just a selection by using the `input_attrs` array when adding your control.\n\nThis control is extremely flexible. Not only can you display a list of your typical (blog) Posts, but it can actually show any type of Post, such as WooCommerce Products, or even Pages. You can pass an array of Post ID's to include, an array of Post IDs *NOT* to include, how many posts to retrieve, the Post Type (e.g. you could use `product` for WooCommerce products) and a long list of other options. To see the complete list of values you can pass using the `input_attrs` array, see [WP_Query::parse_query()](https://developer.wordpress.org/reference/classes/wp_query/parse_query/) in the WordPress Codex.\n\nThe setting that gets saved to the database is a Post ID.\n\n![Dropdown Posts](https://maddisondesigns.com/wp-content/uploads/2018/03/DropdownPostsControl.jpg \"Dropdown Posts\")\n\n**Usage**  \nadd_control( $id, $args );\n\n**Parameters**  \n**$id** - (string) (required) Customize Control object or ID of the Setting associated with this Control. Default: None  \n**$args** - (array) (optional) An associative array containing arguments for the setting. Default: empty array  \n\n**Arguments for $args**  \n**label** - Optional. The label that will be displayed Default: Blank  \n**description** - Optional. The description to display under the label. Default: Blank.  \n**section** - Required. The Section where there control should appear  \n**input_attrs** - Optional. List of post options. The options listed below are the most common. See [WP_Query::parse_query()](https://developer.wordpress.org/reference/classes/wp_query/parse_query/) in the WordPress Codex for the complete list.  \n **posts_per_page** - Optional. The number of posts to retrieve. Use -1 to retrieve all posts. Default: 5  \n **orderby** - Optional. Order to sort retrieved posts by. Accepts 'none', 'name', 'author', 'date', 'title', 'modified', 'menu_order', 'parent', 'ID', 'rand' and a number of others. Default: 'date'  \n **order** - Optional.  Designates ascending or descending order of posts. Accepts 'ASC' or 'DESC'. Default: 'DESC'  \n **cat** - Optional. Category ID or comma-separated list of IDs. Default: 0  \n **post__in** - Optional. An array of post IDs to retrieve (sticky posts will be included)  \n **post__not_in** - Optional. An array of post IDs not to retrieve. *Note:* a string of comma- separated IDs will NOT work  \n **post_type** - Optional. A post type slug (string) or array of post type slugs. Default: 'post'  \n\n**Example**\n\n````\n$wp_customize-\u003eadd_setting( 'sample_dropdown_posts_control',\n\tarray(\n\t\t'default' =\u003e '',\n\t\t'transport' =\u003e 'postMessage',\n\t\t'sanitize_callback' =\u003e 'absint'\n\t)\n);\n$wp_customize-\u003eadd_control( new Skyrocket_Dropdown_Posts_Custom_Control( $wp_customize, 'sample_dropdown_posts_control',\n\tarray(\n\t\t'label' =\u003e __( 'Dropdown Posts Control', 'skyrocket' ),\n\t\t'description' =\u003e esc_html__( 'Sample Dropdown Posts custom control description', 'skyrocket' ),\n\t\t'section' =\u003e 'sample_custom_controls_section',\n\t\t'input_attrs' =\u003e array(\n\t\t\t'posts_per_page' =\u003e -1,\n\t\t\t'orderby' =\u003e 'name',\n\t\t\t'order' =\u003e 'ASC',\n\t\t),\n\t)\n) );\n````\n\n### TinyMCE Editor ###\n\nThe TinyMCE editor works the same as the standard TinyMCE Editor that you use when creating a Page or Post. The only difference you'll notice is that it has a minimalist toolbar. This is mainly because you're  not likely to need the same full-featured toolbar as you would when creating a Page or Post. It's also due, in part, to the limited screen space available in the Customizer sidebar. Like the standard Page/Post TinyMCE editor, you can add text \u0026 links, along with various styles such as bold, italics and a number of other styles.\n\nWhen adding your control, you can also specify what toolbar icons you would like to display. You can have one toolbar row or two toolbar rows. If you don't specify any toolbars, the default is to display one toolbar with bold, italic, bullet list, number list, align left, align center, align right and link buttons.\n\nThe full list of available toolbar buttons is available on the official [TinyMCE website](https://www.tinymce.com/docs/advanced/editor-control-identifiers/). Their [Examples \u0026 Demo pages](https://www.tinymce.com/docs/demo/basic-example/) also has a number of examples showing how each of the toolbar buttons would display. It's worth noting that some toolbar buttons require additional [TinyMCE plugins](https://www.tinymce.com/docs/get-started/work-with-plugins/), not all of which are available by default in the WordPress version of TinyMCE.\n\nYou can also choose to display or hide the Add Media button, enabling you to easily add images into your TinyMCE Control. The Add Media button will be hidden by default.\n\nWhen sanitizing your setting, you can simply use the core wp_kses_post() function, which will sanitize the content for allowed HTML tags for post content.\n\nThe setting that gets saved to the database will be a string with the allowed HTML tags and attributes intact.\n\n**Please note:** The TinyMCE Editor Custom Control will only work in WordPress 4.8 and above as the JavaScript functionality required for its use was only added in WP 4.8.\n\n![Image Checkbox](https://maddisondesigns.com/wp-content/uploads/2017/05/TinyMCE-Editor.jpg \"TinyMCE Editor\")\n\n**Usage**  \nadd_control( $id, $args );\n\n**Parameters**  \n**$id** - (string) (required) Customize Control object or ID of the Setting associated with this Control. Default: None  \n**$args** - (array) (optional) An associative array containing arguments for the setting. Default: empty array  \n\n**Arguments for $args**  \n**label** - Optional. The label that will be displayed Default: Blank  \n**description** - Optional. The description to display under the label. Default: Blank.  \n**section** - Required. The Section where there control should appear  \n**input_attrs** - Optional. List of custom choices.  \n **toolbar1** - Optional. String containing a list of toolbar buttons to display on the first toolbar row. Default: 'bold italic bullist numlist alignleft aligncenter alignright link'  \n **toolbar2** - Optional. String containing a list of toolbar buttons to display on the second toolbar row. Default: blank  \n **mediaButtons** - Optional. Display or hide the Add Media button. Either true or false. Default: false  \n\n**Example**\n\n````\n$wp_customize-\u003eadd_setting( 'sample_tinymce_editor',\n\tarray(\n\t\t'default' =\u003e '',\n\t\t'transport' =\u003e 'postMessage',\n\t\t'sanitize_callback' =\u003e 'wp_kses_post'\n\t)\n);\n$wp_customize-\u003eadd_control( new Skyrocket_TinyMCE_Custom_control( $wp_customize, 'sample_tinymce_editor',\n\tarray(\n\t\t'label' =\u003e __( 'TinyMCE Control' ),\n\t\t'description' =\u003e __( 'This is a TinyMCE Editor Custom Control' ),\n\t\t'section' =\u003e 'sample_custom_controls_section',\n\t\t'input_attrs' =\u003e array(\n\t\t\t'toolbar1' =\u003e 'bold italic bullist numlist alignleft aligncenter alignright link',\n\t\t\t'toolbar2' =\u003e 'formatselect outdent indent | blockquote charmap',\n\t\t\t'mediaButtons' =\u003e true,\n\t\t)\n\t)\n) );\n````\n\n### Google Font Select ###\nOne of the issues I've found with a lot of Google Font controls in numerous themes and plugins is that they don't allow for Italic and Bold weights. They'll change the regular text to the chosen font, but any text that you make bold or italic, reverts back to the original font. One of the reasons for this is because they don't specify the necessary italic and bold weights when retrieving the fonts from Google.\n\nThe Google Font Control will allow you to select a Google font and also specify the weight for the regular, italic and bold weights. The list of Google Font choices are stored in a json file generated by calling the Google Webfonts API. So as to avoid having to include your own Google Fonts API Key in your theme, you should generate this list of fonts before you add your theme options. You can get the complete list of Google Fonts, sorted by popularity by calling https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity\u0026key=YOUR-API-KEY. A complete list of fonts sorted alphabetically can be retrieved by https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY (Don't forget to include your own Google Fonts API Key in the appropriate place).\n\nWhen defining your control, you can specify the number of fonts to display and the order in which they should be displayed (either alphabetically or by popularity). If your default font, or the currently saved font, is not included in the list of fonts you're displaying, it will automatically be prepended to the start of the list as the default font. As an example, if you specify specify 'Open Sans' as your default font, but only elect to show only the first 10 fonts, sorted alphabetically, then 'Open Sans' will be automatically prepended to the list of fonts shown in the control.\n\nThe Font Family dropdown also implements a Select2 control, which adds an input field allowing you to type in and search for the desired font. This makes finding your font easier than having to scroll through the long list of Google Font names.\n\nThe setting is saved to the database as a json string. The easiest way to use this data in your theme is by using the \u003ccode\u003ejson_decode()\u003c/code\u003e PHP function to convert the json string into an array. From there, it's easy enough to get the Font name, regular font weight, italic weight, bold weight, and the font category which is useful for specifying a fallback font.\n\n![Google Font Select](https://maddisondesigns.com/wp-content/uploads/2017/05/GoogleFontSelect.png \"Google Font Select\")\n\n**Usage**  \nadd_control( $id, $args );\n\n**Parameters**  \n**$id** - (string) (required) Customize Control object or ID of the Setting associated with this Control. Default: None  \n**$args** - (array) (optional) An associative array containing arguments for the setting. Default: empty array  \n\n**Arguments for $args**  \n**label** - Optional. The label that will be displayed Default: Blank  \n**description** - Required. The text to display  \n**section** - Required. The Section where there control should appear  \n**input_attrs** - Optional. List of custom choices.  \n **font_count** - Optional. The number of fonts to display from the json file. Either positive integer or 'all'. Default = 'all'  \n **orderby** - Optional. The font list sort order. Either 'alpha' or 'popular'. Default = 'alpha'  \n\n**Example**\n\n````\n$wp_customize-\u003eadd_setting( 'sample_google_font_select',\n\tarray(\n\t 'default' =\u003e '{\"font\":\"Open Sans\",\"regularweight\":\"regular\",\"italicweight\":\"italic\",\"boldweight\":\"700\",\"category\":\"sans-serif\"}',\n\t),\n\t'sanitize_callback' =\u003e 'skyrocket_google_font_sanitization'\n);\n$wp_customize-\u003eadd_control( new Skyrocket_Google_Font_Select_Custom_Control( $wp_customize, 'sample_google_font_select',\n\tarray(\n\t\t'label' =\u003e __( 'Google Font Control' ),\n\t\t'description' =\u003e esc_html__( 'Sample custom control description' ),\n\t\t'section' =\u003e 'sample_custom_controls_section',\n\t\t'input_attrs' =\u003e array(\n\t\t\t'font_count' =\u003e 'all',\n\t\t\t'orderby' =\u003e 'alpha',\n\t\t),\n\t)\n) );\n````\n\n### Alpha Color ###\n\nAll props for this control go to [Braad Martin](http://braadmartin.com/alpha-color-picker-control-for-the-wordpress-customizer). I've included it here (and also in my sample code) because it's so useful and I think it's a better option than the standard Color Control built into core. You can check out the original post Braad wrote about this control or check it out in his [Github repo](https://github.com/BraadMartin/components/tree/master/customizer/alpha-color-picker).\n\nThe Alpha Color Control is very similar to the Color Control built into core. The benefit of this control over the default control, is that it allows you to specify the opacity of the selected colour, which allows you to specify RGBa colours rather than just a solid hex colour.\n\nThe setting that gets saved to the database will be an RGBa color value (e.g. rgba(0,158,39,0.8) ) or a plain solid hex color (e.g. #009e27).\n\n![Alpha Color](https://maddisondesigns.com/wp-content/uploads/2017/04/AlphaColor.jpg \"Alpha Color\")\n\n**Usage**  \nadd_control( $id, $args );\n\n**Parameters**  \n**$id** - (string) (required) Customize Control object or ID of the Setting associated with this Control. Default: None  \n**$args** - (array) (optional) An associative array containing arguments for the setting. Default: empty array  \n\n**Arguments for $args**  \n**label** - Optional. The label that will be displayed Default: Blank  \n**description** - Required. The text to display  \n**section** - Required. The Section where there control should appear  \n**show_opacity** - Optional. Show or hide the opacity value on the opacity slider handle. Default: true  \n**palette** - Optional. Allows you to specify the colours used in the colour palette. Can be set to false to hide the palette. Default: WP color control palette\n\n**Example**\n\n````\n$wp_customize-\u003eadd_setting( 'sample_alpha_color',\n\tarray(\n\t\t'default' =\u003e 'rgba(209,0,55,0.7)',\n\t\t'transport' =\u003e 'postMessage'\n\t)\n);\n$wp_customize-\u003eadd_control( new Skyrocket_Customize_Alpha_Color_Control( $wp_customize, 'sample_alpha_color_picker',\n\tarray(\n\t\t'label' =\u003e __( 'Alpha Color Picker Control' ),\n\t\t'description' =\u003e esc_html__( 'Sample custom control description' ),\n\t\t'section' =\u003e 'sample_custom_controls_section',\n\t\t'show_opacity' =\u003e true, // Optional. Show or hide the opacity value on the opacity slider handle. Default: true\n\t\t'palette' =\u003e array( // Optional. Select the colours for the colour palette . Default: WP color control palette\n\t\t\t'#000',\n\t\t\t'#fff',\n\t\t\t'#df312c',\n\t\t\t'#df9a23',\n\t\t\t'#eef000',\n\t\t\t'#7ed934',\n\t\t\t'#1571c1',\n\t\t\t'#8309e7'\n\t\t)\n\t)\n) );\n````\n\n### WPColorPicker Alpha Color ###\n\nThe WPColorPicker Alpha Color is another Custom Color Control that supports Alpha Channel selection (e.g. rgba(0,158,39,0.8) ). This controls uses a modifed version of the WordPress Color Picker script that supports Alpha Channel selection. Although the Customizer Custom Control was created by myself, all props for this modified WPColorPicker script go to [Sergio](https://github.com/kallookoo).\n\nThe Alpha Color Control is very similar to the Color Control built into core. The benefit of this control over the default control, is that it allows you to specify the opacity of the selected colour, which allows you to specify RGBa colours rather than just a solid hex colour.\n\nWhen defining your control, you can specify an array of 8 colour values to use for the palette colours, which are shown as small swatches the bottom of the control. You can specify colours using Hex values, RGB values, or RGBa values. I recommend not mixing Hex/RGB and RGBa colours as the WPColorPicker script has issues handling this. Either use all HEX/RGB values, or all RGBa values.\n\nWhen defining your control, you can specify whether the Alpha Channel is reset (back to 1) or whether it remains the same value (default is to reset i.e. true). Setting `'resetalpha' =\u003e false` will ensure the value in the alpha channel **isn't** reset back to 1 every time one of the palette colours is selected. Setting `'resetalpha' =\u003e true` (or just not using this option) will ensure that the alpha channel value **is** reset back to 1 every time one of the palette colours is selected.\n\nThe WPColorPicker script has issues when mixing HEX colours and RGBa colours in the palette. If `'resetalpha' =\u003e false` and you select an RGBa colour from the palette which has an alpha value less than 1, the correct colour will be selected. However, if you then select an Hex value from the palette, the alpha channel value will remain the same as the previous selection, causing an incorrect colour to be selected.\n\nWhen specifying all Hex values in the Palette, it's best to set `'resetalpha' =\u003e true` (or just don't specify this option as the default value is true). When using all RGBa values in the Palette, it's best to set `'resetalpha' =\u003e false`.\n\nThe setting that gets saved to the database will be an RGBa color value (e.g. rgba(0,158,39,0.8) ) or a plain solid hex color (e.g. #009e27).\n\n![Alpha Color](https://maddisondesigns.com/wp-content/uploads/2017/05/WPColorPickerAlphaColor.jpg \"WPColorPicker Alpha Color\")\n\n**Usage**  \nadd_control( $id, $args );\n\n**Parameters**  \n**$id** - (string) (required) Customize Control object or ID of the Setting associated with this Control. Default: None  \n**$args** - (array) (optional) An associative array containing arguments for the setting. Default: empty array  \n\n**Arguments for $args**  \n**label** - Optional. The label that will be displayed Default: Blank  \n**description** - Required. The text to display  \n**section** - Required. The Section where there control should appear  \n**input_attrs** - Optional. List of custom choices.  \n **resetalpha** - Optional. This will reset the Alpha channel back to 1 every time a new colour is selected from the Palette. Default = 'true'  \n **palette** - Optional. Allows you to specify the 8 colours used in the colour palette. Default: WP color control palette  \n\n**Example 1**\n\n````\n$wp_customize-\u003eadd_setting( 'sample_wpcolorpicker_alpha_color',\n\tarray(\n\t\t'default' =\u003e 'rgba(209,0,55,0.7)',\n\t\t'transport' =\u003e 'postMessage',\n\t\t'sanitize_callback' =\u003e 'skyrocket_hex_rgba_sanitization'\n\t)\n);\n$wp_customize-\u003eadd_control( new Skyrocket_Alpha_Color_Control( $wp_customize, 'sample_wpcolorpicker_alpha_color',\n\tarray(\n\t\t'label' =\u003e __( 'Alpha Color Picker Control' ),\n\t\t'description' =\u003e esc_html__( 'Sample color control with Alpha channel' ),\n\t\t'section' =\u003e 'sample_custom_controls_section',\n\t\t'input_attrs' =\u003e array(\n\t\t\t'palette' =\u003e array(\n\t\t\t\t'#000000',\n\t\t\t\t'#ffffff',\n\t\t\t\t'#dd3333',\n\t\t\t\t'#dd9933',\n\t\t\t\t'#eeee22',\n\t\t\t\t'#81d742',\n\t\t\t\t'#1e73be',\n\t\t\t\t'#8224e3',\n\t\t\t)\n\t\t),\n\t)\n) );\n````\n\n**Example 2**\n\n````\n$wp_customize-\u003eadd_setting( 'sample_wpcolorpicker_alpha_color2',\n\tarray(\n\t\t'default' =\u003e 'rgba(209,0,55,0.7)',\n\t\t'transport' =\u003e 'postMessage',\n\t\t'sanitize_callback' =\u003e 'skyrocket_hex_rgba_sanitization'\n\t)\n);\n$wp_customize-\u003eadd_control( new Skyrocket_Alpha_Color_Control( $wp_customize, 'sample_wpcolorpicker_alpha_color2',\n\tarray(\n\t\t'label' =\u003e __( 'Alpha Color Picker Control' ),\n\t\t'description' =\u003e esc_html__( 'Sample color control with Alpha channel' ),\n\t\t'section' =\u003e 'sample_custom_controls_section',\n\t\t'input_attrs' =\u003e array(\n\t\t\t'resetalpha' =\u003e false,\n\t\t\t'palette' =\u003e array(\n\t\t\t\t'rgba(99,78,150,1)',\n\t\t\t\t'rgba(67,78,150,1)',\n\t\t\t\t'rgba(34,78,150,.7)',\n\t\t\t\t'rgba(3,78,150,1)',\n\t\t\t\t'rgba(7,110,230,.9)',\n\t\t\t\t'rgba(234,78,150,1)',\n\t\t\t\t'rgba(99,78,150,.5)',\n\t\t\t\t'rgba(190,120,120,.5)',\n\t\t\t),\n\t\t),\n\t)\n) );\n````\n\n### Sortable Pill Checkbox Custom Control ###\n\nThe Sortable Pill Checkbox works similar to an ordinary checkbox control, in that you can select one or more items out of a number of items. Instead of checkboxes, this control will display each item as a small 'pill'. When each pill/checkbox is selected, as well as changing color, the selected item will also display a tick to improve accessibility and to make it more obvious as to whether an item is selected or not. These pill checkboxes also have the option to be sortable using drag 'n drop. This is useful where you want to provide your users with a set of options, as well as providing them the ability to control the order of those options. Lastly, rather than small variabled sized pills, you can also opt to display them fullwidth. This will show each pill the same size, rather than each having a variable width. A common use of this type of control is where you might allow a user to select what meta content to display for their blog posts, along with allowing them to change the order that each item is displayed in.\n\nWhen adding your control, you can specify whether you want the pills to be sortable by setting `'sortable' =\u003e true` (default is non-sortable i.e. false). You can also spcify if you want the pills displayed full width by setting `'fullwidth' =\u003e true` (default is variable width i.e. false).\n\nThe setting that gets saved to the database is a comma-separated string of values for each of the items that are selected.\n\n![Image Checkbox](https://maddisondesigns.com/wp-content/uploads/2017/05/SortablePillCheckbox.jpg \"Sortable Pill Checkbox\")\n\n**Usage**  \nadd_control( $id, $args );\n\n**Parameters**  \n**$id** - (string) (required) Customize Control object or ID of the Setting associated with this Control. Default: None  \n**$args** - (array) (optional) An associative array containing arguments for the setting. Default: empty array  \n\n**Arguments for $args**  \n**label** - Optional. The label that will be displayed Default: Blank  \n**description** - Optional. The description to display under the label. Default: Blank.  \n**section** - Required. The Section where there control should appear  \n**input_attrs** - Optional. List of control options.  \n **sortable** - Optional. Allow the pills to be sortable using drag 'n drop. Default = 'false'  \n **fullwidth** - Optional. Display the pills fullwidth, instead of variable width. Default = 'false'  \n**choices** - Required. List of custom choices.  \n **key** - Required. Data that will be stored for the setting  \n **value** - Required. Text to display in the control  \n\n**Example 1**\n\n````\n// Test of Pill Checkbox Custom Control\n$wp_customize-\u003eadd_setting( 'sample_pill_checkbox',\n\tarray(\n\t\t'default' =\u003e 'tiger,elephant,hippo',\n\t\t'transport' =\u003e 'refresh',\n\t\t'sanitize_callback' =\u003e 'skyrocket_text_sanitization'\n\t)\n);\n$wp_customize-\u003eadd_control( new Skyrocket_Pill_Checkbox_Custom_Control( $wp_customize, 'sample_pill_checkbox',\n\tarray(\n\t\t'label' =\u003e __( 'Pill Checkbox Control', 'skyrocket' ),\n\t\t'description' =\u003e esc_html__( 'This is a sample Pill Checkbox Control', 'skyrocket' ),\n\t\t'section' =\u003e 'sample_custom_controls_section',\n\t\t'input_attrs' =\u003e array(\n\t\t\t'sortable' =\u003e false,\n\t\t\t'fullwidth' =\u003e false,\n\t\t),\n\t\t'choices' =\u003e array(\n\t\t\t'tiger' =\u003e __( 'Tiger', 'skyrocket' ),\n\t\t\t'lion' =\u003e __( 'Lion', 'skyrocket' ),\n\t\t\t'giraffe' =\u003e __( 'Giraffe', 'skyrocket'  ),\n\t\t\t'elephant' =\u003e __( 'Elephant', 'skyrocket'  ),\n\t\t\t'hippo' =\u003e __( 'Hippo', 'skyrocket'  ),\n\t\t\t'rhino' =\u003e __( 'Rhino', 'skyrocket'  ),\n\t\t)\n\t)\n) );\n````\n\n**Example 2**\n\n````\n// Test of Pill Checkbox Custom Control with Sortable option\n$wp_customize-\u003eadd_setting( 'sample_pill_checkbox2',\n\tarray(\n\t\t'default' =\u003e 'captainmarvel,msmarvel,squirrelgirl',\n\t\t'transport' =\u003e 'refresh',\n\t\t'sanitize_callback' =\u003e 'skyrocket_text_sanitization'\n\t)\n);\n$wp_customize-\u003eadd_control( new Skyrocket_Pill_Checkbox_Custom_Control( $wp_customize, 'sample_pill_checkbox2',\n\tarray(\n\t\t'label' =\u003e __( 'Pill Checkbox Control', 'skyrocket' ),\n\t\t'description' =\u003e esc_html__( 'This is a sample Sortable Pill Checkbox Control', 'skyrocket' ),\n\t\t'section' =\u003e 'sample_custom_controls_section',\n\t\t'input_attrs' =\u003e array(\n\t\t\t'sortable' =\u003e true,\n\t\t\t'fullwidth' =\u003e false,\n\t\t),\n\t\t'choices' =\u003e array(\n\t\t\t'captainamerica' =\u003e __( 'Captain America', 'skyrocket' ),\n\t\t\t'ironman' =\u003e __( 'Iron Man', 'skyrocket' ),\n\t\t\t'captainmarvel' =\u003e __( 'Captain Marvel', 'skyrocket'  ),\n\t\t\t'msmarvel' =\u003e __( 'Ms. Marvel', 'skyrocket'  ),\n\t\t\t'Jessicajones' =\u003e __( 'Jessica Jones', 'skyrocket'  ),\n\t\t\t'squirrelgirl' =\u003e __( 'Squirrel Girl', 'skyrocket'  ),\n\t\t\t'blackwidow' =\u003e __( 'Black Widow', 'skyrocket'  ),\n\t\t\t'hulk' =\u003e __( 'Hulk', 'skyrocket'  ),\n\t\t)\n\t)\n) );\n````\n\n**Example 3**\n\n````\n// Test of Pill Checkbox Custom Control with Sortable and Fullwidth options\n$wp_customize-\u003eadd_setting( 'sample_pill_checkbox3',\n\tarray(\n\t\t'default' =\u003e 'author,categories,comments',\n\t\t'transport' =\u003e 'refresh',\n\t\t'sanitize_callback' =\u003e 'skyrocket_text_sanitization'\n\t)\n);\n$wp_customize-\u003eadd_control( new Skyrocket_Pill_Checkbox_Custom_Control( $wp_customize, 'sample_pill_checkbox3',\n\tarray(\n\t\t'label' =\u003e __( 'Pill Checkbox Control', 'skyrocket' ),\n\t\t'description' =\u003e esc_html__( 'This is a sample Sortable Fullwidth Pill Checkbox Control', 'skyrocket' ),\n\t\t'section' =\u003e 'sample_custom_controls_section',\n\t\t'input_attrs' =\u003e array(\n\t\t\t'sortable' =\u003e true,\n\t\t\t'fullwidth' =\u003e true,\n\t\t),\n\t\t'choices' =\u003e array(\n\t\t\t'date' =\u003e __( 'Date', 'skyrocket' ),\n\t\t\t'author' =\u003e __( 'Author', 'skyrocket' ),\n\t\t\t'categories' =\u003e __( 'Categories', 'skyrocket'  ),\n\t\t\t'tags' =\u003e __( 'Tags', 'skyrocket'  ),\n\t\t\t'comments' =\u003e __( 'Comments', 'skyrocket'  ),\n\t\t)\n\t)\n) );\n````\n\n### Divider ###\n\nThe Divider Control allows you to display a thin horizontal divider between your controls. There's no settings saved for this control, it's purely for helping you to visually separate your different controls.\n\nWhen adding your control, you can specify the width of the divider line, the type of line to display, and the margin above and below the divider (in px).\n\n![Divider](https://maddisondesigns.com/wp-content/uploads/2023/06/Customizer-Divider-Custom-Control.jpg \"Divider\")\n\n**Usage**  \nadd_control( $id, $args );\n\n**Parameters**  \n**$id** - (string) (required) Customize Control object or ID of the Setting associated with this Control. Default: None  \n**$args** - (array) (optional) An associative array containing arguments for the setting. Default: empty array  \n\n**Arguments for $args**  \n**section** - Required. The Section where there control should appear  \n**input_attrs** - Optional. List of custom input attributes for control output.  \n **width** - Optional. The width of the divider line. Accepts 'default', 'full', 'half'. Default: 'default'  \n **type** - Optional. The style used for the divider. Accepts 'solid', 'dashed', 'dotted', 'double'. Default: 'solid'  \n **margintop** - Optional. The margin above the divider (in px). Default: 20  \n **marginbottom** - Optional. The margin below the divider (in px). Default: 20\n\n**Example**\n\n````\n$wp_customize-\u003eadd_setting( 'sample_divider_control',\n\tarray(\n\t\t'default' =\u003e $this-\u003edefaults['sample_divider_control'],\n\t\t'transport' =\u003e 'postMessage',\n\t\t'sanitize_callback' =\u003e ''\n\t)\n);\n$wp_customize-\u003eadd_control( new Skyrocket_Divider_Custom_Control( $wp_customize, 'sample_divider_control',\n\tarray(\n\t\t'section' =\u003e 'sample_custom_controls_section',\n\t\t'input_attrs' =\u003e array(\n\t\t\t'width' =\u003e 'full',\n\t\t\t'type' =\u003e 'solid',\n\t\t\t'margintop' =\u003e 15,\n\t\t\t'marginbottom' =\u003e 30,\n\t\t),\n\t)\n) );\n````\n\n### Upsell Section ###\n\nThe Upsell Section is a Custom Section that allows you to provide a link to an external URL, such as a theme website. This section is useful if you're upselling premium themes or plugins.\n\nThe Upsell Section is similar to standard core Customizer section except that instead of being able to navigate into the section, it simply provides a link to an external URL. Since this is a Section rather than a Custom Control, you probably want to add this to the same function that defines your other Sections.\n\nWhen defining your section, you can specify the URL, the text to use for the link as well as the background and text colours for the section. The ability to define the colours allows you to show this section in your own branding colours, as well as making this link more noticeable within the Customizer.\n\nSince this is a Custom Section, rather than a Custom Control, there's no values saved to the database.\n\n![Alpha Color](https://maddisondesigns.com/wp-content/uploads/2017/05/Customizer-Customer-Section.jpg \"Upsell Section\")\n\n**Usage**  \nadd_section( $id, $args );\n\n**Parameters**  \n**$id** - (string) (required) Customize Section object or Section ID. Default: None  \n**$args** - (array) (optional) An associative array containing arguments for the setting. Default: empty array  \n\n**Arguments for $args**  \n**title** - The visible name of the section  \n**priority** - Optional. This controls the order in which this section appears in the Theme Customizer sidebar  \n**url** - The external url to link to  \n**backgroundcolor** - Optional. The background colour of the section. Default: #fff  \n**textcolor** - Optional. The text colour for the title. Default: #555d66  \n\n**Example**\n\n````\n$wp_customize-\u003eadd_section( new Skyrocket_Upsell_Section( $wp_customize, 'upsell_section',\n\tarray(\n\t\t'title' =\u003e __( 'Premium Addons Available', 'skyrocket' ),\n\t\t'url' =\u003e 'https://skyrocketthemes.com',\n\t\t'backgroundcolor' =\u003e '#344860',\n\t\t'textcolor' =\u003e '#fff',\n\t\t'priority' =\u003e 0,\n\t)\n) );\n````\n\n## Further Reading ##\n\nFor more details, check out my Customizer Developers Guide:  \n[The WordPress Customizer – A Developers Guide (Part 1)](https://maddisondesigns.com/2017/05/the-wordpress-customizer-a-developers-guide-part-1)  \n[The WordPress Customizer – A Developers Guide (Part 2)](https://maddisondesigns.com/2017/05/the-wordpress-customizer-a-developers-guide-part-2)\n\nYou can download a sample theme and plugin showing how to implement these Controls, with the following links. Please note though, since both the sample theme and sample plugin use the same Customizer Controls code, don't try to activate the sample plugin on the same site where the sample theme is activated. This will cause an error as you'll be trying to instatiate classes with the same name since they're both using the same code base:  \n[https://github.com/maddisondesigns/Customizer-Custom-Controls-Sample-Theme](https://github.com/maddisondesigns/Customizer-Custom-Controls-Sample-Theme)  \n[https://github.com/maddisondesigns/Customizer-Custom-Controls-Sample-Plugin](https://github.com/maddisondesigns/Customizer-Custom-Controls-Sample-Plugin)  \n\n## Changelog ##\n\n= 1.3.1 =\n- Fixed escaping by changing instance of esc_attr() to esc_html() within Pill Checkbox Control\n- Updated screenshots for Toggle Switch, Slider and Sortable Repeater controls\n- Updated Font Awesome to v6.4.2\n- Updated Twitter social icon to new X icon\n\n= 1.3.0 =\n- Updated Font Awesome to v6.4.0\n- Added new Divider Custom Control\n- Added protected variables to control and section base classes to use for the customizer JS and CSS versions\n- Added 500px, Artstation, Figma, Mastodon (works with mastodon.social \u0026 mastodon.art), Quora, Steam, Telegram, TikTok, Unity, Unsplash \u0026 WhatsApp social icons\n- Added skyrocket_social_icons_plurality filter to change the plurality of the social icons (e.g. Use it to change 'Follow me on...', to 'Follow CompanyName on...')\n\n= 1.2.2 =\n- Updated Image Radio Button Control images, and Image Checkbox Control images to have better resolution\n- Tweaked css for above controls so image has a max-width so layout doesn't break with higher resolution images\n\n= 1.2.1 =\n- Implemented latest version of wp-color-picker-alpha\n- Updated Toggle switch to use Dashicons rather than English text\n- Tweaked slider bar colour to make it easier to see\n- Tweaked script and style version numbers when they're enqueued to ensure they're consistent\n\n= 1.2.0 =\n- Fixed wp-color-picker-alpha WordPress 5.5 incompatibility - See https://github.com/kallookoo/wp-color-picker-alpha/issues/35\n- Fixed wp-color-picker-alpha Iris Alpha Slider not aligning properly in Firefox - See https://github.com/kallookoo/wp-color-picker-alpha/issues/36\n- Updated skyrocket_hex_rgba_sanitization() to sanitize RBG and RGBa colors\n\n= 1.1.9 =\n- Fixed escaping by changing two instance of esc_attr() to esc_html() as per Theme Check plugin recommendations\n- Tidied up styles\n\n= 1.1.8 =\n- Updated the Google Font JSON files\n\n= 1.1.7 =\n- Updated the property for a couple of styles to only target the background color\n- Updated some of the color values to make them lowercase instead of uppercase\n\n= 1.1.6 =\n- Updated Pill Checkbox Custom Control to ensure that jQuery UI is listed as a dependency when enqueing scripts\n\n= 1.1.5 =\n- Updated Select2 component to load from theme/plugin rather than CDN as per Theme Review Guidelines\n\n= 1.1.4 =\n- Fixed issue with Multiselect in Select2 Control where choices is a single array. Props @manchumahara\n- Added example Select2 Control where the Choices is a single array (instead of a multidimensional array)\n\n= 1.1.3 =\n- Fixed the height in the custom wpColorPicker script for the WPColorPicker Alpha Color Picker Control\n\n= 1.1.2 =\n- Added missing escape functions around strings. Props @habibjh88\n\n= 1.1.1 =\n- Fixed issue with Sortable Pill Checkbox Control not displaying choices in correct saved order upon initial render\n\n= 1.1.0 =\n- Added new Sortable Pill Checkbox Custom Control\n- Tidied up code\n\n= 1.0.13 =\n- Don't enqueue the Font Awesome stylesheet within the Skyrocket_Single_Accordion_Custom_Control Control as it's not actually needed.\n- Enqueue the Font Awesome stylesheet within functions.php when viewing the Customizer, for showing icons in our sample Single Accordion Control content.\n- Added Readme link to a sample theme that shows how to implement these controls.\n\n= 1.0.12 =\n- Fixed default value for Multi Select Select2. Default value should be comma delimited string not an array.\n- Changed Sanitize Callback function for default WP_Customize_Image_Control control. This control returns a URL string, not an image ID.\n\n= 1.0.11 =\n- Added new Upsell section that allows you to provide a link in the Customizer to an external URL. Useful if you're selling premium themes/plugins.\n\n= 1.0.10 =\n- Added ability to specify Palette colours in the new Skyrocket_Alpha_Color_Control Custom Control\n\n= 1.0.9 =\n- Added new Skyrocket_Alpha_Color_Control Custom Control which uses modified WPColorPicker script\n\n= 1.0.8 =\n- Renamed fontawesome stylsheet\n\n= 1.0.7 =\n- Updated skyrocket_get_social_media() to store output as array rather than string to make it easier for filtering\n- Added new filter (skyrocket_social_icons_list) for filtering social media icons list array\n- Added new social icons to Customizer Control (Discord, Kickstarter, Patreon, Weibo)\n- Updated FontAwesome to v5.8.2\n\n= 1.0.6 =\n- Added the ability to show the Add Media button on the TinyMCE Control\n\n= 1.0.5 =\n- Added support for including this library in a plugin (as well as a theme). Props @mmcev106\n\n= 1.0.4 =\n- Fixed typos. Props @lushkant\n\n= 1.0.3 =\n- Fixed issue with specifying slider step less than one (e.g. 0.5)\n- Added new sanitisation function for sanitising slider ranges\n\n= 1.0.2 =\n- Updated handles when enqueing scripts/styles to use dashes instead of underscores\n- Added prefixes to a couple of function names that didn't have a prefix\n\n= 1.0.1 =\n- Check if there are any Google Font Controls being used before trying to call Select2\n\n= 1.0 =\n- Let's add a changelog and a version number to make it easier to see what's changed. We'll call this v1.0 shall we\n\n= 25 Jun 2018 =\n- Updated example code and readme documentation\n- Setting for multiselect control should be santized the same way as the single select\n- Fixed issue with Select2 Dropdown not allowing control to be saved when entries are cleared\n- Added new clear all option Select2 Dropdown\n- Added ability to specify placeholder on Select2 Dropdown\n\n= 17 Jun 2018 =\n- Updated text to explain example in more detail\n- Added some more readme text to explain which section in the Customizer this example code is relevant to\n- Added some more inline comments to explain what the example code includes\n\n= 16 Jun 2018 =\n- Fixed the textdomain on the sample code\n- Increase z-index for select2 controls so dropdown appears correctly\n- Fixed height on select2 multi-select control\n- Fixed incorrect textdomains \u0026 comments in code\n\n= 5 Apr 2018 =\n- Tweaked Readme. Stupid Github requiring two spaces at the end of a line just to get a carriage return. Uugh!\n\n= 2 Apr 2018 =\n- Implement a Select2 control for the Font Family dropdown in the Google Font Custom Control\n- Added new Dropdown Select2 Custom Control\n- Tweaked styles for Select2 Fields\n- Changed colour of Text Radio Button Control field when selected to better match other controls and to improve visibility\n\n= 31 Mar 2018 =\n- Updated Google Font Control to allow ordering by popularity or alphabetically\n- Updated Google Control to allow showing all fonts or specify just a certain number of fonts\n\n= 16 Mar 2018 =\n- Added new Dropdown Posts Custom Control\n\n= 27 Nov 2017 =\n- Updated readme to include new core Date Time control\n- Added new example code for core Date Time control\n- Added a new sanitizer for the new Date Time Customizer control\n- Let's make input fields the same height as select fields\n- Fixed position of label and alpha colour customizer control input field\n\n= 21 Nov 2017 =\n- Fixed weird borders on color controls\n- Fixed alignment of color input on default control\n\n= 4 Oct 2017 =\n- Updated readme\n\n= 29 Sep 2017 =\n- Tweak the border style on Customizer input fields to make them more noticeable\n- Tweak styles for Simple Notice Control so text isn't as cramped when code tag is used\n- Updated the Simple Notice Control to allow span and code tags\n\n= 13 Sep 2017 =\n- Lets check if the woocommerce class exists instead of checking active_plugins for the plugin folder \u0026 file as it will still work if the plugin folder was renamed for some reason\n\n= 9 Sep 2017 =\n- Use get_template_directory_uri() when reading Google Fonts JSON file so it doesn't break when using child themes\n- Change placeholder text on Repeater control input field to https://\n- Automatically add https instead of http since all social networks use ssl\n\n= 21 Aug 2017 =\n- Updated the example code for the TinyMCE Editor control\n\n= 20 Aug 2017 =\n- Added TinyMCE Editor Custom Control\n\n= 18 Jun 2017 =\n- Ensure manual slider input values don’t exceed minimum \u0026 maximum values\n- Fixed readme formatting\n- Ensure strings are translatable\n- Added missing sanitisation callback functions\n- Ensure correct sanitisation functions are called\n- Added new functions for sanitising integers, RGBa values and the Google Font JSON string\n- Added sample code to add search icon to menu\n- Updated customizer defaults\n\n= 17 May 2017 =\n- Updated readme description\n- Updated readme with more doco\n- Changed the name prefix on all the functions\n- Added a default for the Simple Notice Control, for consistency\n- Updated readme\n- Remove margin from bottom of Radio Button and Single Accordion Controls\n- Updated Alpha Color Control\n\n= 16 May 2017 =\n- Fixed broken markdown for image in readme\n- Updated readme documentation\n- Updated Simple Notice control example to include HTML tags\n- Tweak Simple Notice and Single Accordion to only display limited HTML tags\n- Updated accordion to allow displaying of basic html.\n- Don’t force accordion array content to be icons.\n- Allow the icon tag to be passed to the control\n- Change FA version when enqueing\n- Updated Font Awesome to v4.7\n- Updated readme\n\n= 14 May 2017 =\n- Added more content to readme\n- Added the ability to override the button labels on the Sortable repeater\n- Tweak translation functions on labels \u0026 descriptions\n- Override button label on Sortable Repeaters\n- Change name of default value\n\n= 11 May 2017 =\n- Fixed readme. Github markdown eh! Talk about crap! Github Markdown really sucks\n\n= 8 May 2017 =\n- Added missing sanitisation on strings\n- Fixed existing string sanitisation for consistency\n- Tidied code\n\n= 6 May 2017 =\n- Added core Media, Image and Cropped Image Controls and their associated default settings\n\n= 5 May 2017 =\n- Initial commit\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaddisondesigns%2Fcustomizer-custom-controls","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaddisondesigns%2Fcustomizer-custom-controls","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaddisondesigns%2Fcustomizer-custom-controls/lists"}