get_theme_mod only returns false

Question

I have created a custom section with a setting with one control allowing users to choose fonts from a dropdown. However, when I use the get_theme_mod() function, and echo the results to a styles tag in the header, I get nothing.

The debugger tells me that get_theme_mod() is returning 'false', when I expect it to return the value of the selected item. Using get_option() gives me the key of the option, "value3" and not the value.

I would prefer to use get_theme_mod() since that is what the function is for, but if I can't how do I get it to output 'American Typewriter' instead of "value3"?

functions.php

function lettra_customized_css()
{
 ?>
  <style type='text/css'>
    .site-title {
      <?php 
      $foo = get_option('title_font'); // "value3"
      $bar = get_theme_mod('title_font');// false
      ?>font-family: <?php echo get_theme_mod('title_font') ?>;
    }
  </style>
<?php
}
add_action('wp_head', 'lettra_customized_css');

cutomizer.php

function lettra_customize_register($wp_customize)
{
  $wp_customize->add_section(
    'font_options',
    array(
      'title'       => __('Font Options', 'lettra'), //Visible title of section
      'priority'    => 20, //Determines what order this appears in
      'capability'  => 'edit_theme_options', //Capability needed to tweak
      'description' => __('Choose font pairings for your theme here.', 'lettra'), //Descriptive tooltip
)
  );

  $wp_customize->add_setting('title_font', array(
    'default'        => 'Roboto Slab',
    'capability'     => 'edit_theme_options',
    'type'           => 'option',
    'transport'  => 'postMessage'
  ));

  $wp_customize->add_control('title_font_control', array(
    'label'      => __('Title Font', 'lettra'),
    'section'    => 'font_options',
    'settings'   => 'title_font',
    'type'       => 'select',
    'choices'    => array(
      'value1' => 'Roboto Slab',
      'value2' => 'Times New Roman',
      'value3' => 'American Typewriter',
    ),
  ));
}
add_action('customize_register', 'lettra_customize_register');

Answer 1

The debugger tells me that get_theme_mod() is returning 'false', when I expect it to return the value of the selected item.

get_theme_mod() isn't working because when you registered the setting, you set the type to option:

$wp_customize->add_setting('title_font', array(
  'default'        => 'Roboto Slab',
  'capability'     => 'edit_theme_options',
  'type'           => 'option',
  'transport'  => 'postMessage'
));

The possible values for type when adding a setting are 'option', or the default, 'theme_mod'.

option stores the value independently of the current theme, and is retrieved with get_option(), while theme_mod stores the value only for the current theme, and is retrieved with get_theme_mod().

Using get_option() gives me the key of the option, "value3" and not the value.

The 'key' is the value. It's what's output into the value="" attribute of the <option> tag.

If you want to use the label, there's two potential solutions.

First, you could just pass the labels only, then these will also be used as the values:

array(
  'Roboto Slab',
  'Times New Roman',
  'American Typewriter',
),

Or you could store a reference to the labels independently of both places:

function wpse_341193_get_font_options() {
    return array(
      'value1' => 'Roboto Slab',
      'value2' => 'Times New Roman',
      'value3' => 'American Typewriter',
    );
}

Which you can then use as the choices:

'choices' => wpse_341193_get_font_options(),

And the output:

<?php
$font_options = wpse_341193_get_font_options();
$font_family  = get_theme_mod('title_font');// false
?>font-family: <?php echo $font_options[$font_family] ?>;

Answer 2

Problem 1: get_option instead of get_theme_mod.

How you store and retrieve value depends on the type you pass to your add_setting function. See https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting. If you want to use get_theme_mod, type should be theme_mod, which is default.

Problem 2: getting value instead of label.

When you are passing choices to add_control function, this is an array with combination of value => label. Hence the value part will be used to store in DB, and to retrieve later on. To use Label to store in DB, you can pass normal array, or use label as value.

'choices'    => array(
  'Roboto Slab' => 'Roboto Slab',
  'Times New Roman' => 'Times New Roman',
  'American Typewriter' => 'American Typewriter',
),

OR

'choices'    => array(
  'Roboto Slab',
  'Times New Roman',
  'American Typewriter',
),

Hope this helps.