WordPress customizer sanitization code

WordPress customizer sanitization code

As you’ll already apprehend, with WordPress Customizer API theme developers square measure able to produce settings for his or her themes which permit website homeowners to fine tune things like combination, background image and alternative custom choices and see a preview of those changes in real time.

Since we should always ne’er trust user input, the Customizer API needs to outline a recall perform for every setting to validate and sanitize input. sadly I typically run into the matter that do not|i do not} apprehend or don’t keep in mind the right WordPress cleanup perform for a specific setting. that is why I created this tutorial.

The following code examples below can demonstrate a way to outline cleanup recall functions for varied information varieties. For order’s sake, the codes additionally embrace the tactic to feature an area and a setting in Theme Customizer.

 

How to sanitize radio box

function theme_slug_customizer( $wp_customize ) {           
 
    //your section
        $wp_customize->add_section( 
            'theme_slug_customizer_your_section', 
            array(
                'title' => esc_html__( 'Your Section', 'theme_slug' ),
                'priority' => 150
            )
        );      
         
     
    //radio box sanitization function
        function theme_slug_sanitize_radio( $input, $setting ){
         
            //input must be a slug: lowercase alphanumeric characters, dashes and underscores are allowed only
            $input = sanitize_key($input);
 
            //get the list of possible radio box options 
            $choices = $setting->manager->get_control( $setting->id )->choices;
                             
            //return input if valid or return default option
            return ( array_key_exists( $input, $choices ) ? $input : $setting->default );                
             
        }
     
     
    //add setting to your section
        $wp_customize->add_setting( 
            'theme_slug_customizer_radio', 
            array(
                'sanitize_callback' => 'theme_slug_sanitize_radio'
            )
        );
         
        $wp_customize->add_control( 
            'theme_slug_customizer_radio', 
            array(
                'label' => esc_html__( 'Your Setting with Radio Box', 'theme_slug' ),
                'section' => 'theme_slug_customizer_your_section',
                'type' => 'radio',
                'choices' => array(
                    'one' => esc_html__('Choice One','theme_slug'),
                    'two' => esc_html__('Choice Two','theme_slug'),
                    'three' => esc_html__('Choice Three','theme_slug')               
                )
            )
        );      
     
}
add_action( 'customize_register', 'theme_slug_customizer' );

 

How to sanitize checkbox

function theme_slug_customizer( $wp_customize ) {           
 
    //your section
        $wp_customize->add_section( 
            'theme_slug_customizer_your_section', 
            array(
                'title' => esc_html__( 'Your Section', 'theme_slug' ),
                'priority' => 150
            )
        );      
         
     
    //checkbox sanitization function
        function theme_slug_sanitize_checkbox( $input ){
             
            //returns true if checkbox is checked
            return ( isset( $input ) ? true : false );
        }
     
     
    //add setting to your section
        $wp_customize->add_setting( 
            'theme_slug_customizer_checkbox', 
            array(
                'default' => '',
                'sanitize_callback' => 'theme_slug_sanitize_checkbox'
            )
        );
         
        $wp_customize->add_control( 
            'theme_slug_customizer_checkbox', 
            array(
                'label' => esc_html__( 'Your Setting with Checkbox', 'theme_slug' ),
                'section' => 'theme_slug_customizer_your_section',
                'type' => 'checkbox'
            )
        );      
     
}
add_action( 'customize_register', 'theme_slug_customizer' );

 

How to sanitize select options

function theme_slug_customizer( $wp_customize ) {           
 
    //your section
        $wp_customize->add_section( 
            'theme_slug_customizer_your_section', 
            array(
                'title' => esc_html__( 'Your Section', 'theme_slug' ),
                'priority' => 150
            )
        );      
         
     
    //select sanitization function
        function theme_slug_sanitize_select( $input, $setting ){
         
            //input must be a slug: lowercase alphanumeric characters, dashes and underscores are allowed only
            $input = sanitize_key($input);
 
            //get the list of possible select options 
            $choices = $setting->manager->get_control( $setting->id )->choices;
                             
            //return input if valid or return default option
            return ( array_key_exists( $input, $choices ) ? $input : $setting->default );                
             
        }
     
     
    //add setting to your section
        $wp_customize->add_setting( 
            'theme_slug_customizer_select', 
            array(
                'sanitize_callback' => 'theme_slug_sanitize_select'
            )
        );
         
        $wp_customize->add_control( 
            'theme_slug_customizer_select', 
            array(
                'label' => esc_html__( 'Your Setting with select', 'theme_slug' ),
                'section' => 'theme_slug_customizer_your_section',
                'type' => 'select',
                'choices' => array(
                    '' => esc_html__('Please select','theme_slug'),
                    'one' => esc_html__('Choice One','theme_slug'),
                    'two' => esc_html__('Choice Two','theme_slug'),
                    'three' => esc_html__('Choice Three','theme_slug')               
                )
            )
        );      
     
}
add_action( 'customize_register', 'theme_slug_customizer' );

 

How to sanitize text input and how to sanitize textarea

If we want to allow simple text only, it’s enough to call wp_filter_nohtml_kses() native function for sanitize_callback directly.

function theme_slug_customizer( $wp_customize ) {           
 
    //your section
        $wp_customize->add_section( 
            'theme_slug_customizer_your_section', 
            array(
                'title' => esc_html__( 'Your Section', 'theme_slug' ),
                'priority' => 150
            )
        );      
         
                 
    //add setting to your section
        $wp_customize->add_setting( 
            'theme_slug_customizer_text', 
            array(
                'sanitize_callback' => 'wp_filter_nohtml_kses' //removes all HTML from content
            )
        );
         
        $wp_customize->add_control( 
            'theme_slug_customizer_text', 
            array(
                'label' => esc_html__( 'Your Setting with text input', 'theme_slug' ),
                'section' => 'theme_slug_customizer_your_section',
                'type' => 'text'
            )
        );      
     
}
add_action( 'customize_register', 'theme_slug_customizer' );

 

How to sanitize email address

function theme_slug_customizer( $wp_customize ) {           
 
    //your section
        $wp_customize->add_section( 
            'theme_slug_customizer_your_section', 
            array(
                'title' => esc_html__( 'Your Section', 'theme_slug' ),
                'priority' => 150
            )
        );      
         
                 
    //add setting to your section
        $wp_customize->add_setting( 
            'theme_slug_customizer_email', 
            array(
                'sanitize_callback' => 'sanitize_email' //removes all invalid characters
            )
        );
         
        $wp_customize->add_control( 
            'theme_slug_customizer_email', 
            array(
                'label' => esc_html__( 'Your Setting with email input', 'theme_slug' ),
                'section' => 'theme_slug_customizer_your_section',
                'type' => 'email'
            )
        );      
     
}
add_action( 'customize_register', 'theme_slug_customizer' );

 

How to sanitize URL

function theme_slug_customizer( $wp_customize ) {           
 
    //your section
        $wp_customize->add_section( 
            'theme_slug_customizer_your_section', 
            array(
                'title' => esc_html__( 'Your Section', 'theme_slug' ),
                'priority' => 150
            )
        );      
         
                 
    //add setting to your section
        $wp_customize->add_setting( 
            'theme_slug_customizer_url', 
            array(
                'sanitize_callback' => 'esc_url_raw' //cleans URL from all invalid characters
            )
        );
         
        $wp_customize->add_control( 
            'theme_slug_customizer_url', 
            array(
                'label' => esc_html__( 'Your Setting with URL input', 'theme_slug' ),
                'section' => 'theme_slug_customizer_your_section',
                'type' => 'url'
            )
        );      
     
}
add_action( 'customize_register', 'theme_slug_customizer' );

 

How to sanitize number

function theme_slug_customizer( $wp_customize ) {           
 
    //your section
        $wp_customize->add_section( 
            'theme_slug_customizer_your_section', 
            array(
                'title' => esc_html__( 'Your Section', 'theme_slug' ),
                'priority' => 150
            )
        );      
         
                 
    //add setting to your section
        $wp_customize->add_setting( 
            'theme_slug_customizer_number', 
            array(
                'sanitize_callback' => 'absint' //converts value to a non-negative integer
            )
        );
         
        $wp_customize->add_control( 
            'theme_slug_customizer_number', 
            array(
                'label' => esc_html__( 'Your Setting with number input', 'theme_slug' ),
                'section' => 'theme_slug_customizer_your_section',
                'type' => 'number'
            )
        );      
     
}
add_action( 'customize_register', 'theme_slug_customizer' );

 

How to sanitize drop-down pages

function theme_slug_customizer( $wp_customize ) {           
 
    //your section
        $wp_customize->add_section( 
            'theme_slug_customizer_your_section', 
            array(
                'title' => esc_html__( 'Your Section', 'theme_slug' ),
                'priority' => 150
            )
        );      
         
                 
    //add setting to your section
        $wp_customize->add_setting( 
            'theme_slug_customizer_dropdown_pages', 
            array(
                'sanitize_callback' => 'absint' //input value is a page ID so it must be a positive integer
            )
        );
         
        $wp_customize->add_control( 
            'theme_slug_customizer_dropdown_pages', 
            array(
                'label' => esc_html__( 'Your Setting with dropdown_pages input', 'theme_slug' ),
                'section' => 'theme_slug_customizer_your_section',
                'type' => 'dropdown-pages'
            )
        );      
     
}
add_action( 'customize_register', 'theme_slug_customizer' );

 

How to sanitize file input

function theme_slug_customizer( $wp_customize ) {           
 
    //your section
        $wp_customize->add_section( 
            'theme_slug_customizer_your_section', 
            array(
                'title' => esc_html__( 'Your Section', 'theme_slug' ),
                'priority' => 150
            )
        );      
         
         
         
    //file input sanitization function
        function theme_slug_sanitize_file( $file, $setting ) {
         
            //allowed file types
            $mimes = array(
                'jpg|jpeg|jpe' => 'image/jpeg',
                'gif'          => 'image/gif',
                'png'          => 'image/png'
            );
             
            //check file type from file name
            $file_ext = wp_check_filetype( $file, $mimes );
             
            //if file has a valid mime type return it, otherwise return default
            return ( $file_ext['ext'] ? $file : $setting->default );
        }
 
         
                 
    //add select setting to your section
        $wp_customize->add_setting( 
            'theme_slug_customizer_file', 
            array(
                'sanitize_callback' => 'theme_slug_sanitize_file'
            )
        );
         
         
        $wp_customize->add_control( 
            new WP_Customize_Upload_Control( 
                $wp_customize, 
                'theme_slug_customizer_file', 
                array(
                    'label'      => __( 'Your Setting with file input', 'theme_slug' ),
                    'section'    => 'theme_slug_customizer_your_section'                    
                )
            ) 
        );              
     
}
add_action( 'customize_register', 'theme_slug_customizer' );

 

How to sanitize CSS

function theme_slug_customizer( $wp_customize ) {           
 
    //your section
        $wp_customize->add_section( 
            'theme_slug_customizer_your_section', 
            array(
                'title' => esc_html__( 'Your Section', 'theme_slug' ),
                'priority' => 150
            )
        );      
          
                  
    //add setting to your section
        $wp_customize->add_setting( 
            'theme_slug_customizer_css', 
            array(
                'sanitize_callback' => 'wp_strip_all_tags' //strip all HTML tags including script and style
            )
        );
          
        $wp_customize->add_control( 
            'theme_slug_customizer_css', 
            array(
                'label' => esc_html__( 'Your Setting with CSS input', 'theme_slug' ),
                'section' => 'theme_slug_customizer_your_section',
                'type' => 'textarea'
            )
        );      
      
}
add_action( 'customize_register', 'theme_slug_customizer' );

 

How to sanitize HTML color code

function theme_slug_customizer( $wp_customize ) {           
 
    //your section
        $wp_customize->add_section( 
            'theme_slug_customizer_your_section', 
            array(
                'title' => esc_html__( 'Your Section', 'theme_slug' ),
                'priority' => 150
            )
        );      
          
                  
    //add setting to your section
        $wp_customize->add_setting( 
            'theme_slug_customizer_color', 
            array(
                'default' => '#000000',
                'sanitize_callback' => 'sanitize_hex_color' //validates 3 or 6 digit HTML hex color code
            )
        );
         
        $wp_customize->add_control( 
            new WP_Customize_Color_Control( 
            $wp_customize, 
            'theme_slug_customizer_color', 
                array(              
                    'label'      => __( 'Your Setting with color input', 'theme_slug' ),
                    'section'    => 'theme_slug_customizer_your_section'        
                )
            ) 
        );         
      
}
add_action( 'customize_register', 'theme_slug_customizer' );

 

How to sanitize HTML code

Use wp_kses_post() function which keeps only HTML tags which are allowed in post content as well.

function theme_slug_customizer( $wp_customize ) {           
 
    //your section
        $wp_customize->add_section( 
            'theme_slug_customizer_your_section', 
            array(
                'title' => esc_html__( 'Your Section', 'theme_slug' ),
                'priority' => 150
            )
        );      
          
                  
    //add setting to your section
        $wp_customize->add_setting( 
            'theme_slug_customizer_html_code', 
            array(
                'sanitize_callback' => 'wp_kses_post' //keeps only HTML tags that are allowed in post content
            )
        );
         
        $wp_customize->add_control( 
            'theme_slug_customizer_html_code', 
            array(
                'label' => esc_html__( 'Your Setting with HTML code', 'theme_slug' ),
                'section' => 'theme_slug_customizer_your_section',
                'type' => 'textarea'
            )
        );         
      
}
add_action( 'customize_register', 'theme_slug_customizer' );

Alternatively you can use wp_kses() function where you can define the allowed HTML tags and attributes like this:

$allowed_html = array(
    'a' => array(
        'href' => array(),
        'title' => array()
    ),
    'br' => array(),
    'em' => array(),
    'strong' => array(),
);
 
wp_kses($input, $allowed_html);

 

How to sanitize Javascript code

We are using base64_encode() function to save the script in database properly and base64_decode() function to escape the script for the textarea in Customizer. Also use base64_decode() function on frontend to echo the script.

function theme_slug_customizer( $wp_customize ) {           
  
    //your section
        $wp_customize->add_section( 
            'theme_slug_customizer_your_section', 
            array(
                'title' => esc_html__( 'Your Section', 'theme_slug' ),
                'priority' => 150
            )
        );      
          
             
    //script input sanitization function
        function theme_slug_sanitize_js_code($input){
            return base64_encode($input);
        }
         
         
    //output escape function    
        function theme_slug_escape_js_output($input){
            return esc_textarea( base64_decode($input) );
        }
         
                  
    //add setting to your section
        $wp_customize->add_setting( 
            'theme_slug_customizer_js_code', 
            array(          
                'sanitize_callback' => 'theme_slug_sanitize_js_code', //encode for DB insert
                'sanitize_js_callback' => 'theme_slug_escape_js_output' //ecape script for the textarea
            )
        );
         
        $wp_customize->add_control( 
            'theme_slug_customizer_js_code', 
            array(
                'label' => esc_html__( 'Your Setting with JS code', 'theme_slug' ),
                'section' => 'theme_slug_customizer_your_section',
                'type' => 'textarea'
            )
        );         
      
}
add_action( 'customize_register', 'theme_slug_customizer' );

 

List of WordPress sanitization functions

In case I forgot something, here is a list of sanitize functions. Maybe one of them is more suitable for your project.

I also give you some PHP functions to fill some gaps

add a comment

Leave a Reply

Your email address will not be published.

*