2

I'm trying to create a custom typography control, I'm having problem saving the value of the color, please take a look at my code:

<?php
class Customizer_Typo_Control_Typography extends WP_Customize_Control {

/**
 * The type of customize control being rendered.
 */
public $type = 'typography';

/**
 * Array
 */
public $l10n = array();

/**
 * Set up our control.
 */
public function __construct( $manager, $id, $args = array() ) {

    // Let the parent class do its thing.
    parent::__construct( $manager, $id, $args );

    // Make sure we have labels.
    $this->l10n = wp_parse_args(
        $this->l10n,
        array(
            'color'       => esc_html__( 'Font Color',   'ctypo' ),
        )
    );
}

/**
 * Add custom parameters to pass to the JS via JSON.
 */
public function to_json() {
    parent::to_json();

    // Loop through each of the settings and set up the data for it.
    foreach ( $this->settings as $setting_key => $setting_id ) {

        $this->json[ $setting_key ] = array(
            'link'  => $this->get_link( $setting_key ),
            'value' => $this->value( $setting_key ),
            'label' => isset( $this->l10n[ $setting_key ] ) ? $this->l10n[ $setting_key ] : ''
        );

    }
}

/**
 * Underscore JS template to handle the control's output.
 */
public function content_template() { ?>

    <# if ( data.label ) { #>
        <span class="customize-control-title">{{ data.label }}</span>
    <# } #>

    <# if ( data.description ) { #>
        <span class="description customize-control-description">{{{ data.description }}}</span>
    <# } #>

    <ul>

    <# if ( data.color ) { #>

        <li class="typography-font-color">

            <# if ( data.color.label ) { #>
                <span class="customize-control-title">{{ data.color.label }}</span>
            <# } #>

        <input type="text" data-default-color="{{ data.color.default }}" value="{{ data.color.value }}" class="color-picker" {{{ data.color.link }}} />
        </li>
    <# } #>


    </ul>
<?php } }

And here is how i print the option:

  $wp_customize->add_setting( 'p_font_color',   
  array( 'default' => '#666111',     
    'sanitize_callback' => 'sanitize_hex_color',              
    'transport' => 'postMessage' ) 
  );

 $wp_customize->add_control(
new Customizer_Typo_Control_Typography(
    $wp_customize,
    'p_typography',
    array(
        'label'       => esc_html__( 'Paragraph Typography', 'ctypo' ),
        'description' => __( 'Select how you want your paragraphs to appear.', 'ctypo' ),
        'section'     => 'p_typography',

        'settings'    => array(
            'color'       => 'p_font_color',
        ),

        'l10n'        => array(),
    )
)

);

0

You are using content_template which is used for rendering Underscore JS template which means you will also have to create your own corresponding control in javascript using api.Control.extend({ and do the handling yourself.

however by looking at your code, that does not seem to be the case, I think if you want to change the html content you would need to override render_content like this

protected function render_content() {
    ?>
    <label>
        <?php 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; ?>
        <input type="text" <?php $this->input_attrs(); ?> value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link('color'); ?> />
    </label>
    <?php
}

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.