WordPress.org

Theme Review Team

Recent Updates Page 3 Toggle Comment Threads | Keyboard Shortcuts

  • Tammie 9:26 am on June 15, 2015 Permalink |  

    Weekly meeting agenda.

    We’ve got a meeting Tuesday at 18:00 utc in #themereview. Lets talk through some of the posts that have been up since last week:

     
    • Tammie 9:13 pm on June 15, 2015 Permalink | Log in to Reply

      Noting we should talk about theme upload being disabled for new accounts because of issues. See this archive for reference: https://wordpress.slack.com/archives/themereview/p1434402528000151

    • Ulrich 7:50 am on June 16, 2015 Permalink | Log in to Reply

      I was reviewing a theme that included a menu link in the admin bar. It is not in the requirements that it can not be added but I know some themes were told in the past to remove it.

      In the theme check there is a check for

      add_admin_page()

      https://make.wordpress.org/themes/handbook/review/required/theme-check-plugin/#admin-menu

      Can we discuss and decide if we want to allow it or not? If we decide not to allow it a possible requirement would be “Only add theme page links in the Appearance subsection”. This is a rough draft.

      I don’t think I can make it to the meeting. I don’t have a preference on what the outcome is. Please can we clarify on this? Thanks

    • Ulrich 7:58 am on June 16, 2015 Permalink | Log in to Reply

      As I don’t think I can attend the meeting today I will give a report on Contributor Day Cologne which took place on Monday 8th June.

      I had the great opportunity to help 6 superduper reviewers get started with reviewing themes.

      Everyone signed up to Slack and joined the #themereview channel. We looked at the requirements on the overhead projector together. I then assigned myself a theme and then reviewed a theme together. We looked at common places where there are issues and I commented in the ticket while we went through the theme. Once we completed the review I posted the comments and team was split in groups of two who did a theme review together and could ask questions when they were unsure of something.

      I felt this went well and will do the same thing at WordCamp Switzerland in September.

  • Chip Bennett 12:58 am on June 13, 2015 Permalink |  

    Meeting Minutes 06/11/15 

    Per our meeting yesterday and the comments on the earlier post, the Theme review requirements have been modified. Additions are highlighted in red, and deletions are struck-out:

    A theme must meet all of the following requirements to be included in the WordPress.org theme repository.

    Along with these checks you should also make sure you run the theme through the theme check plugin. It automatically checks for all the required items. You can find a full list of what it checks here.

    Accessibility

    • If the theme has the tag ‘accessibility-ready’ then it needs to meet these requirements.

    Code

    • No PHP or JS errors.
    • Include at least index.php and style.css.
    • Have a valid DOCTYPE declaration and include language_attributes.
    • Sanitize everything.
    • No removing or modifying non-presentational hooks.
    • No shortcodes are allowed.
    • Support the following WordPress-generated CSS classes:
      • alignleft
      • alignright
      • wp-caption
      • wp-caption-text
      • gallery-caption
      • sticky (can be unstyled)
      • bypostauthor (can be unstyled)
      • screen-reader-text
    • Must meet all uploader/Theme Check required tests
    • Provide a unique prefix for everything the Theme defines in the public namespace, including options, functions, global variables, constants, post meta, etc.

    Core Functionality and Features

    • Use WordPress functionality and features first, if available.
    • Don’t include admin/feature pointers.
    • No custom post types and no custom taxonomies.
    • No pay wall restricting any WordPress feature.
    • No disabling of the admin tool bar.
    • Use get_template_directory() rather than TEMPLATEPATH to return the template path.
    • Use get_stylesheet_directory() rather than STYLESHEETPATH to return the stylesheet path.
    • Avoid hard coding to modify content. Instead, use function parameters, filters and action hooks where appropriate. For example wp_title should be modified using a filter.
    • Able to have child themes made from them. (Child theme ready)
    • Include comments_template().
    • The theme tags and description must match the what the theme actually does in respect to functionality and design.
    • Use template tags and action/filter hooks properly.

    Presentation vs. Functionality

    • Must not not generate user content, or configure non-theme site options or site functionality.

    Documentation

    • Any custom features, options or any limitations (for example menu restrictions), should be explained. Enough documentation should be provided.

    Favicons

    • If implemented, disable favicons by default and have the ability for users to override.

    Language

    • All theme text strings are to be translatable.
    • Include a text domain in style.css
    • Use a single unique theme slug – as the theme slug appears in style.css. If it uses a framework then no more than 2 unique slugs.
    • Can use any language for text, but only use the same one for all text.

    Licensing

    • Be 100% GPL and/or 100% GPL-compatible licensed.
    • Declare copyright and license explicitly. Use the license and license uri header slugs to style.css.
    • Declare licenses of any resources included such as fonts or images.
    • All code and design should be your own or legally yours. Cloning of designs is not acceptable.

    Naming

    • Theme names must not use: WordPress, Theme.
    • Spell “WordPress” correctly in all public facing text: all one word, with both an uppercase W and P.

    Options and Settings

    • Save options in a single array.
    • Use sane defaults and don’t write default setting values to the database.
    • Use edit_theme_options capability for determining user permission to edit options, rather than rely on a role (e.g. “administrator”), or a different capability (e.g. “edit_themes”, “manage_options”).
    • Use the Customizer for implementing theme options.

    Plugins

    • Don’t include any plugins. A theme can recommend plugins but not include those plugins in the theme code.
    • Don’t do things in a theme considered plugin territory.

    Screenshot

    • The Screenshot should be of the actual theme as it appears with default options, not a logo or mockup.
    • The screenshot should be no bigger than 1200 x 900px.

    Security and Privacy

    • Don’t phone home without informed user consent. Find out more about security here.
    • Make any collection of user data “opt-in” only and have a theme option that is set to disabled by default. Validate and sanitize untrusted data before entering into the database. All untrusted data should be escaped before output. (See: Data Validation.)
    • No URL shorteners used in the theme.
    • Use esc_attr() for text inputs and esc_textarea() for textareas.

    Selling, credits and links

    • If you are a theme shop you should be selling under GPL to be in the WordPress.org repo.
    • If the theme adds a footer credit link, there should only be one (link to WordPress does not count)

    Stylesheets and Scripts

    • No hard coding of scripts, styles and Favicons unless a browser workaround script. Everything should be enqueued.
    • No analytics or tracking.
    • No minification of scripts or files unless provide original files.
    • Required to use core-bundled scripts rather than including their own version of that script. For example jQuery.
    • Include all scripts and resources it uses rather than hot-linking. The exception to this is Google libraries.
    • If a tag is used in style.css the theme should support that feature or adhere to what that tag stands for. For example custom background or header.

    Templates

    It’s worth noting we are working to automate a lot of the above requirements.

    Along with the required items, you should also consider the recommended items. The recommended items are there to make sure your theme is the best it can be and good advice to include as best practice.

    If you have any questions regarding what was updated/clarified, please ask in the comments.

    Please note that we will very likely continue to look for ways to clarify and simplify the Requirements, including more extensive usage of code examples, explanations, and clarifications linked from the Requirements elsewhere in the Theme Review Handbook.

     
    • Hardeep Asrani 1:06 am on June 13, 2015 Permalink | Log in to Reply

      Hi Chip,

      I’ve a couple of questions:

      No custom post types and no custom taxonomies. No shortcodes are allowed.

      So now WordPress.org themes can include CPT and shortcodes, right?

      Must not not generate user content, or configure non-theme site options or site functionality.

      So what does it means for themes like Zerif Lite? They generate user content, and Matt was fine with it, right?

      And also – it would be great if you could explain this point. Thanks for the update. :)

      • Venkat Raj 1:25 am on June 13, 2015 Permalink | Log in to Reply

        I second that…
        Isn’t CPT is user content?

      • Justin Tadlock 1:26 am on June 13, 2015 Permalink | Log in to Reply

        CPTs, CTs, and shortcodes are not allowed. Those items now fall under the “Presentation vs. Functionality” section, which was the original section we had until it got removed/modified a few months back. What we’ll be doing is adding specifics to the “Examples and Explanations” page. So, on that page, we’ll list out specifics like CPTs, CTs, and shortcodes.

        Basically, the meeting was for minimizing the guidelines where possible.

        • Hardeep Asrani 1:31 am on June 13, 2015 Permalink | Log in to Reply

          Thanks for the clarification. One more question – how would you describe themes adding widgets to style the front-page? Is it allowed, or will it fall under “user generated content?” Thanks again. :)

          • Justin Tadlock 5:58 pm on June 14, 2015 Permalink | Log in to Reply

            The question is too general. If there’s a ticket you can CC me on or specific example you can point me to, I’d be happy to look at it.

    • Dovy Paukstys 5:14 am on June 13, 2015 Permalink | Log in to Reply

      Question, in reference to: https://github.com/Otto42/theme-check/issues/65#issuecomment-111516643

      Long story short, my framework is used by many developers and has the ability to add both add_menu_page and add_theme_page. Now add_menu_page is not approved and flags Theme-Check.

      The issue is, our devs KNOW to not use that particular function at all when submitting.

      Is there any way we can make the Required a warning/notice, and let them know it’s not permitted allowing my framework to pass Theme-Check? Or can we remove that requirement all together and allow devs to do what they would like? 😉

      Honestly, with the customizer it will never be used anyways, but I’d rather not take it out of my code even if it’s not used by WP.org themes.

      Thoughts?

    • dmccan 10:12 pm on June 13, 2015 Permalink | Log in to Reply

      This is a good improvement.

  • Ulrich 4:09 pm on June 11, 2015 Permalink |  

    Blockers with the Theme Check plugin 

    We are currently discussing how theme can be uploaded and set live without any human interaction. When themes are uploaded via the upload page the themes are checked with the Theme Check plugin and then the ticket is created. The Theme Check plugin currently does not catch all of the issues.

    Are there any blockers stopping us from switching to a fully automated system specifically related to the the Theme Check plugin? This does not need to be checks it can be other things too.

    What is the minimum requirement that all themes should fulfil? Does the Theme Check plugin cover all of the these requirements?

    The additional checks are not going to cover all of the requirements. The main aspects that we want to concentrate on are security, spam and things that could break the user’s site like PHP errors and non-namespaced functions.


    What specific checks do we need?

    Here are a few checks that I thought of:

    • Check for the settings API or custom setting solutions
    • Counting the number of text domains. We can also have a list of text domains that are normally used a frameworks. This would be extending the “TextDomainCheck” class
    • Checking for namespaces
    • Checking for duplicate themes from spammers
    • Checking for PHP errors

    With any automated testing that are always false positives. How do we want to handle false positives?

    My solution would be to add the theme check results to the created ticket and then a reviewer can just check if it is a false positive.


    The Theme Check plugin can be found on GitHub. There are two issues open at the moment that need a Pull Request. We are also looking for people to help write the additional tests.

     
    • Justin Tadlock 3:30 pm on June 11, 2015 Permalink | Log in to Reply

      None of these seem like blockers for automation, which is what we’re supposed to be focusing on.

      I’ll comment on a couple of items though:

      Check for the settings API or custom setting solutions

      I’d love to check for custom settings classes for the customizer. Right now, if your custom setting has a sanitize method, you have to add some arbitrary sanitize callback to your $wp_customize->add_setting() to pass the check.

      Checking for prefixes.

      I’m not sure that we can realistically check for prefixes. That’d essentially fail any theme including a third-party script/library.

      We also have to remember that the guideline really isn’t about prefixing at all. It’s about namespacing. Prefixing is just the standard naming convention that is prevalent. You could just as easily use suffixing or PHP Namespaces.

    • MRWweb 4:37 pm on June 11, 2015 Permalink | Log in to Reply

      I don’t know if this has been raised yet, but the Theme Check plugin isn’t set up to handle child themes at all.

    • Dovy Paukstys 4:43 pm on June 11, 2015 Permalink | Log in to Reply

      Would we halt on warnings or just errors? Will we classify errors, or are all errors blockers?

      Here’s why I ask: https://docs.reduxframework.com/core/theme-check/

      I’ve posted issues for each of the items listed on the GitHub issue tracker.

      Also, Text-domains – Limiting text domains could cause issues. Any integrated class from another would need to be mass-renamed. It’s going to take time to make your “list” of text domains. I’d say hold off until that list is comprehensive, and give a limit of like 3-5 after that just in case.

      What is going to be considered a blocker? Required? info? Etc?

      • Justin Tadlock 5:15 pm on June 11, 2015 Permalink | Log in to Reply

        There’s currently a limit of 2 on textdomains. It was what I was able to get the team to compromise on. The number is really arbitrary though. There could be 100s, for example.

      • Justin Tadlock 5:20 pm on June 11, 2015 Permalink | Log in to Reply

        I believe things that are currently “required” or “warnings” already get auto-rejected. They don’t even get through the submission process.

        What we’re actually looking for are additional things that should be auto-rejected that we don’t currently take care of. We’re talking “sky will fall” scenarios here. I don’t know of any issues offhand that TC could check for.

    • Chip Bennett 6:06 pm on June 11, 2015 Permalink | Log in to Reply

      If it is feasible to add them to Theme Check, I would like to propose two new “blockers” (that will also simplify human/manual Theme reviews): Deprecated Notices and doing_it_wrong() notices.

  • Tammie 2:10 pm on June 11, 2015 Permalink |  

    Today’s meeting agenda

    We’ve got a meeting today at 18:00UTC in Slack #themereview. In it we’re going to be catching up on things not covered in Thursday.

     
  • Chip Bennett 1:08 am on June 11, 2015 Permalink |  

    Moving to the Customizer API from the Settings API, using Options API 

    Theme developers using a custom implementation of Options API/Settings API, or who use one of the many excellent frameworks/libraries that use Options API/Settings API, to handle Theme options and create settings pages, will soon need to modify their Theme options to use of the Customizer API. This post will discuss some of the issues potentially encountered with moving from Options API/Settings API to Options API/Customizer API.

    Note: there are other tutorials that describe basic Customizer API implementation. My focus with this post is specifically porting from Options API/Settings API to Options API/Customizer API.

    What API?

    First, a note regarding APIs.

    The Options API and the Theme Mods API are used to store/retrieve options to/from the database. The Settings API and the Customizer API are used to expose settings to the user to configure options. Either of the storage/retrieval APIs can be used with either of the user-configuration APIs.

    The new Theme Review requirement stipulates use of the Customizer API in lieu of the Settings API, but does not require use of either the Options API or the Theme Mods API in lieu of the other. So, both Theme Mods API/Customizer API implementations and Options API/Customizer API implementations remain acceptable.

    Now, for new Themes, it is certainly recommended – and easier – to use a Theme Mods API/Customizer API implementation. However, existing Themes with existing users, it is not feasible to move from an Options API/Settings API implementation to a Theme Mods API/Customizer API implementation. Fortunately, the Options API/Customizer API implementation is a feasible alternative.

    Options Configuration Array

    For the purposes of this post, I’ll assume that your existing Options API/Settings API implementation is built around a configuration array that defines each of the Theme options, and the various parameters for each option. Each setting will have certain standard parameters, including ID, title, description, field type (checkbox, radio, text, textarea, etc.), a sanitization/data type (HTML text, no-HTML text, email, hex color, etc.), and default value. Additionally, each setting may have a defined settings page section, and, if applicable, settings page tab. Finally, for settings that have select-type fields (select, radio, etc.), the parameters will include an array of choices.

    For the purposes of this post, we’ll assume that the configuration array looks like so:

    $settings_parameters = array(
    	'text_setting_1' => array(
    		'id' => 'text_setting_1',
    		'title' => __( 'Text Setting 1', 'theme-slug' ),
    		'description' => __( 'Text setting 1 description', 'theme-slug' ),
    		'field_type' => 'text',
    		'sanitize' => 'html',
    		'tab' => 'tab_1',
    		'section' => 'section_1',
    		'default' => __( 'Default Text Setting 1 text', 'theme-slug' )
    	),
    	'text_setting_2' => array(
    		'id' => 'text_setting_2',
    		'title' => __( 'Text Setting 2', 'theme-slug' ),
    		'description' => __( 'Text setting 2 description', 'theme-slug' ),
    		'field_type' => 'text',
    		'sanitize' => 'email',
    		'tab' => 'tab_1',
    		'section' => 'section_2',
    		'default' => __( 'noreply@example.com', 'theme-slug' )
    	),
    	'select_setting_1' => array(
    		'id' => 'select_setting_1',
    		'title' => __( 'Select Setting 1', 'theme-slug' ),
    		'description' => __( 'Select setting 1 description', 'theme-slug' ),
    		'field_type' => 'select',
    		'sanitize' => 'select',
    		'tab' => 'tab_2',
    		'section' => 'section_1',
    		'default' => 'blue',
    		'choices' => array(
    			'blue' => __( 'Blue', 'text-slug' ),
    			'red' => __( 'Red', 'text-slug' ),
    			'green' => __( 'Green', 'text-slug' ),
    		)
    	),
    );
    

    Assuming that your implementation has a tabbed settings page, with settings sections for each tab, you will have another array defined, perhaps like so:

    $settings_page_tabs = array(
    	'tab_1' => array(
    		'id' => 'tab_1',
    		'title' => __( 'Page Tab 1', 'theme-slug' ),
    		'description' => __( 'Page tab 1 description', 'theme-slug' ),
    		'sections' => array(
    			'section_1' => array(
    				'id' => 'section_1',
    				'title' => __( 'Section 1 Title', 'theme-slug' ),
    				'description' => __( 'Section 1 description', 'theme-slug' )
    			),
    			'section_2' => array(
    				'id' => 'section_2',
    				'title' => __( 'Section 2 Title', 'theme-slug' ),
    				'description' => __( 'Section 2 description', 'theme-slug' )
    			),
    		),
    	'tab_2' => array(
    		'id' => 'tab_2',
    		'title' => __( 'Page Tab 2', 'theme-slug' ),
    		'description' => __( 'Page tab 2 description', 'theme-slug' ),
    		'sections' => array(
    			'section_1' => array(
    				'id' => 'section_1',
    				'title' => __( 'Section 1 Title', 'theme-slug' ),
    				'description' => __( 'Section 1 description', 'theme-slug' )
    			),
    			'section_2' => array(
    				'id' => 'section_2',
    				'title' => __( 'Section 2 Title', 'theme-slug' ),
    				'description' => __( 'Section 2 description', 'theme-slug' )
    			),
    		)
    	)
    );
    

    Moving from Settings API to Customizer API

    Settings Page Tabs => Customizer Panels

    With the Settings API, you have to write your own code to implement settings page tabs. With the Customizer, tabs are built in, and they are called Panels. Using our settings page configuration above, setting up Panels is simple:

    foreach ( $settings_page_tabs as $panel ) {
    	$wp_customize->add_panel(
    		'theme_slug_' . $panel['id'], 
    		array(
    			'priority' 	=> 10,
    			'capability' 	=> 'edit_theme_options',
    			'title' 	=> $panel['title'],
    			'description' 	=> $panel['description'],
    		) 
    	);
    }
    

    Note here that you can sort your Theme’s panels, using the 'priority' parameter. Also, passing 'capability' => 'edit_theme_options', you’re taking care of the capability check that you would do elsewhere, via add_theme_page(), with the Settings API.

    Settings Page Sections => Customizer Panel Sections

    With the Settings API, you add a settings page section using add_settings_section():

    foreach ( $settings_page_tabs as $tab ) {
    	// Loop through tabs for sections
    	foreach ( $tab['sections'] as $section ) {
    		add_settings_section(
    			// $id
    			'theme_slug_' . $section['id'] . '_section',
    			// $title
    			$section['title'],
    			// $callback
    			'theme_slug_section_callback',
    			// $page (menu slug)
    			'theme-slug'
    		);
    	}
    }
    

    You would then have to define the callback for each section (normally used for the descriptive text for the section), and you would also have to take care to pass the correct string for $page. Then, in your settings page, you would have to call do_settings_section( $id ) for each settings section.

    With the Customizer API, again, this process is simplified and the code is similar:

    foreach ( $settings_page_tabs as $panel ) {
    	// Loop through tabs for sections
    	foreach ( $panel['sections'] as $section ) {
    		$wp_customize->add_section(
    			// $id
    			'theme_slug_' . $section['id'],
    			// parameters
    			array(
    				'title'		=> $section['title'],
    				'description'	=> $section['description'],
    				'panel'		=> 'theme_slug_' . $panel['id']
    			)
    		);
    	}
    }
    

    Settings Page Settings => Customizer Settings

    The next step is to register each of the settings fields. With the Settings API, you use add_settings_field() to define the setting, and you pass as a parameter a callback that defines the form field markup for that setting. Using the settings parameters array, you might be doing something dynamic, like so:

    foreach ( $settings_parameters as $option ) {
    	add_settings_field(
    		// $settingid
    		'them_slug_setting_' . $option['id'],
    		// $title
    		$option['title'],
    		// $callback
    		'theme_slug_setting_callback',
    		// $pageid
    		'theme_slug_' . $option['tab'] . '_tab',
    		// $sectionid
    		'theme_slug_' . $option['section'] . '_section',
    		// $args
    		$option
    	);
    

    The code for the Customizer API is similar:

    foreach ( $settings_parameters as $option ) {
    	$wp_customize->add_setting(
    		// $id
    		'theme_slug_options[' . $option['id'] . ']',
    		// parameters array
    		array(
    			'default'		=> $option['default'],
    			'type'			=> 'option',
    			'sanitize_callback'	=> 'theme_slug_sanitize_' . $option['sanitize']
    
    		)
    	);
    

    A couple things to note here:

    First, 'type' => 'option' tells the Customizer to use the Options API, rather than the Theme Mods API, to retrieve/store settings.

    Second, the 'sanitize_callback' is required. We will address why later.

    Settings API Settings Page Setting Field Callback => Customizer Control

    With the Settings API, when you call add_settings_field(), you might have defined a single setting callback that switches through output based on field type, or you may have separate callbacks for each field type. Either way, with the Customizer API, this process is much simpler for field types defined by the API (text, checkbox, radio, select, dropdown_pages, textarea):

    foreach ( $settings_parameters as $option ) {
    	// Add setting control
    	$wp_customize->add_control(
    		// $id
    		'theme_slug_options[' . $option['id'] . ']',
    		// parameters array
    		array(
    			'label'		=> $option['title'],
    			'section'	=> 'theme_slug_' . $option['section'],
    			'settings'	=> 'theme_slug_options['. $option['id'] . ']',
    			'type'		=> $option['field_type'],
    			'label'		=> $option['title'],
    			'description'   => $option['description'], // If applicable (select, radio, etc.) 'choices' => $option['choices'] ) ); }

    Something very important to note here: the value you pass for the 'settings' parameter must be the same as the option ID you define in register_setting(). Also, assuming that you are properly using a single options array, the structure 'theme_slug_options[id]' is important, since that is what gets passed to the Settings API settings page form fields, so you want to ensure that you pass the same structure to the Customizer. That way, the Customizer will properly retrieve and save the user’s current settings.

    For simplicity, I use the same structure 'theme_slug_options['. $option['id'] . ']' for the ID of the setting, the ID of the control, and the value of the 'settings' key passed to the control.

    Also, if you need to add custom controls, you can loop through the option types separately. For example, if you want to add a core color control:

    foreach ( $settings_parameters as $option ) {
    	// Add controls for built-in control types		
    	if ( in_array( $option['field_type'], array( 'text', 'checkbox', 'radio', 'select', 'dropdown_pages', 'textarea' ) ) ) {
    		// Add setting control
    		$wp_customize->add_control(
    			// $id
    			'theme_slug_options[' . $option['id'] . ']',
    			// parameters array
    			array()
    		);
    	}
    	// Add color control
    	else if ( 'color' == $option['field_type'] ) {
    		$wp_customize->add_control( 
    			new WP_Customize_Color_Control( 
    				$wp_customize, 
    				'link_color', 
    				array() 
    			) 
    		);
    	}
    }
    

    You can use the same method for any of the core controls, or for custom controls.

    Sanitization/Validation

    All-Settings Callback via register_setting()

    With the Options API, you register your Theme options array using register_setting(), the third parameter of which is the sanitization/validation callback:

    register_setting(
    	// $optiongroup
    	'theme_slug_options',
    	// $option
    	'theme_slug_options',
    	// $sanitize_callback
    	'theme_slug_options_validate'
    );
    

    When the Settings API settings page form is submitted, the Theme’s $option object is passed as $_POST data through the $sanitize_callback before being saved to the database.

    With the Customizer API, the same thing happens. If you have called register_setting(), when the Customizer form is submitted, the Theme’s $option object is passed as $_POST data through the $sanitize_callback before being saved to the database.

    Customizer API: All-Settings Callback via sanitize_options_$option Hook

    With the Customizer API, you don’t necessarily have to retain the register_setting() call. You can also hook the $sanitize_callback into the 'sanitize_option_{$option}' hook, which would allow you to remove the register_setting() call altogether:

    add_action( 'sanitize_option_theme_slug_options', 'theme_slug_options_validate' );
    

    Customizer API: Per-Setting Sanitization

    However, the Customizer is different from a settings page, in a way that makes the Customizer much more powerful: the live preview. By configuring settings in the Customizer, the user can see those settings changes applied immediately, via the live preview. But real-time configured settings are not passed through the 'sanitize_option_{$option}' hook until the settings are saved (i.e. when the Customizer form is submitted). That means that, without proper sanitization of the Customizer settings, the potential exists for XSS or other exploits.

    The input will be passed through 'sanitize_callback' passed to $wp_customize->add_setting() not only when the settings are saved, but also when passed to the live previewer. Thus, per-setting sanitization, via the 'sanitize_callback' parameter passed to $wp_customize->add_setting(), is critical.

    Dynamic Sanitization Callbacks

    Let’s look at $wp_customize->add_setting() again:

    $wp_customize->add_setting(
    	// $id
    	'theme_slug_options[' . $option['id'] . ']',
    	// parameters array
    	array(
    		'default'		=> $option['default'],
    		'type'			=> 'option',
    		'sanitize_callback'	=> 'theme_slug_sanitize_' . $option['sanitize']
    	)
    );
    

    Using this method, you need only define one callback for each sanitization type (HTML text, no-HTML text, email, checkbox true/false, etc. For example:

    function theme_slug_sanitize_checkbox( $input ) {
    	return ( ( isset( $input ) && true == $input ) ? true : false );
    }
    function theme_slug_sanitize_html( $input ) {
    	return wp_filter_kses( $input );
    }
    
    function theme_slug_sanitize_nohtml( $input ) {
    	return wp_filter_nohtml_kses( $input );
    }
    

    Dynamic Sanitization Callbacks for Select-Type Options

    The above callbacks, that receive $input, manipulate it, and then return it, are fine for data that only requires sanitization. But what if the data requires validation, such as verifying that $input matches one of the valid choices defined for a select dropdown or radio list? An arbitrary callback such as the ones above will not have the list of valid choices. Fortunately, in addition to $input, the Customizer API passes a second parameter to 'sanitize_callback': the $setting object. We can use this object to grab the list of choices from the control:

    function theme_slug_sanitize_select( $input, $setting ) {
    	// Ensure input is a slug
    	$input = sanitize_key( $input );
    	// Get list of choices from the control
    	// associated with the setting
    	$choices = $setting->manager->get_control( $setting->id )->choices;
    	// If the input is a valid key, return it;
    	// otherwise, return the default
    	return ( array_key_exists( $input, $choices ) ? $input : $setting->default );
    }
    

    Caveat: for this little bit of magic to work, it is imperative that the setting ID is identical to the control ID; otherwise, the callback won’t be able to retrieve the control:

    // Setting
    $wp_customize->add_setting(
    	// $id
    	'theme_slug_options[' . $option['id'] . ']',
    	// parameters array
    	array()
    );
    
    // Control
    $wp_customize->add_control(
    	// $id
    	'theme_slug_options[' . $option['id'] . ']',
    	// parameters array
    	array()
    );
    

    Notice that in both calls, the $id is 'theme_slug_options[' . $option['id'] . ']'.

    Eliminating Unused Options API/Settings API Code

    At this point, your Theme options should be retrieved from the database and exposed in the Customizer, configurable with live preview in the Customizer, and saved properly to the database from the Customizer. Everything in the Settings API settings page should now be redundant with the customizer. The next step is to remove unneeded code.

    Settings API Settings Page

    Now that the Settings API settings page is redundant with the Customizer, it can be removed. The call to add_theme_page() and its callback, calls to add_settings_section() and their callbacks, calls to add_settings_field and their callbacks, as well as any Contextual Help, can all be safely removed.

    register_setting() and All-Settings Sanitization Callback

    As mentioned above, with per-setting sanitization in the Customizer, the all-settings sanitization callback is no longer needed. Also, because the customizer implementation explicitly adds settings and controls for all options in the Theme options array, the call to register_setting() is also no longer required. Both can be removed safely.

    Conclusion

    That’s it! If you have other questions or issues regarding moving from Options API/Settings API to Options API/Customizer API, please post them in the comments below.

     
    • progmastery 12:25 pm on June 11, 2015 Permalink | Log in to Reply

      Thanks for the post @chipbennett.
      Most of the things that can be done using the settings API, can be done also using Customizer.
      However I encountered one drawback the Customizer has.
      Since Settings custom pages are forms submitted to options.php, it is possible to send parameters in arrays with arbitrary depth, like [slider][duration], [slider][effect], and [slider][iamges][0][title]. The same thing is not possible to do using the Customizer.
      Customizer allows only parameters in array if this is multiple select. However semantically not always it is good to separate compound parameters in array.
      Is there any natural simple way to solve this problem? Or maybe customizer has to be improved and enhanced?

      • Chip Bennett 12:38 pm on June 11, 2015 Permalink | Log in to Reply

        A slider is a post-type, and not a Theme option.

        • progmastery 1:42 pm on June 11, 2015 Permalink | Log in to Reply

          I brought this this just as an example of a setting which can be a single compound option in array, but not suitable to display as multiple select in control.

          • Chip Bennett 3:35 pm on June 11, 2015 Permalink | Log in to Reply

            The Customizer can be extended to allow any sort of control that you can imagine. So, even if there were a valid option that consisted of an array (consider an image, that includes height and width parameters as part of the retrievable setting), there’s no reason the Customizer can’t handle it.

        • progmastery 1:46 pm on June 11, 2015 Permalink | Log in to Reply

          Let me disagree with you. Why should a slider in the header be custom post type and not a setting customizable through the theme backend?

      • Justin Tadlock 4:34 pm on June 11, 2015 Permalink | Log in to Reply

        I wrote a tutorial that utilizes an array for saving data. It’s not exactly what you’re going for, but it should give you a good jumping-off point.

        The actual content of the slides in a slider are definitely content. The JS/CSS/Output can be handled by a theme because they’re presentation, but the creation of the actual content shouldn’t be a theme option. That can be in a slide post type created by a plugin or it can be core post types (e.g., posts, pages, attachments).

        • progmastery 6:41 pm on June 11, 2015 Permalink | Log in to Reply

          Thanks for clarifying the issue with slider content, of course slider should include already existing content and not create its own.
          In the tutorial, it’s the most obvious way to use multiple data in customizer control. And that is what we already do. Indeed everything can be joined into plain string or JSON. But that becomes too complicated and adds quite a lot of JS code, instead of which I would like to see something simpler.

          • Justin Tadlock 7:22 pm on June 11, 2015 Permalink | Log in to Reply

            I actually need to update that tutorial. I forgot to add my more recent changes that doesn’t do the plain string. It’s much simpler.

c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel