0

I'm trying to implement multiple text fields as inputs for a custom section in the theme customizer for a theme I'm working on. Now I'm getting the ui on customizer where all social media textfields are displayed with placeholders. However, after typing text on the fields, even though I can push the "Publish" button, when I refresh it, the changes I've done arent saved.

In this problem, I've already added a custom class for multiple textfields:

( class_exists( 'WP_Customize_Control' ) ) :
if ( ! class_exists( 'EasyPeasy_Customize_Control_Textfield_Multiple' ) ) :
    class EasyPeasy_Customize_Control_Textfield_Multiple extends WP_Customize_Control {

        public $type = 'textbox-multiple';

        public function render_content() {
            if ( empty( $this->choices ) ) :
                return;
            endif;

            print_r($this -> settings -> default);

            if ( ! empty( $this->label ) ) : ?>
                <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
            <?php endif;

            if ( !empty( $this->description ) ) : ?>
                <span class="description customize-control-description"><?php echo $this->description; ?></span>
            <?php endif;

            $url_sm_values = ! is_array( $this->value() ) ? explode( ',', $this->value() ) : $this->value();

            ?>
            <ul>
                <?php foreach ( $this->choices as $value => $label ) : ?>
                    <li>
                        <label><?php echo $label; ?></label>
                            <input id="<?php echo $label; ?>_footer_textbox" class="footer_sm" type="text" placeholder="<?php echo esc_attr( $value ) . ' link'; ?>" />
                            <br />
                    </li>
                <?php endforeach; ?>
            </ul>

            <input class="cb_hidden_sm_link" type="hidden" <?php $this->link(); ?> value="<?php echo esc_attr( implode( ',', $url_sm_values ) ); ?>" />
            <?php
        }
    }
    // add_action( 'customize_register', array( 'EasyPeasy_Customize_Control_Checkbox_Multiple', 'easypeasy_customize_controls_register' ));
 endif;
endif;

I've also added the section:

$wp_customize->add_section( 'footer_options', array(
                'title'         => __( 'Footer', 'easypeasy' ),
                'priority'      => 50,
                'capability'    => 'edit_theme_options',
                'description'   => __( 'Settings for footer content in Easy Peasy.', 'easypeasy' ),
            ) );

The settings:

$wp_customize->add_setting( 'enable_social_media', array(
                'capability'        => 'edit_theme_options',
                'default'               => array( '', '', '', '', '', '', '', '', '', '' ),
                'sanitize_callback' => 'easypeasy_sanitize_multiple_textfields',
            ) );

And the controls along with its options:

$footer_social_media_options = apply_filters( 'easypeasy_social_media_options', array(
                'Twitter'       => __( 'Twitter', 'easypeasy' ),
                'LinkedIn'  => __( 'LinkedIn', 'easypeasy' ),
                'Facebook'      => __( 'Facebook', 'easypeasy' ),
                'Instagram'     => __( 'Instagram', 'easypeasy' ),
                'Snapchat'      => __( 'Snapchat', 'easypeasy' ),
                'Reddit'        => __( 'Reddit', 'easypeasy' ),
                'Twitch'            => __( 'Twitch', 'easypeasy' ),
                'Youtube'           => __( 'Youtube', 'easypeasy' ),
                'Discord'           => __( 'Discord', 'easypeasy' ),
                'Skype'         => __( 'Skype', 'easypeasy' ),
            ) );

$wp_customize->add_control( new EasyPeasy_Customize_Control_Textfield_Multiple( $wp_customize, 'enable_social_media', array(
                'section'       => 'footer_options',
                'settings'      => 'enable_social_media',
                'label'         => __( 'Enable Social Media', 'easypeasy' ),
                'description'   => __( 'Check to enable social media links for the footer in easypeasy.', 'easypeasy' ),
                'choices'       => $footer_social_media_options,
            ) ) );

Here is also the customizer-controls.js file which detects changes on the input textfields as the user types them. I would prefer a button to save the changes but for now keystroke changes will do until I sort these out:

// Detect changes on footer social media link text fields
$( '.customize-control-textbox-multiple .footer_sm' ).live('input', function() {

    // var socialMedia_link = $( this ).parents( '.customize-control' ).find( '.footer_sm' );

    var socialMedia_links = $( this ).parents( '.customize-control' ).find( '.footer_sm' );
    var socialMedia_link_values = socialMedia_links.map(function() {
        return this.value;
    });

    console.log(socialMedia_link_values);
    // If there are no values, make that explicit in the variable so we know whether the default output is needed
    if ( ! socialMedia_link_values ) {
        socialMedia_link_values = 'empty';
    }

    // Update the hidden input with the variable
    $( this ).parents( '.customize-control' ).find( '.cb_hidden_sm_link' ).val( socialMedia_link_values ).trigger( 'input' );
});

How do I go about solving this?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.