Theme customizer API get functions

Question

This is one of the typographical options in my theme customizer, the code which renders above looks like this →

Kirki::add_field( 'my_config', array(
'type'        => 'typography',
'settings'    => 'h1_typography',
'label'       => esc_attr__( 'H1 Typography', 'textdomain' ),
'section'     => 'typography',
'default'     => array(
    'font-family'    => 'Roboto',
    'variant'        => 'regular',
    'font-size'      => '14px',
    'line-height'    => '1.5',
    'letter-spacing' => '0',
    'subsets'        => array( 'latin-ext' ),
    'color'          => '#333333',
    'text-transform' => 'none',
    'text-align'     => 'left'
),
'priority'    => 15,
'output'      => array(
    array(
        'element' => 'body',
    ),
),

) );

I am trying to pull the output like this:

    function mytheme_customize_css()
{
    ?>
         <style type="text/css">
             h1 { color: <?php get_option( 'h1_typography' ); ?>; }
         </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customize_css');

I tried both get_option and get_theme_mod, but the output is not rendering whats the fix?

Answer 1

I got the solution for this →

     function mytheme_customize_css()
{
    ?>
         <style type="text/css">
             h1 { color: <?php get_option( 'h1_typography' ); ?>; }
         </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customize_css');

This above might not actually be needed.

just put the css element that you want to be effected In the output array:

'output'      => array(
array(
    'element' => 'h1, h2, .header-menu a, .widget h1',
),

I hope this will be helpful to some one in the future.