Support » Plugin: Kirki Customizer Framework » Output CSS is empty

  • Resolved creativemanner

    (@creativemanner)


    I’m trying to use output function to get inline css to custom color background, but isn’t return any value, just the empty tag
    <style id=”kirki-inline-styles”></style>

    In preview on customizer did work the preview changed, but seems the changes isn’t save

    Version used:
    Tested on stabled version and the develop version 3.0.45

    Code to reproduce the issue (config + field(s))

    
    if ( class_exists( 'Kirki' ) ) {
        //setup Kirki config
    Kirki::add_config( 'vemo_config', array(
    	'capability'    => 'edit_theme_options',
    	'option_type'   => 'theme_mod',
    ) );
    
    Kirki::add_panel( 'theme_colors_panel', array(
        'priority'    => 10,
        'title'       => esc_html__( 'Theme Colors', 'kirki' ),
        'description' => esc_html__( 'Select your theme colors', 'kirki' ),
    ) );
    
    Kirki::add_section( 'theme_colors_section', array(
        'title'          => esc_html__( 'Theme Colors', 'kirki' ),
        'description'    => esc_html__( '', 'kirki' ),
        'panel'          => 'theme_colors_panel',
        'priority'       => 160,
    ) );
    
    Kirki::add_field( 'accent_color', array(
    	'type'        => 'color',
    	'settings'    => 'color_setting_hex',
    	'label'       => __( 'Color Control (hex-only)', 'kirki' ),
    	'description' => esc_html__( 'This is a color control', 'kirki' ),
    	'section'     => 'theme_colors_section',
    	'default'     => '#0088CC',
    	'transport'   => 'auto',
    	'output' => array(
    		array(
    			'element'  => 'body',
    			'property' => 'color',
    			
    		),
    		array(
    			'element'  => '.decoration-inside',
    			'property' => 'background-color',
    		),
    	),
    ) );
    
    }
    
    
Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Ari Stathopoulos

    (@aristath)

    This usually happens if you load the fields in a hook like for example customize_register instead of directly.
    Perhaps this is what happens here too? The code you posted above looks fine

    creativemanner

    (@creativemanner)

    Thanks for the reply Ari,

    I have understrap customizer file do you think this is the conflict?

    <?php
    /**
     * understrap Theme Customizer
     *
     * @package understrap
     */
    
    // Exit if accessed directly.
    defined( 'ABSPATH' ) || exit;
    
    /**
     * Add postMessage support for site title and description for the Theme Customizer.
     *
     * @param WP_Customize_Manager $wp_customize Theme Customizer object.
     */
    if ( ! function_exists( 'understrap_customize_register' ) ) {
    	/**
    	 * Register basic customizer support.
    	 *
    	 * @param object $wp_customize Customizer reference.
    	 */
    	function understrap_customize_register( $wp_customize ) {
    		$wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
    		$wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
    		$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
    	}
    }
    add_action( 'customize_register', 'understrap_customize_register' );
    
    if ( ! function_exists( 'understrap_theme_customize_register' ) ) {
    	/**
    	 * Register individual settings through customizer's API.
    	 *
    	 * @param WP_Customize_Manager $wp_customize Customizer reference.
    	 */
    	function understrap_theme_customize_register( $wp_customize ) {
    
    		// Theme layout settings.
    		$wp_customize->add_section(
    			'understrap_theme_layout_options',
    			array(
    				'title'       => __( 'Theme Layout Settings', 'understrap' ),
    				'capability'  => 'edit_theme_options',
    				'description' => __( 'Container width and sidebar defaults', 'understrap' ),
    				'priority'    => 160,
    			)
    		);
    
    		/**
    		 * Select sanitization function
    		 *
    		 * @param string               $input   Slug to sanitize.
    		 * @param WP_Customize_Setting $setting Setting instance.
    		 * @return string Sanitized slug if it is a valid choice; otherwise, the setting default.
    		 */
    		function understrap_theme_slug_sanitize_select( $input, $setting ) {
    
    			// Ensure input is 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;
    
    				// If the input is a valid key, return it; otherwise, return the default.
    				return ( array_key_exists( $input, $choices ) ? $input : $setting->default );
    
    		}
    
    		$wp_customize->add_setting(
    			'understrap_container_type',
    			array(
    				'default'           => 'container',
    				'type'              => 'theme_mod',
    				'sanitize_callback' => 'understrap_theme_slug_sanitize_select',
    				'capability'        => 'edit_theme_options',
    			)
    		);
    
    		$wp_customize->add_control(
    			new WP_Customize_Control(
    				$wp_customize,
    				'understrap_container_type',
    				array(
    					'label'       => __( 'Container Width', 'understrap' ),
    					'description' => __( 'Choose between Bootstrap\'s container and container-fluid', 'understrap' ),
    					'section'     => 'understrap_theme_layout_options',
    					'settings'    => 'understrap_container_type',
    					'type'        => 'select',
    					'choices'     => array(
    						'container'       => __( 'Fixed width container', 'understrap' ),
    						'container-fluid' => __( 'Full width container', 'understrap' ),
    					),
    					'priority'    => '10',
    				)
    			)
    		);
    
    		$wp_customize->add_setting(
    			'understrap_sidebar_position',
    			array(
    				'default'           => 'right',
    				'type'              => 'theme_mod',
    				'sanitize_callback' => 'sanitize_text_field',
    				'capability'        => 'edit_theme_options',
    			)
    		);
    
    		$wp_customize->add_control(
    			new WP_Customize_Control(
    				$wp_customize,
    				'understrap_sidebar_position',
    				array(
    					'label'             => __( 'Sidebar Positioning', 'understrap' ),
    					'description'       => __(
    						'Set sidebar\'s default position. Can either be: right, left, both or none. Note: this can be overridden on individual pages.',
    						'understrap'
    					),
    					'section'           => 'understrap_theme_layout_options',
    					'settings'          => 'understrap_sidebar_position',
    					'type'              => 'select',
    					'sanitize_callback' => 'understrap_theme_slug_sanitize_select',
    					'choices'           => array(
    						'right' => __( 'Right sidebar', 'understrap' ),
    						'left'  => __( 'Left sidebar', 'understrap' ),
    						'both'  => __( 'Left & Right sidebars', 'understrap' ),
    						'none'  => __( 'No sidebar', 'understrap' ),
    					),
    					'priority'          => '20',
    				)
    			)
    		);
    	}
    } // endif function_exists( 'understrap_theme_customize_register' ).
    add_action( 'customize_register', 'understrap_theme_customize_register' );
    
    /**
     * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
     */
    if ( ! function_exists( 'understrap_customize_preview_js' ) ) {
    	/**
    	 * Setup JS integration for live previewing.
    	 */
    	function understrap_customize_preview_js() {
    		wp_enqueue_script(
    			'understrap_customizer',
    			get_template_directory_uri() . '/js/customizer.js',
    			array( 'customize-preview' ),
    			'20130508',
    			true
    		);
    	}
    }
    add_action( 'customize_preview_init', 'understrap_customize_preview_js' );
    
    creativemanner

    (@creativemanner)

    Disabled it the file above but nothing changed. Styles are not there. 🙁

    Got it working my bad 🙂

    Plugin Author Ari Stathopoulos

    (@aristath)

    Great. What was the issue? Just so that I keep it in mind if someone comes along with a similar problem 🙂

    config_id on fields 🙂

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.