Title: Customizer Improvements in 4.0
Author: Nick Halsey
Published: July 8, 2014
Last modified: July 10, 2015
---
[ ](https://profiles.wordpress.org/celloexpressions/) [Nick Halsey](https://profiles.wordpress.org/celloexpressions/)
1:58 am _on_ July 8, 2014
Tags: [4.0 ( 38 )](https://make.wordpress.org/core/tag/4-0/),
[API ( 14 )](https://make.wordpress.org/core/tag/api/), [customize ( 67 )](https://make.wordpress.org/core/tag/customize/),
[dev-notes ( 648 )](https://make.wordpress.org/core/tag/dev-notes/)
# Customizer Improvements in 4.0
Building on the addition of Widgets to the CustomizerCustomizer Tool built into
WordPress core that hooks into most modern themes. You can use it to preview and
modify many of your site’s appearance settings. in 3.9, and alongside my [GSoC Menu Customizer project](https://make.wordpress.org/core/tag/menu-customizer),
[@westonruter](https://profiles.wordpress.org/westonruter/), [@ocean90](https://profiles.wordpress.org/ocean90/)
and I have been working on a series of Customizer improvements for 4.0. In this
post, I’ll summarize the changes and proposed changes that we’d like to get in before
betaBeta A pre-release of software that is given out to a large group of users to
trial under real conditions. Beta versions have gone through alpha testing in-house
and are generally fairly close in look, feel and function to the final product;
however, design changes often occur as part of the process.. Anything with an asterisk(*)
still needs to be committed but has a patchpatch A special text file that describes
changes to code, by identifying the files and lines which are added, removed, and
altered. It may also be referred to as a **diff**. A patch can be _applied_ to a
codebase for testing.. Keep in mind that everything here is liable to change before
4.0 is released.
We currently have eight enhancements and feature requests that need to be completed
before beta, but half of them are already marked for commit and all have patches.
If you’re interested in helping out with these changes, we could still use help
reviewing and testing many of them (especially for UIUI User interface/UXUX User
experience). Huge thanks to everyone who’s helped out so far this cycle.
## Terminology Notes
We recently renamed the Appearance tracTrac An open source project by Edgewall Software
that serves as a bug tracker and project management tool for WordPress. component
to Customize. I’d like to clarify a few things regarding terminology used to describe
the Customizer:
* We’re shifting toward using “Customizer” rather than “Theme Customizer”, as it
isn’t necessarily theme-specific (though most of its uses currently are).
* “Customize” is the action, “Customizer” is the thing. Most UI elements use “Customize”
or “customizing”, but most documentation should probably use “Customizer”. If
you’re questioning which to use, consider whether you’re looking for a noun or
a verb and pick accordingly. Feel free to conjugate the verb form (eg. “customizing”).
* “Customize” could refer to anything. That’s the point; it could be used to customize
any part of a site. The Customizer can be used for anything, and we’d like to
encourage more experimentation with different uses of the Customizer.
## UI Changes
In 4.0, most of the Customizer UI changes are for the Customizer itself; the user
experience inside the Customizer. I’m expecting a focus on the experience of accessing
and navigating through the Customizer in future releases. In 4.0:
* WidgetWidget A WordPress Widget is a small block that performs a specific function.
You can add these widgets in sidebars also known as widget-ready areas on your
web page. WordPress widgets were originally created to provide a simple and easy-
to-use way of giving design and structure control of the WordPress theme to the
user. areas are all grouped into a “Widgets” context, implemented via the new“
Panels” APIAPI An API or Application Programming Interface is a software intermediary
that allows programs to interact with each other and share data in limited, clearly
defined ways.. Panels are a way to group Customizer sections, just like sections
are a way to group controls. Panels slide over to the side, rather than expanding
down, and contain vertically-expanding sub-sections. This could use some more
work on the UI/UX side, see [#27406](https://core.trac.wordpress.org/ticket/27406)
for details.
* Only show “You are previewing / [theme name]” and the theme details & screenshot
section when the Customizer is previewing an inactive theme. Otherwise, show “
You are customizing / [site title]”, with a short description of the customizer.
This matches panel headings, which are displayed as “You are customizing / [panel
title]”, with the panel description as that heading section’s contents. [#28550](https://core.trac.wordpress.org/ticket/28550).
* Replace Customizer close button with an “X” icon. This fits better with the arrow
icon used to exit panels and makes the Customizer controls feel more like a modal/
panel that is contextual to the front-end of the site, rather than a confusing
mix between the adminadmin (and super admin) and the front-end. We’d also replace
the mess of buttons in the theme-install previewer (which looks like the Customizer)
with icons and move them around. [#28655](https://core.trac.wordpress.org/ticket/28655).
* Prevent loss of unsaved changes in the Customizer by warning users with an AYS
if they try to close the customizer and there are unsaved changes. #25439.
* Always return to the screen that the Customizer was opened from in the admin,
like on the front-end. Look for more work here in the future. #25457.
* All coreCore Core is the set of software required to run WordPress. The Core
Development Team builds WordPress. customizer controls now support descriptions(#
27981), complementing the ability to add descriptions to sections and panels.
We could potentially add descriptions to some core controls if they seem needed,
might want to do a UI/UX audit of the core Customizer controls and/or user testing.
Here’s a screencast demonstrating some of these UI changes:
[https://make.wordpress.org/core/files/2014/07/customizer-4.0-ui-demo.wmv](https://make.wordpress.org/core/files/2014/07/customizer-4.0-ui-demo.wmv)
## API Additions & Improvements
### Customizer Panels
The Customizer now includes a new way to group options together: **panels**. Just
like a section is a container for controls, a panel is a container for sections.
This was implemented in [#27406](https://core.trac.wordpress.org/ticket/27406).
The Panels API is easy-to-use and works almost identically to the existing customizer
section API. Add a panel with the following, within the `customize_register` action:
```notranslate
$wp_customize->add_panel( 'panel_id', array(
'priority' => 10,
'capability' => 'edit_theme_options',
'theme_supports' => '',
'title' => '',
'description' => '',
) );
```
As always, only use the arguments where you aren’t using the default values. Note
that the panel will _not_ be displayed unless sections are assigned to it. To add
a section to a panel, just use the panel id for the new `panel` argument:
```notranslate
$wp_customize->add_section( 'section_id', array(
'priority' => 10,
'capability' => 'edit_theme_options',
'theme_supports' => '',
'title' => '',
'description' => '',
'panel' => 'panel_id',
) );
```
You may notice that `$wp_customize->add_panel` and `$wp_customize->add_section`
have the same arguments (other than panel, of course). This is because panels are
a special type of section; technically speaking, [`WP_Customize_Panel` _extends_ `WP_Customize_Section`](https://core.trac.wordpress.org/browser/trunk/src/wp-includes/class-wp-customize-section.php).
Your sections are backwards-compatible: you can add the panel argument to existing
sections without issues. However, you do need to check for the existence of `WP_Customize_Manager-
>add_panel()` if you’re maintaining pre-4.0 compatibility. As with Customizer Sections,
you can access and modify Panels via:
* `$wp_customize->get_panel( $id );`
* `$wp_customize->remove_panel( $id );`
### New Built-in Customizer Controls
WordPress core now provides support for a much wider array of Customizer controls.
Implemented in [#28477](https://core.trac.wordpress.org/ticket/28477), these changes
eliminate the need to create custom controls for most common use cases. The `textarea`
type is now supported in core. For any type of input that uses an input element,
you can simply specify the `type` attribute using the `type` parameter of `$wp_customize-
>add_control()`.
Here’s an example:
```notranslate
$wp_customize->add_control( 'setting_id', array(
'type' => 'url',
'priority' => 10,
'section' => 'title_tagline',
'label' => 'URL Field',
) );
```
Which results in the following markup in the Customizer:
```notranslate
```
This is pretty powerful, as you can now use the built-in `WP_Customize_Control`
for most common use-cases rather than creating a custom control. But what about
input types like `number` and `range` that require additional attributes like `min`,`
max`, and `step`?
### New Built-in Customizer Control Parameters
First of all, all of the built-in Customizer controls (including the custom controls
such as `WP_Customizer_Color_Control`) now support descriptions, just like Customizer
sections have descriptions (see [#27981](https://core.trac.wordpress.org/ticket/27981)).
This was much-needed and allows for inline help text at the control level.
More interestingly, to complement the new support for arbitrary input types, a new`
input_attrs` parameter allows you to add attributes to the `input` element (also
implemented in [#28477](https://core.trac.wordpress.org/ticket/28477)). This extends
beyond just using `min`, `max`, and `step` for `number` and `range`, to the ability
to add custom classes, placeholders, the pattern attribute, and anything else you
need to the input element. Here’s an example:
```notranslate
$wp_customize->add_control( 'setting_id', array(
'type' => 'range',
'priority' => 10,
'section' => 'title_tagline',
'label' => 'Range',
'description' => 'This is the range control description.',
'input_attrs' => array(
'min' => 0,
'max' => 10,
'step' => 2,
'class' => 'test-class test',
'style' => 'color: #0a0',
),
) );
```
Which results in the following markup in the Customizer:
```notranslate
```
Which displays as follows (in Chrome 35):
[⌊customizer-4.0-range-control⌉⌊customizer-4.0-range-control⌉[
The ability to add classes is particularly useful if you need to target specific
controls with CSSCSS Cascading Style Sheets. or JSJS JavaScript, a web scripting
language typically executed in the browser. Often used for advanced user interfaces
and behaviors., but you don’t need any special markup. I’m using this in the Menu
Customizer for the Menu Name field, which is just an ordinary text control with
a special setting type.
### Contextual Controls
Customizer controls can now be displayed or hidden based on the Customizer’s preview
context. For example, options that are only relevant to the front page can be shown
only when the user is previewing their front page in the Customizer (see [#27993](https://core.trac.wordpress.org/ticket/27993)).
This is already implemented in core for Widgets; Widgets have always been contextually
faded and shown/hidden based on their visibility in the preview, but this functionality
is now built off of the core `active_callback` API in both PHPPHP The web scripting
language in which WordPress is primarily architected. WordPress requires PHP 7.4
or higher and JS. There are three different ways to specify whether a given control
should only be displayed in a certain context. The first, and most straightforward,
is to use the `active_callback` argument in `$wp_customize->add_control()`.
```notranslate
$wp_customize->add_control( 'front_page_greeting', array(
'label' => __( 'Greeting' ),
'section' => 'title_tagline',
'active_callback' => 'is_front_page',
) );
```
Note that you may use either built-in conditional functions or a custom function.
If you have a custom control (via a subclass of `WP_Customize_Control`) and a custom
callback function, you can skip the `active_callback` argument and override the `
active_callback` method instead:
```notranslate
class WP_Greeting_Control extends WP_Customize_Control {
// ...
function active_callback() {
return is_front_page();
}
}
```
Finally, the `customize_control_active` filterFilter Filters are one of the two
types of Hooks [https://codex.wordpress.org/Plugin_API/Hooks](https://codex.wordpress.org/Plugin_API/Hooks).
They provide a way for functions to modify data of other functions. They are the
counterpart to Actions. Unlike Actions, filters are meant to work in an isolated
manner, and should never have side effects such as affecting global variables and
output. will override all of the other active callback options and may be a better
solution in certain cases (note that this particular example will be avoidable with
future work on expanding the Customizer’s JS API, and does not hide the `title_tagline`
section, only the controls in it):
```notranslate
function title_tagline_control_filter( $active, $control ) {
if ( 'title_tagline' === $control->section ) {
$active = is_front_page();
}
return $active;
}
add_filter( 'customize_control_active', 'title_tagline_control_filter', 10, 2 );
```
In addition to the PHP API for contextual controls, you can override the control-
visibility-toggle function on the JS side. By default, controls will `slideUp` and`
slideDown` as they become visible or hidden when the Customizer preview is navigated.
If you’re familiar with the Customizer control JS API (see `wp-admin/js/customize-
controls.js`, and `wp.customize.Control`), the Widgets implementation of a custom
toggle function is a good example:
```notranslate
api.Widgets.WidgetControl = api.Control.extend({
// ...
/**
* Update widget control to indicate whether it is currently rendered.
*
* Overrides api.Control.toggle()
*
* @param {Boolean} active
*/
toggle: function ( active ) {
this.container.toggleClass( 'widget-rendered', active );
},
// ...
) };
/**
* Extends wp.customize.controlConstructor with control constructor for widget_form.
*/
$.extend( api.controlConstructor, {
widget_form: api.Widgets.WidgetControl,
} );
```
### Changes to the customize_update_ and customize_preview_ Actions
You probably already know that the Customizer supports both option and theme_mod
types for settings. But did you know that you can register arbitrary types? Since
this is generally undocumented, I’ll show how it works (this has been in place since
3.4):
```notranslate
$wp_customize->add_setting( 'setting_id', array(
'type' => 'custom_type',
'capability' => 'edit_theme_options',
'theme_supports' => '',
'default' => '',
'transport' => 'refresh',
'sanitize_callback' => '',
'sanitize_js_callback' => '',
) );
```
There are a few actions that you can use to handle saving and previewing of custom
types (`option` and `theme_mod` are handled automatically). Namely, `customize_update_
$type` and `customize_preview_$type` are useful here. Previously, the value of the
setting was passed to these actions, but there was no context. In 4.0, via [#27979](https://core.trac.wordpress.org/ticket/27979),
the `WP_Customize_Setting` instance is passed to these actions, allowing more advanced
saving and previewing operations. Here’s an example from my Menu Customizer project:
```notranslate
function menu_customizer_update_menu_name( $value, $setting ) {
...
// Update the menu name with the new $value.
wp_update_nav_menu_object( $setting->menu_id, array( 'menu-name' => trim( esc_html( $value ) ) ) );
}
add_action( 'customize_update_menu_name', 'menu_customizer_update_menu_name' );
```
This part of the Customizer API is a bit too complex to fully explain here, as most
of it already existed, but suffice it to say that the addition of the setting instance
to these actions greatly expands the possibilities of working with custom setting
types in the Customizer.
### New “customize” MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. Capabilitycapability A **capability** is permission to perform one or more types of task. Checking if a user has a capability is performed by the `current_user_can` function. Each user of a WordPress site might have some permissions but not others, depending on their role. For example, users who have the Author role usually have permission to edit their own posts (the “edit_posts” capability), but not permission to edit other users’ posts (the “edit_others_posts” capability).
The Customizer has been essentially decoupled from `edit_theme_options` in favor
of a `customize` meta capability (mapped to** `edit_theme_options`** by default),
which is assigned only to administrators by default. This allows for wider use of
the Customizer’s extensive capability-access options, which are built into panels,
sections, and settings. Additionally, this makes it possible to allow non-administrators
to use the customizer for, for example, [customizing posts](https://github.com/x-team/wp-customize-posts).
This change is an important step toward expanding the scope of the Customizer beyond
themes. See [#28605](https://core.trac.wordpress.org/ticket/28605).
```notranslate
function allow_users_who_can_edit_posts_to_customize( $caps, $cap, $user_id ) {
$required_cap = 'edit_posts';
if ( 'customize' === $cap && user_can( $user_id, $required_cap ) ) {
$caps = array( $required_cap );
}
return $caps;
}
add_filter( 'map_meta_cap', 'allow_users_who_can_edit_posts_to_customize', 10, 3 );
```
### Customizer Conditional Function
The new `is_customize_preview()` conditional function can be used to check whether
the front-end is being displayed in the Customizer. The naming derives from the
fact that the term “preview” applies to both theme previews and previewing changes
before saving them. See [#23509](https://core.trac.wordpress.org/ticket/23509) for
some sample use-cases from WordPress.comWordPress.com An online implementation of
WordPress code that lets you immediately access a new WordPress environment to publish
your content. WordPress.com is a private company owned by Automattic that hosts
the largest multisite in the world. This is arguably the best place to start blogging
if you have never touched WordPress before. [https://wordpress.com/](https://wordpress.com/).
## Future Work
Most of the changes in 4.0 focus on the Customizer’s PHP API and the user experience
within the Customizer. In the next few releases, we’ll probably shift focus to building
out the Customizer JS API ([#28709](https://core.trac.wordpress.org/ticket/28709))
and work on the user experience of accessing and navigating through the customizer(
potentially with something like [#28602](https://core.trac.wordpress.org/ticket/28602)
and related), as well as improving the experience on mobile ([#28784](https://core.trac.wordpress.org/ticket/28784)).
The Customizer can be very slow currently but we’re exploring ways to improve performance;
for example, controls could be dynamically loaded on an as-needed basis once a more
complete JS API is in place ([#28580](https://core.trac.wordpress.org/ticket/28580)).
We’ll work on improving custom background images and potentially add menus and/or
theme-switching to the Customizer eventually. We’ll also want to address what to
do with screens that the Customizer effectively replaces (headers and backgrounds,
maybe eventually widgets, menus, and themes). Check out the [future release Customize component tickets](https://core.trac.wordpress.org/query?status=!closed&component=Customize&milestone=Future+Release&desc=1&order=id)
for more ideas.
Thanks again to everyone who’s helped out with the Customizer in 4.0. If any of
the outstanding items here pique your interest, feel free to jump in on trac!
Update: all UI changes have been committed. Additional work to improve focus styling
will happen during beta, see [#28267](https://core.trac.wordpress.org/ticket/28267).
Update 2: everything here is in WordPress 4.0 beta 1, with the exception of the
customize capability. The capability will most likely be implemented as a meta capability,
not a primitive one, see [#28605](https://core.trac.wordpress.org/ticket/28605)
for details.
Update 3: customize meta capability is now in trunktrunk A directory in Subversion
containing the latest development code in preparation for the next major release
cycle. If you are running "trunk", then you are on the latest revision., will be
in 4.0 beta 2. Added usage example.
[#4-0](https://make.wordpress.org/core/tag/4-0/), [#api](https://make.wordpress.org/core/tag/api/),
[#customize](https://make.wordpress.org/core/tag/customize/), [#dev-notes](https://make.wordpress.org/core/tag/dev-notes/)
### Share this:
* [ Threads ](https://make.wordpress.org/core/2014/07/08/customizer-improvements-in-4-0/?share=threads)
* [ Mastodon ](https://make.wordpress.org/core/2014/07/08/customizer-improvements-in-4-0/?share=mastodon)
* [ Bluesky ](https://make.wordpress.org/core/2014/07/08/customizer-improvements-in-4-0/?share=bluesky)
* [ X ](https://make.wordpress.org/core/2014/07/08/customizer-improvements-in-4-0/?share=x)
* [ Facebook ](https://make.wordpress.org/core/2014/07/08/customizer-improvements-in-4-0/?share=facebook)
* [ LinkedIn ](https://make.wordpress.org/core/2014/07/08/customizer-improvements-in-4-0/?share=linkedin)
1. 
2. [prionkor](https://profiles.wordpress.org/prionkor/) 2:10 am _on_ July 8, 2014
3. >We’re shifting toward using “CustomizerCustomizer Tool built into WordPress core
that hooks into most modern themes. You can use it to preview and modify many
of your site’s appearance settings.” rather than “Theme Customizer”, as it isn’t
necessarily theme-specific (though most of its uses currently are).
4. Correct me if I am wrong. We are still on “Theme Customizer” stage as customizer
settings (on save) only affects theme options.
5. Is there any plan for implementing Customizer with post metaMeta Meta is a term
that refers to the inside workings of a group. For us, this is the team that works
on internal WordPress sites like WordCamp Central and Make WordPress. in addition
to the options? That is when we might truly customize things with the customizer.
6. * 
* [Nick Halsey](https://profiles.wordpress.org/celloexpressions/) 2:31 am _on_
July 8, 2014
* The short answer is that it depends on what plugins you’re using. You’d probably
be interested in the [Post Customizer plugin](https://github.com/x-team/wp-customize-posts)(
also linked above).
* However, note that many coreCore Core is the set of software required to run
WordPress. The Core Development Team builds WordPress. (and pluginPlugin A
plugin is a piece of software containing a group of functions that can be added
to a WordPress website. They can extend functionality or add new features to
your WordPress websites. WordPress plugins are written in the PHP programming
language and integrate seamlessly with WordPress. These can be free in the
WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/)
or can be cost-based plugin from a third-party.) options in the customizerCustomizer
Tool built into WordPress core that hooks into most modern themes. You can
use it to preview and modify many of your site’s appearance settings. are not
theme-specific; for example, site title and tagline. That is, the settings
are saved as options, not theme_mods, so they persist when switching themes.
They’re just contextualized to being directly related to the theme in the customize
context.
- 
- [prionkor](https://profiles.wordpress.org/prionkor/) 2:40 am _on_ July
8, 2014
- Ah I see. Missed that part of the article.
7. 
8. [JakePT](https://profiles.wordpress.org/jakept/) 3:50 am _on_ July 8, 2014
9. I’ve been digging into the customizerCustomizer Tool built into WordPress core
that hooks into most modern themes. You can use it to preview and modify many
of your site’s appearance settings. a lot lately, and I’m really loving it. It’s
a great way to open up parts of a theme so low-tech clients can make certain changes
without an extra options page or awkward single-purpose widgetWidget A WordPress
Widget is a small block that performs a specific function. You can add these widgets
in sidebars also known as widget-ready areas on your web page. WordPress widgets
were originally created to provide a simple and easy-to-use way of giving design
and structure control of the WordPress theme to the user. areas. I’m happy to
see most of the limitations I ran into being addressed here.
10. The one thing that is apparently still missing that I really want is a proper
Media control. The current one uploads files to the Media Library, but there’s
no way to recover them in the customizer. If you upload 2 images, change your
mind and want to go back to the first one, you have to upload it again and end
up with duplicates in the media library. From a developer perspective, I’d also
like it if it returned the attachment ID so I could do more with the file than
just spit out the URLURL A specific web address of a website or web page on the
Internet, such as a website’s URL www.wordpress.org.
11. * 
* [Weston Ruter](https://profiles.wordpress.org/westonruter/) 3:59 am _on_
July 8, 2014
* JakePT: Yeah, that’s being worked on. Have you seen the new HeaderHeader The
header of your site is typically the first thing people will experience. The
masthead or header art located across the top of your page is part of the look
and feel of your website. It can influence a visitor’s opinion about your content
and you/ your organization’s brand. It may also look different on different
screen sizes. Image control? You can select any image from the Media Library
via the Media Manager. This same ability is being worked on for background
images.
- 
- [JakePT](https://profiles.wordpress.org/jakept/) 10:12 am _on_ July 8,
2014
- No I haven’t. Thanks for pointing that out, I’ll take a look.
- Honestly, the reason that I hadn’t is that I generally avoid the Custom
HeaderHeader The header of your site is typically the first thing people
will experience. The masthead or header art located across the top of your
page is part of the look and feel of your website. It can influence a visitor’s
opinion about your content and you/ your organization’s brand. It may also
look different on different screen sizes. because I find it kind of ambiguous.
Maybe it’s just the sites my company and I develop, but the images near
the top couldn’t really be described as being in the ‘Header’, which makes
it confusing. What is in the header is usually a logo (these are generally
business sites), and the Custom Header functionality doesn’t work perfectly
for that since, again, ‘Header Image’ isn’t how I would describe it, and
if I want to allow uploading of a High Res logo for Retina, I can’t easily
create a second Header control (last time I tried, anyway).
- But I’m glad to hear that it’s being enhanced in this way nonetheless, however
I do hope that this enhancementenhancement Enhancements are simple improvements
to WordPress, such as the addition of a hook, a new feature, or an improvement
to an existing feature. eventually comes down to WP_Customize_Image_Control.
* 
* [Nick Halsey](https://profiles.wordpress.org/celloexpressions/) 4:09 am _on_
July 8, 2014
* The media thing really bugs me too. In fact, I almost worked up a patchpatch
A special text file that describes changes to code, by identifying the files
and lines which are added, removed, and altered. It may also be referred to
as a **diff**. A patch can be _applied_ to a codebase for testing. to try to
get into 4.0 this past weekend, but I didn’t have enough time to get very far
with it.
* What should (and probably eventually will) happen is that WP_Customize_Upload_Control
should invoke the media library, and then the image and background controls
would build off of it with slightly more specialized functionality. It should
then be easy to create a custom control that extends this behavior to do all
sorts of custom things with JSJS JavaScript, a web scripting language typically
executed in the browser. Often used for advanced user interfaces and behaviors.(
like using other attachment metadata). Patches welcome on [#21483](https://core.trac.wordpress.org/ticket/21483).
12. 
13. [Aristeides Stathopoulos](https://profiles.wordpress.org/aristath/) 8:25 am
_on_ July 8, 2014
14. This is really exciting!
It was about time this happened…
15. The thing that bugs me the most in the CustomizerCustomizer Tool built into WordPress
core that hooks into most modern themes. You can use it to preview and modify
many of your site’s appearance settings. is the fact that it’s almost impossible
to save an array as an option… It’s easy to create new controls, but it’s almost
impossible to create a control like for example a multi-select control and save
it as an array. Instead we have to do some voodoo to convert the array as csv
and save it that way.
Any plans to change that soon?
16. 
17. [Graham Armfield](https://profiles.wordpress.org/grahamarmfield/) 10:21 am _on_
July 8, 2014
18. When you’re building your changes to the CustomizerCustomizer Tool built into
WordPress core that hooks into most modern themes. You can use it to preview and
modify many of your site’s appearance settings. as proposed here, please ensure
that everything is keyboard accessible and is also providing enough information
for screen reader users – not everyone will be using a mouse.
19. The Customizer is currently pretty good from an accessibilityAccessibility Accessibility(
commonly shortened to a11y) refers to the design of products, devices, services,
or environments for people with disabilities. The concept of accessible design
ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility
with a person’s assistive technology (for example, computer screen readers). (
https://en.wikipedia.org/wiki/Accessibility) perspective, and we wouldn’t want
to see the Customize take a backward step with these changes.
20. Keyboard only testing you’ll be able to do yourself, but feel free to post on
the Make WordPress Accessible blogblog (versus network, site) if you need help
and guidance with anything else.
21. * 
* [Nick Halsey](https://profiles.wordpress.org/celloexpressions/) 2:30 pm _on_
July 8, 2014
* Maintaining and improving accessibilityAccessibility Accessibility (commonly
shortened to a11y) refers to the design of products, devices, services, or
environments for people with disabilities. The concept of accessible design
ensures both “direct access” (i.e. unassisted) and “indirect access” meaning
compatibility with a person’s assistive technology (for example, computer screen
readers). (https://en.wikipedia.org/wiki/Accessibility) is definitely a goal
here. All of the new proposed icons (exiting panels, customizerCustomizer Tool
built into WordPress core that hooks into most modern themes. You can use it
to preview and modify many of your site’s appearance settings. close, etc.)
have strong focus styling and use .screen-reader-text. I believe the focus
indicators are sufficient even though the change is only color because the
colors are inverted, with the darker color moving to the background and the
lighter color for the icon. There is also an outstanding patchpatch A special
text file that describes changes to code, by identifying the files and lines
which are added, removed, and altered. It may also be referred to as a **diff**.
A patch can be _applied_ to a codebase for testing. on [#27406](https://core.trac.wordpress.org/ticket/27406)
that ensures that only visible elements are focus-able.
* It would be great if the Accessibility team could do an audit of the Customizer’s
accessibility, particularly for screen readers, once these changes are committed.
We could also maybe fix [#27591](https://core.trac.wordpress.org/ticket/27591)
in 4.0 if it gets a patch soon.
- 
- [Graham Armfield](https://profiles.wordpress.org/grahamarmfield/) 1:56
pm _on_ July 10, 2014
- Nick, I’d like to have a look at the changes with a screen reader. Which
ticketticket Created for both bug reports and feature development on the
bug tracker. patches do I need to install to get the complete picture of
the changes?
* 
* [Nick Halsey](https://profiles.wordpress.org/celloexpressions/) 4:28
pm _on_ July 10, 2014
* Excellent!
* All of the user-facing changes are in WordPress 4.0 betaBeta A pre-release
of software that is given out to a large group of users to trial under
real conditions. Beta versions have gone through alpha testing in-house
and are generally fairly close in look, feel and function to the final
product; however, design changes often occur as part of the process.
1, so you should be able to test with that and won’t need any patches
at the moment. The remaining known issue with accessibilityAccessibility
Accessibility (commonly shortened to a11y) refers to the design of products,
devices, services, or environments for people with disabilities. The
concept of accessible design ensures both “direct access” (i.e. unassisted)
and “indirect access” meaning compatibility with a person’s assistive
technology (for example, computer screen readers). (https://en.wikipedia.
org/wiki/Accessibility) is insufficient focus styling for CustomizerCustomizer
Tool built into WordPress core that hooks into most modern themes. You
can use it to preview and modify many of your site’s appearance settings.
sections and panel headings, which will be addressed in [#28267](https://core.trac.wordpress.org/ticket/28267).
We’re definitely ready for an in-dept audit, keeping that in mind.
22. 
23. [simplethemes](https://profiles.wordpress.org/simplethemes/) 3:35 am _on_ July
11, 2014
24. Very nice!
25. Has anyone else noticed width issues with panels in Chrome (Testing in Version
35.0.1916.153)?
26. [http://d.pr/i/j93I](http://d.pr/i/j93I)
27. No problems in latest Firefox.
28. 
29. [nikeo](https://profiles.wordpress.org/nikeo/) 1:53 pm _on_ July 15, 2014
30. Panels => just what I needed
I also love the custom type and the context handling
possibilities it creates with customize_update_$type, which I was ignorant of.
31. Looking forward to see the JSJS JavaScript, a web scripting language typically
executed in the browser. Often used for advanced user interfaces and behaviors.
APIAPI An API or Application Programming Interface is a software intermediary
that allows programs to interact with each other and share data in limited, clearly
defined ways. enhancements!
Thanks for this overview [@celloexpressions](https://profiles.wordpress.org/celloexpressions/)
32. 
33. [Aniruddh](https://profiles.wordpress.org/aniruddh/) 12:25 am _on_ August 26,
2014
34. I don’t know if I’m missing something here but do we have contextual sections,
too?
35. * 
* [Nick Halsey](https://profiles.wordpress.org/celloexpressions/) 12:56 am
_on_ August 31, 2014
* Not yet. There is currently no JSJS JavaScript, a web scripting language typically
executed in the browser. Often used for advanced user interfaces and behaviors.
APIAPI An API or Application Programming Interface is a software intermediary
that allows programs to interact with each other and share data in limited,
clearly defined ways. for sections or panels, so there’s no good way to implement
contextual sections. But this feature will be available in the future, once
that’s in place. See [#28709](https://core.trac.wordpress.org/ticket/28709).
* You might look at what Widgets do in coreCore Core is the set of software required
to run WordPress. The Core Development Team builds WordPress. to make sections
contextual by doing special handling with a contextual control within the section.
36. 
37. [Scott Smith](https://profiles.wordpress.org/scottsmith/) 12:33 am _on_ August
31, 2014
38. So is it possible to use the new ability to specify ‘type’ => ‘url’ in a way that’s
compatible with WordPress 3.9 and lower?
39. * 
* [Nick Halsey](https://profiles.wordpress.org/celloexpressions/) 1:07 am _on_
August 31, 2014
* Unfortunately, no. But you can check for the existence of `$wp_customize->add_panel()`
for a 4.0 check and then act accordingly (just use text instead of url as the
type). And it won’t cause any critical issues, the control just wouldn’t be
displayed.
* It is forward compatible – if coreCore Core is the set of software required
to run WordPress. The Core Development Team builds WordPress. implements something
special for a specific html5 input type in the future, it will work with the
current fallback input type handling back to 4.0.
40. 
41. [kmavrov](https://profiles.wordpress.org/kmavrov/) 11:43 am _on_ September 5,
2014
42. Hi there, is it possible to have an indicator next to the range slider, which
shows the current value, like when you set min = 1, max = 5, step = 0.25, and
to be able to see that the current value of the range slider is 3.75 ?
43. * 
* [Nick Halsey](https://profiles.wordpress.org/celloexpressions/) 7:14 pm _on_
September 5, 2014
* If you really want to do that, you could add some javascriptJavaScript JavaScript
or JS is an object-oriented computer programming language commonly used to
create interactive effects within web browsers. WordPress makes extensive use
of JS for a better user experience. While PHP is executed on the server, JS
executes within a user’s browser.
[https://www.javascript.com](https://www.javascript.com/)
that does that. But if you want the value to be displayed, you should really
be using a `number` input (still with min, max, and step – which most browsers
now support). The specs for the range input type specifically state that range
should be used for inputs where the exact value is unimportant, and accordingly
it wouldn’t make sense to display it. See also [#28849](https://core.trac.wordpress.org/ticket/28849).
CoreCore Core is the set of software required to run WordPress. The Core Development
Team builds WordPress. is unlikely to adopt this for the reasons above and
because `range` doesn’t have to represent something numeric from a user’s perspective.
44. 
45. [AxisThemes](https://profiles.wordpress.org/axisthemes/) 5:04 pm _on_ September
5, 2014
46. Hi Nick, how could we make theme customizerCustomizer Tool built into WordPress
core that hooks into most modern themes. You can use it to preview and modify
many of your site’s appearance settings. panel support in 3.9 or 3.8 are there
any coreCore Core is the set of software required to run WordPress. The Core Development
Team builds WordPress. plugins. Please adapt changes for customizer how the MP6
was done and later release. If the customizer core WP pluginPlugin A plugin is
a piece of software containing a group of functions that can be added to a WordPress
website. They can extend functionality or add new features to your WordPress websites.
WordPress plugins are written in the PHP programming language and integrate seamlessly
with WordPress. These can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/)
or can be cost-based plugin from a third-party. was started for adapting changes
let me know.
47. * 
* [Nick Halsey](https://profiles.wordpress.org/celloexpressions/) 8:46 pm _on_
September 5, 2014
* Because the panel APIAPI An API or Application Programming Interface is a software
intermediary that allows programs to interact with each other and share data
in limited, clearly defined ways. is deeply integrated with coreCore Core is
the set of software required to run WordPress. The Core Development Team builds
WordPress., it was developed directly in core instead of in a pluginPlugin
A plugin is a piece of software containing a group of functions that can be
added to a WordPress website. They can extend functionality or add new features
to your WordPress websites. WordPress plugins are written in the PHP programming
language and integrate seamlessly with WordPress. These can be free in the
WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/)
or can be cost-based plugin from a third-party.. In fact, it was developed
as part of my GSoC project to integrate Menus into the CustomizerCustomizer
Tool built into WordPress core that hooks into most modern themes. You can
use it to preview and modify many of your site’s appearance settings. in a
plugin, which required this functionality.
* New features that can act as standalone plugins are developed as plugins (for
example, the WidgetWidget A WordPress Widget is a small block that performs
a specific function. You can add these widgets in sidebars also known as widget-
ready areas on your web page. WordPress widgets were originally created to
provide a simple and easy-to-use way of giving design and structure control
of the WordPress theme to the user. Customizer and the Menu Customizer). Iterative
enhancements to the central APIs in the Customizer are better developed directly
in core. And any smaller feature or API change is best developed in core, only
sweeping changes should happen via plugins first.
* There’s pretty much no reason to be worried about supporting 3.8 and 3.9, because
there’s pretty much no reason NOT to update to 4.0, since WordPress is backwards-
compatible. If you need to use things that have been added in 4.0, simply require
your users to update.
48. 
49. [AxisThemes](https://profiles.wordpress.org/axisthemes/) 10:40 pm _on_ September
6, 2014
50. Hello Nick, Could you please help me with this type of setting. I have gone through
almost everything in this post but truly I could solve. So some bit of example
for this will be great solution.
51. [http://d.pr/i/xOBH](http://d.pr/i/xOBH)
52. Tip: Until the users select the “Custom” from the ‘HeaderHeader The header of
your site is typically the first thing people will experience. The masthead or
header art located across the top of your page is part of the look and feel of
your website. It can influence a visitor’s opinion about your content and you/
your organization’s brand. It may also look different on different screen sizes.
Size’ select option that range control should be hidden.
53. * 
* [Nick Halsey](https://profiles.wordpress.org/celloexpressions/) 6:16 pm _on_
September 9, 2014
* You can actually accomplish controls that are conditionally displayed based
on the values of other controls with the new active_callback argument for controls.
Pass in a custom callback function that checks the value of the other setting(
with get_option or get_theme_mod) and return true or false whether to show
the conditional control. [See an example](https://plugins.trac.wordpress.org/browser/fourteen-colors/trunk/component-link-color.php).
54. 
55. [steven_gardner](https://profiles.wordpress.org/steven_gardner/) 8:10 pm _on_
September 17, 2014
56. Hi, Thanks for the post its helped me a lot.
57. One question though, You mentioned “check for the existence of WP_Customize_Manager-
>add_panel()”, How would I write that in PHPPHP The web scripting language in
which WordPress is primarily architected. WordPress requires PHP 7.4 or higher?
58. Just learning PHP as I’m going and everything I’ve tried has failed.
59. Thanks
Steven
60. * 
* [steven_gardner](https://profiles.wordpress.org/steven_gardner/) 8:28 pm
_on_ September 17, 2014
* I managed to work this out, I think:
* `if(method_exists('WP_Customize_Manager', 'add_panel')):
$wp_customize->add_panel('
themename_homepage_panel', array( 'title' => __('Homepage Settings', 'themename'),'
priority' => 12, )); endif;
* If this is wrong please let me know. Thanks
61. 
62. [jakilevy](https://profiles.wordpress.org/jakilevy/) 7:07 pm _on_ October 27,
2014
63. Hi All – not sure if this is the best place to post – we just put together a pluginPlugin
A plugin is a piece of software containing a group of functions that can be added
to a WordPress website. They can extend functionality or add new features to your
WordPress websites. WordPress plugins are written in the PHP programming language
and integrate seamlessly with WordPress. These can be free in the WordPress.org
Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/)
or can be cost-based plugin from a third-party. that allows users to import/export
the settings in the WordPress CustomizerCustomizer Tool built into WordPress core
that hooks into most modern themes. You can use it to preview and modify many
of your site’s appearance settings. – [https://github.com/ArrowRootMedia/Theme-Customizations-Cloner](https://github.com/ArrowRootMedia/Theme-Customizations-Cloner)–
would be happy to work on a better integration and maintain this kind of functionality
ongoingly…
Comments are closed.
# Post navigation
[← Internationalization project updates](https://make.wordpress.org/core/2014/07/02/internationalization-project-updates/)
[Proposed agenda for today’s dev chat We’re targeting… →](https://make.wordpress.org/core/2014/07/09/proposed-agenda-for-todays-dev-chat-were-targeting/)