I am super new to working with the customizer built into WordPress. I have been reading articles all day and picking up things. I see with the customizer that we can create various types when it comes to creating add_control components. For example, I see the following makes a date input field...
$wp_customize->add_control( 'custom_theme_css', array(
'type' => 'date',
'priority' => 10, // Within the section.
'section' => 'colors', // Required, core or custom.
'label' => __( 'Date' ),
'description' => __( 'This is a date control with a red border.' ),
'input_attrs' => array(
'class' => 'my-custom-class-for-js',
'style' => 'border: 1px solid #900',
'placeholder' => __( 'mm/dd/yyyy' ),
),
'active_callback' => 'is_front_page',
'section' => 'custom_css',
));
I also see the following makes a textarea component...
$wp_customize->add_control( 'custom_theme_css', array(
'label' => __( 'Custom Theme CSS' ),
'type' => 'textarea',
'section' => 'custom_css',
));
...but how do we make one relating to a css opacity value? I want to do something like this within the color section of the customizer, that allows the background of the page to have an opacity adjustment.
$wp_customize->add_control( 'custom_theme_css', array(
'label' => __( 'Change Opacity' ),
'type' => 'css',
'opacity' => ''//some variable that gets user input for opacity value
'section' => 'color',
));
What must I do to learn how to build this correctly?
Update
Below is a final result of my demo in adjusting a background opacity:
add_action( 'customize_register' , 'lesson01b_options' );
function lesson01b_options( $wp_customize ) {
$wp_customize->add_section( 'lesson01b_msection', array(
'title' => __( 'Opacity Adjustments' ),
'description' => __( 'Adjust the opacity this way background images show through' ),
'panel' => '',
'priority' => 39, //160 by default
'capability' => 'edit_theme_options',
'theme_supports' => '',
));
$wp_customize->add_setting( 'lesson01b_msetting', array(
'type' => 'theme_mod', // or 'option'
'capability' => 'edit_theme_options',
'theme_supports' => '',
'default' => '',
'transport' => 'refresh', // or postMessage
'sanitize_callback' => '',
'sanitize_js_callback' => '',
));
$wp_customize->add_control( 'lesson01b_mcontrol', array(
'label' => __( 'Opacity Control', 'lesson1b' ),
'type' => 'text',
'section' => 'lesson01b_msection',
'settings' => 'lesson01b_msetting',
));
}
add_action( 'wp_head' , 'lesson01b_get_setting' );
function lesson01b_get_setting() {
?>
<style type='text/css'>
#page {
opacity:<?php echo get_theme_mod('lesson01b_msetting') ?> ;
}
</style>
<?php
}