Add Social Media icon widget to customizer

 Add Social Media icon widget to customizer

Adding Social Media icon widget to customizer is an important topic for many website owners, and you may find it difficult to find free plugins that do this, and within this series that we are learning now on the Studio Shoot site to create a WordPress template from scratch, we will learn today how to write the code to show social media in the Customization section WordPress and show it in any section of our site

Customizing the template in WordPress customizer is what is known when you go to the appearance section, and then click on customize, you will usually find in each theme certain sections such as controlling fonts, colors, controlling the display of content and pages, as well as displaying images and categories in articles etc… This is called  Theme Customization API

In the previous lesson, we explained and defined the code used to customize the template in WordPress, and in this lesson we will also create new sections, which are the following:

  • Show social media in wordpress

The first step :

Go to  customizer.php  and paste the following code:

<?php 
function studyshoot_control_options($wp_customize){
                $wp_customize->add_section('studyshoot_social_media_buttons' , 
                        array(
                            'title'=> __('ايقونات التواصل الاجتماعي','ant' ),
                             ));
            $wp_customize->add_setting('facebook_social_button' , 
                    array(
                        'default'=> '#',
                        'transport'=>'refresh',
                        'sanitize_callback' => 'esc_url_raw',
                        ));
            $wp_customize->add_control(new Wp_Customize_Control (
            $wp_customize,'facebook_social_button', 
                    array(
                        'label'=>__('Facebook ' , 'studyshoot' ) ,
                        'section'    => 'studyshoot_social_media_buttons',
                        'settings'=>'facebook_social_button',
                        'type'=>'link'
                        )));
            $wp_customize->add_setting('twitter_social_button' , 
                    array(
                        'default'=> '#','transport'=>'refresh',
                        'sanitize_callback' => 'esc_url_raw',
                        ));
            $wp_customize->add_control(new Wp_Customize_Control (
            $wp_customize,'twitter_social_button', 
                    array(
                        'label'=>__('Twitter' , 'studyshoot' ) ,
                        'section'    => 'studyshoot_social_media_buttons',
                        'settings'=>'twitter_social_button',
                        'type'=>'link'
                        )));
            $wp_customize->add_setting('youtube_social_button' ,
                    array(
                        'default'=> '#',
                        'transport'=>'refresh',
                        'sanitize_callback' => 'esc_url_raw',
                        ));
            $wp_customize->add_control(new Wp_Customize_Control (
            $wp_customize,'youtube_social_button',
                    array(
                        'label'=>__(' Youtube','studyshoot' ) ,
                        'section'    => 'studyshoot_social_media_buttons',
                        'settings'=>'youtube_social_button',
                        'type'=>'link'
                        )));
            $wp_customize->add_setting('instagram_social_button' ,
                    array(
                        'default'=> '#',
                        'transport'=>'refresh',
                        'sanitize_callback' => 'esc_url_raw',
                        ));
            $wp_customize->add_control(new Wp_Customize_Control (
            $wp_customize,'instagram_social_button', 
                    array(
                        'label'=>__(' Instagram', 'studyshoot' ) ,
                        'section'    => 'studyshoot_social_media_buttons',
                        'settings'=>'instagram_social_button',
                        'type'=>'link'
                        )));
            $wp_customize->add_setting('behance_social_button' ,
                    array(
                        'default'=> '#',
                        'transport'=>'refresh',
                        'sanitize_callback' => 'esc_url_raw',
                        ));
            $wp_customize->add_control(new Wp_Customize_Control (
            $wp_customize,'behance_social_button', 
                    array(
                        'label'=>__(' Behance ', 'studyshoot' ) ,
                        'section' => 'studyshoot_social_media_buttons',
                        'settings'=>'behance_social_button',
                        'type'=>'link'
                        )));
            $wp_customize->add_setting('pinterest_social_button' ,
                    array(
                        'default'=> '#',
                        'transport'=>'refresh',
                        'sanitize_callback' => 'esc_url_raw',
                        ));
            $wp_customize->add_control(new Wp_Customize_Control (
            $wp_customize,'pinterest_social_button',
                    array(
                        'label'=>__(' pinterest    ','studyshoot' ) ,
                        'section'    => 'studyshoot_social_media_buttons',
                        'settings'=>'pinterest_social_button',
                        'type'=>'link'
                        )));
}
add_action( 'customize_register','studyshoot_control_options' );

As you noticed, we created settings and set any add_control and add_setting for each of the social media sections and gave each one a name.

The second step :

It is to go to the theme folder, and create a new folder, give it the name sections, and then inside this folder create a new file give it the name social-media.php, and then paste the following code in the last file:

function studyshoot_social_media_boxes(){
     ?>
        <br>
     <div class="social-follow" > 
                          
                          <div class="box social-box-facebook">
                           <a href="<?php echo (get_theme_mod('facebook_social_button')) ?>">  facebook</a>
                         
 
                        </div>
                          <div class="box social-box-pinterest">
                     <a href="<?php echo  (get_theme_mod('pinterest_social_button')) ?>">   pinterest</a>
                         
 
                        </div>

                          <div class="box social-box-twitter">
                            <a  href="<?php echo  (get_theme_mod('twitter_social_button')) ?>">  twitter</a>
                        </div>
 
                 
                          <div class="box social-box-youtube">
                             <a  href="<?php echo  (get_theme_mod('youtube_social_button')) ?>">  youtube </a>
                        </div>
                          <div class="box social-box-instagram">
                         <a  href="<?php echo  (get_theme_mod('instagram_social_button')) ?>">  instagram </a>
                        </div>
                          <div class="box social-box-behance">
                            <a  href="<?php echo  (get_theme_mod('telegram_social_button')) ?>"> behance</a>
                 
                     </div>
                     </div>
<?php }
add_filter ('studyshoot_social_media','studyshoot_social_media_boxes');

In the previous code, we created a command + section to customize and create social media icons,

The third step :

is to go to the file style.css and paste the following format code:

 .social-follow {
     justify-content: center;
     align-items: center;
     display: flex;
}
 .box{
     color: white;
     padding: 10px;
     position: relative;
     overflow: hidden;
     border-radius: 2px;
     clear: both;
     margin: 0px 0px 0px 10px;
}
 .social-box-facebook{
     background-color: #3b5998 !important;
}
 .social-box-twitter{
     background-color:#1da1f2 !important;
}
 .social-box-youtube{
     background-color: #ef4e41 !important;
}
 .social-box-instagram{
     background-color: #c13584 !important;
}
 .social-box-behance{
     background-color:#1879fd !important;
}
 .social-box-pinterest{
     background-color: #bd081c !important;
}
 .social-follow a{
     text-decoration: none;
     text-transform: uppercase;
     color: white;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 12px;
     margin:0px;
}
 .box svg{
     margin-right:5px;
}
 .box:hover{
     opacity: 0.8;
     outline-width: 0;
}

Read also: How do I show the copyright section in the footer section of the site ?

As you can see, we have created a special format for each of the social media icons. As for the next stage, it is the stage of showing the icons in the section of the site that we want, all you have to do is go to the section in which you want to display the social media icons || Home || Website Header || Sidebar || For example, then paste the following code:

<?php echo studyshoot_social_media_boxes(); ?>

Also, go to the function.php file, and don’t forget to enter the following code:

require_once(get_template_directory().'/sections /social-media.php');

The fourth step :

It is to go to the appearance section in WordPress, then to customize, there you will find a new section called social media icons, enter it and then paste the link for the extension you want and press save ..

All is well ?

Follow me in the next lessons on creating custom WordPress template codes