Add New Social Widget

As an example, we are adding the Pinterest social icon. Please go to file \specular\includes\widgets\codeless_socialwidget.php
Find the code in here:

echo '<ul class="footer_social_icons '.esc_attr($style).'">';
            
            if( !empty($cl_redata['facebook']) )
               echo '<li class="facebook"><a href="'.esc_url($cl_redata['facebook']).'" target="_blank"><i class="icon-facebook"></i></a></li>';
            if( !empty($cl_redata['twitter']) )
                echo '<li class="twitter"><a href="'.esc_url($cl_redata['twitter']).'" target="_blank"><i class="icon-twitter"></i></a></li>';
            if( !empty($cl_redata['flickr']) )
                echo '<li class="flickr"><a href="'.esc_url($cl_redata['flickr']).'" target="_blank"><i class="icon-flickr"></i></a></li>';
            if( !empty($cl_redata['google']) )
                echo '<li class="google"><a href="'.esc_url($cl_redata['google']).'" target="_blank"><i class="icon-google"></i></a></li>';
            if( !empty($cl_redata['dribbble']) )
                echo '<li class="dribbble"><a href="'.esc_url($cl_redata['dribbble']).'" target="_blank"><i class="icon-dribbble"></i></a></li>';
            if( !empty($cl_redata['foursquare']) )
                echo '<li class="foursquare"><a href="'.esc_url($cl_redata['foursquare']).'" target="_blank"><i class="icon-foursquare"></i></a></li>';
            if( !empty($cl_redata['linkedin']) )
                echo '<li class="foursquare"><a href="'.esc_url($cl_redata['linkedin']).'" target="_blank"><i class="icon-linkedin"></i></a></li>';
            if( !empty($cl_redata['youtube']) )
                echo '<li class="youtube"><a href="'.esc_url($cl_redata['youtube']).'" target="_blank"><i class="icon-youtube"></i></a></li>';
            if( !empty($cl_redata['email']) )
                echo '<li class="email"><a href="'.esc_url($cl_redata['email']).'" target="_blank"><i class="icon-envelope"></i></a></li>';
            if( !empty($cl_redata['instagram']) )
                echo '<li class="instagram"><a href="'.esc_url($cl_redata['instagram']).'" target="_blank"><i class="icon-instagram"></i></a></li>';
             if( !empty($cl_redata['snapchat']) )
                echo '<li class="snapchat"><a href="'.esc_url($cl_redata['snapchat']).'" target="_blank"><i class="icon-snapchat"></i></a></li>';                
            if( !empty($cl_redata['vimeo']) )
                echo '<li class="vimeo"><a href="'.esc_url($cl_redata['vimeo']).'" target="_blank"><i class="moon-vimeo"></i></a></li>';

and add this one below the above code:

if( !empty($cl_redata['pinterest']) )
                echo '<li class="pinterest"><a href="'.esc_url($cl_redata['pinterest']).'" target="_blank"><i class="icon-pinterest"></i></a></li>';

Then edit the file specular\includes\core\codeles_options.php, find the lines:

$this->sections[] = array(
                'icon' => 'el-icon-twitter',
                'title' => __('Social Media', 'codeless-admin'),
                'fields' => array(
                    array(
                        'id'       => 'facebook',
                        'type'     => 'text',
                        'title'    => __('Facebook Link', 'codeless-admin')
                    ),
                    array(
                        'id'       => 'twitter',
                        'type'     => 'text',
                        'title'    => __('Twitter Link', 'codeless-admin')
                    ),
                    array(
                        'id'       => 'flickr',
                        'type'     => 'text',
                        'title'    => __('Flickr Link', 'codeless-admin')
                    ),
                    array(
                        'id'       => 'foursquare',
                        'type'     => 'text',
                        'title'    => __('Foursquare Link', 'codeless-admin')
                    ),
                    array(
                        'id'       => 'google',
                        'type'     => 'text',
                        'title'    => __('Google Plus Link', 'codeless-admin')
                    ),
                    array(
                        'id'       => 'dribbble',
                        'type'     => 'text',
                        'title'    => __('Dribbble Link', 'codeless-admin')
                    ),
                    array(
                        'id'       => 'linkedin',
                        'type'     => 'text',
                        'title'    => __('Linkedin Link', 'codeless-admin')
                    ),

                    array(
                        'id'       => 'youtube',
                        'type'     => 'text',
                        'title'    => __('Youtube Link', 'codeless-admin')
                    ),

                    array(
                        'id'       => 'email',
                        'type'     => 'text',
                        'title'    => __('Email Link', 'codeless-admin')
                    ),

and add this one below it:

array(
                        'id'       => 'pinterest',
                        'type'     => 'text',
                        'title'    => __('Pinterest Link', 'codeless-admin')
                    )

Now you can refresh the general options and you can see there at Social Media section a new field for the Pinterest link.

Reference topic.

Was this article helpful?

Related Articles

Leave A Comment?

You must be logged in to post a comment.