Wordpress Customizer not setting default value upon initial install?

Question

I'm having some issues getting the default values set in the WordPress Customizer to save to the database upon initial install without first having the user save the Customizer to set them. I've tried the solution from this thread with no luck:

Use default value of wp_customizer in theme_mod output?

Customizer section/setting/control

//Social Icons Section
$wp_customize->add_section( 'socialsection', array(
         'title'      => __( 'Social Media' ),
         'priority'   => 4,
         'capability' => 'edit_theme_options',
) );


//Settings & Controls For Social Media

$wp_customize->add_setting( 'facebooklink_edit', array(
        'default'           => '#',
        'sanitize_callback' => 'esc_attr',
        'transport'         => 'refresh',
) );

$wp_customize->add_control('facebooklink_edit', array(
         'label'    => __( 'Facebook Link', 'spiffing' ),
         'section'  => 'socialsection',
) );

Output on Frontend:

<a href="<?php echo get_theme_mod('facebooklink_edit', '#'); ?>"><div class="fb-footer" id="fb-footer-bg"><i class="fa fa-facebook-f"></i></div></a>

CSS manipulation based on user action in customzier:

 ?>
  <style type="text/css">
  <?php if( get_theme_mod( 'facebooklink_edit' )  ==  '' ) { ?>
    #fb-footer-bg { display: none; }
    <?php } // end if ?>
    </style>
    <?php

From the above, you can see that this mod just by default sets the value to a '#', and if it then detects that there is no '#' is adds the 'display:none' to that id. Should be simple enough. However, it appears as if the if statement sees that it's condition is met which is this case is blank '' and applies the 'display:none'. but as you can see in both default sections on the frontend and customzier I have set the default to be a '#'. It even writes it into the placeholder section in the customzier, just not the database.

It works if the user AFTER initial install goes into the customizer and clicks 'save'. Maybe initiating a value into the database which is then read and displayed on the frontend.

I've got this to work with links etc, but this mod is different in the sense that it manipulates a div by adding a 'display: none'.

Any ideas appreciated.

Answer 1

I've managed to fix this by changing the operator on the 'if' statement:

Original:

?>
<style type="text/css">
 <?php if( get_theme_mod( 'facebooklink_edit' )  ==  '' ) { ?>
   #fb-footer-bg { display: none; }
 <?php } // end if ?>
</style>
<?php

Updated:

?>
<style type="text/css">
<?php if( get_theme_mod( 'facebooklink_edit' )  ===
    #fb-footer-bg { display: none; }
<?php } // end if ?>
</style>
<?php

Changing 'is equal to' to 'is identical' seems to fix this.

Answer 2

I think you should be using something like set_theme_mod. This will save the value to the database.

set_theme_mod('facebooklink_edit','aaabbbccc');

To keep the theme setting only for your theme use 'type' => 'theme_mod'.

$wp_customize->add_setting( 'facebooklink_edit' , array(
    'type' => 'theme_mod', // only for this theme    
    'transport'   => 'refresh', 
    'default' => 'aaabbbccc'
    //'sanitize_callback' => 'someething...',
) );

The save() method exists inside class-wp-customize-manager() but it looks like not meant for using with JavaScript only.

You theme settings, in general, can be either 'theme_mod' or 'option'.

My proposal for you was to use theme_mod in this case.

Answer 3

if(!get_theme_mod('facebooklink_edit')) { set_theme_mod('facebooklink_edit','aaabbbccc'); }

I would use this to set value only if it does not exist.

instead of just.

set_theme_mod('facebooklink_edit','aaabbbccc');