{"id":4505,"date":"2018-02-10T17:11:19","date_gmt":"2018-02-10T16:11:19","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=4505"},"modified":"2020-02-09T11:29:12","modified_gmt":"2020-02-09T10:29:12","slug":"validating-customize-settings-with-displaying-error-messages","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/validating-customize-settings-with-displaying-error-messages-4505\/","title":{"rendered":"Validating customize settings with displaying error messages"},"content":{"rendered":"<p>Since WordPress 4.6 it is relatively simple to add validation to customize settings, to give helpful error messages to the user. Here I show you how that works.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>There are three ways to add validation:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>By defining a <code class=\"lang-php\">validate_callback<\/code> when registering a setting.<\/li><li>By using the <code class=\"lang-php\">sanitize_callback<\/code> of a setting.<\/li><li>By creating a custom <code class=\"lang-php\">validate<\/code> method of the <code class=\"lang-php\">WP_Customize_Setting<\/code> class.<\/li><\/ol>\n\n\n\n<p>This post describes the second way \u2013 you can find examples and more information about the topic in the post \u00bb<a href=\"https:\/\/make.wordpress.org\/core\/2016\/07\/05\/customizer-apis-in-4-6-for-setting-validation-and-notifications\/\">Customizer APIs in 4.6 for Setting Validation and Notifications<\/a>\u00ab by Weston Ruter.<\/p>\n\n\n\n<p>That is, for example, the sanitize function for checking the value of a select field that contains all categories of the WordPress site:<\/p>\n\n\n<pre class=\"wp-block-code lang-php\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-comment\">\/**\n * Select sanitization callback for categories select control.\n *\n * <span class=\"hljs-doctag\">@param<\/span> string $input Value of select field.\n *\n * <span class=\"hljs-doctag\">@return<\/span> string\n *\/<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">hannover_sanitize_categories_select<\/span><span class=\"hljs-params\">( $input )<\/span> <\/span>{\n\t$can_validate = method_exists( <span class=\"hljs-string\">'WP_Customize_Setting'<\/span>, <span class=\"hljs-string\">'validate'<\/span> );\n\n\t$term = get_term( $input );\n\n\t<span class=\"hljs-keyword\">if<\/span> ( <span class=\"hljs-string\">'category'<\/span> !== $term-&gt;taxonomy ||  is_wp_error( $term ) || <span class=\"hljs-keyword\">null<\/span> === $term ) {\n\t\t<span class=\"hljs-keyword\">return<\/span> $can_validate ? <span class=\"hljs-keyword\">new<\/span> WP_Error( <span class=\"hljs-string\">'nan'<\/span>, __( <span class=\"hljs-string\">'The ID does not match a category.'<\/span>, <span class=\"hljs-string\">'hannover'<\/span> ) ) : <span class=\"hljs-keyword\">null<\/span>;\n\t}\n\n\t<span class=\"hljs-keyword\">return<\/span> $input;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>To display a specific error message, we can return a <code class=\"lang-php\">WP_Error<\/code> object to which we pass an error code as the first parameter and the error message as the second. However, this behavior does not work until WordPress 4.6, so we first check whether the <code class=\"lang-php\">validate<\/code> method of the <code class=\"lang-php\">WP_Customize_Setting<\/code> class exists.<\/p>\n\n\n\n<p>Afterwards, we check if the input is a category and in case of an error we return either a specific error message (in WordPress 4.6 and later) or <code class=\"lang-php\">null<\/code> if we are dealing with an older version. In this case, the user would receive a general error message that the value is invalid. If everything is okay, we return the input value.<\/p>\n\n\n\n<p>Displaying of the error message looks like that (takes a while after changing the value, while the preview refreshes):<\/p>\n\n\n\n<figure class=\"wp-block-image\"><noscript><img decoding=\"async\" width=\"345\" height=\"491\" src=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2018\/02\/setting-validation.gif\" alt=\"A GIF that shows the customize sidebar with a select list of categories. The value of a select item is changed to something invalid via the dev tools and selected after that. Then an error message is displayed.\" class=\"wp-image-4506\"><\/noscript><img decoding=\"async\" width=\"345\" height=\"491\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20345%20491%22%3E%3C%2Fsvg%3E\" alt=\"A GIF that shows the customize sidebar with a select list of categories. The value of a select item is changed to something invalid via the dev tools and selected after that. Then an error message is displayed.\" class=\"wp-image-4506 lazyload\" data-src=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2018\/02\/setting-validation.gif\"><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Since WordPress 4.6 it is relatively simple to add validation to customize settings, to give helpful error messages to the user. Here I show you how that works.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[115],"tags":[],"class_list":["post-4505","post","type-post","status-publish","format-standard","hentry","category-wordpress-snippets"],"wp-worthy-pixel":{"ignored":false,"public":"07193bc5b62a432e8257d0bd41f24885","server":"vg04.met.vgwort.de","url":"https:\/\/vg04.met.vgwort.de\/na\/07193bc5b62a432e8257d0bd41f24885"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=4505"}],"version-history":[{"count":5,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4505\/revisions"}],"predecessor-version":[{"id":5976,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4505\/revisions\/5976"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=4505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=4505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=4505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}