The Customizer lets site owners change theme options with a live preview. Add a section, a setting and a control with the customize_register hook, then read the saved value with get_theme_mod(). This works with classic themes.

Step 1: register a section, a color and a text field

function lotgrafix_customize_register( $wp_customize ) {
    $wp_customize->add_section( 'lotgrafix_options', array(
        'title'    => __( 'Lotgrafix Options', 'lotgrafix' ),
        'priority' => 30,
    ) );

    $wp_customize->add_setting( 'lotgrafix_color', array(
        'default'           => '#ff4500',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'lotgrafix_color', array(
        'label'   => __( 'Accent Color', 'lotgrafix' ),
        'section' => 'lotgrafix_options',
    ) ) );

    $wp_customize->add_setting( 'lotgrafix_footer_text', array(
        'default'           => '',
        'sanitize_callback' => 'sanitize_text_field',
    ) );

    $wp_customize->add_control( 'lotgrafix_footer_text', array(
        'label'   => __( 'Footer Text', 'lotgrafix' ),
        'section' => 'lotgrafix_options',
        'type'    => 'text',
    ) );
}
add_action( 'customize_register', 'lotgrafix_customize_register' );

Step 2: use the value in your theme

$lotgrafix_footer = get_theme_mod( 'lotgrafix_footer_text', '' );

if ( $lotgrafix_footer ) {
    echo '<p class="lotgrafix-footer-text">' . esc_html( $lotgrafix_footer ) . '</p>';
}

Step 3: print the color as a CSS variable

function lotgrafix_customizer_css() {
    $color = get_theme_mod( 'lotgrafix_color', '#ff4500' );
    echo '<style>:root{--lotgrafix-color:' . esc_attr( $color ) . ';}</style>';
}
add_action( 'wp_head', 'lotgrafix_customizer_css' );

Other control types

• text, textarea, checkbox, radio, select and url: set with the type argument.
• WP_Customize_Image_Control: an image uploader.
• WP_Customize_Media_Control: any media file.

Notes

• Always set a sanitize_callback.
• Block themes use the Site Editor and theme.json instead of the Customizer.