How to Enable Social Icons in the WordPress Theme Customizer

I figure I might as well write about this before I deprecate it in my upcoming Theme. Social Nav Menus are much better.

A week or two ago as I was getting deep into developing a new WordPress Theme, I stumbled upon some pretty good looking code that would allow me to add Social Media Icons to the Theme Customizer like so:

At the time, it was a superb idea. I was just learning about all the possibilities the Theme Customizer affords developers and it was fun to implement the code and watch it work so smoothly.

However, after watching Morten Rand-Hendriksen’s Building Themes from Scratch Using Underscores and reading Justin Tadlock’s post on building Social Nav menus, I think I will scratch this bit of code in favor of Tadlock’s solution.

It just makes sense to not want to have to re-enter your Social Media links in every new Theme you install. Why not just leave all the Social links you want in a nav menu and use your Theme to style and output it specifically as a Social menu?

TwentyFifteen also does just that. (See #3 in this post.)

Nevertheless, I felt that the code itself was worth my time to invest in learning, so I’m reproducing it here for reference. This code is modified slightly from the example I found – I’ve included email as an option. It should be pretty easy to see how it’s done:

add_section(), add_setting(), add_control()

 /**
 * Social site icons for Quick Menu bar
 * 
 * @link: https://www.competethemes.com/social-icons-wordpress-menu-theme-customizer/
 */
 $wp_customize->add_section( 'social_settings', array(
     'title' => __( 'Social Media Icons', 'theme_slug' ),
     'priority' => 100,
 ));
 
 $social_sites = theme_slug_get_social_sites();
 $priority = 5;
 
 foreach( $social_sites as $social_site ) {
 
     $wp_customize->add_setting( "$social_site", array(
         'type' => 'theme_mod',
         'capability' => 'edit_theme_options',
         'sanitize_callback' => 'esc_url_raw',
     ));
 
     $wp_customize->add_control( $social_site, array(
         'label' => ucwords( __( "$social_site URL:", 'social_icon' ) ),
         'section' => 'social_settings',
         'type' => 'text',
         'priority' => $priority,
     ));
 
     $priority += 5;
 }

function theme_slug_get_social_sites()

/**
 * Social Media icon helper functions
 * 
 * @return array
 * 
 * @link: https://www.competethemes.com/social-icons-wordpress-menu-theme-customizer/
 */
function theme_slug_get_social_sites() {
 
     // Store social site names in array
     $social_sites = array(
         'twitter', 
         'facebook', 
         'google-plus',
         'flickr',
         'pinterest', 
         'youtube',
         'vimeo',
         'tumblr',
         'dribbble',
         'rss',
         'linkedin',
         'instagram',
         'email'
     );
 return $social_sites;
}

function theme_slug_show_social_icons()

// Get user input from the Customizer and output the linked social media icons
function theme_slug_show_social_icons() {
 
     $social_sites = theme_slug_get_social_sites();
 
     // Any inputs that aren't empty are stored in $active_sites array
     foreach( $social_sites as $social_site ) {
         if ( strlen( get_theme_mod( $social_site ) ) > 0 ) {
             $active_sites[] = $social_site;
         }
     }
 
     // For each active social site, add it as a list item
     if ( !empty( $active_sites ) ) {
         echo "<ul class='social-media-icons'>";
 
         foreach ( $active_sites as $active_site ) { ?>

             <li>
             <a href="<?php echo get_theme_mod( $active_site ); ?>">
             <?php if( $active_site == 'vimeo' ) { ?>
                 <i class="fa fa-<?php echo $active_site; ?>-square"></i> <?php
             } else if( $active_site == 'email' ) { ?>
                 <i class="fa fa-envelope"></i> <?php
             } else { ?>
                 <i class="fa fa-<?php echo $active_site; ?>"></i> <?php
             } ?>
             </a>
             </li> <?php
         }
         echo "</ul>";
     }
}

Oh, and obviously you’ll need to remember to enqueue FontAwesome in your WordPress Theme in order to make this all function properly. Then, the CSS styling is totally up to you.