WordPress. How to add a new social icon to the social shortcode (based on Cherry Framework 3.x)

This tutorial shows how to add a new social icon to the social shortcode in WordPress (based on Cherry Framework).

WordPress. How to add a new social icon to the social shortcode (based on Cherry Framework)

You should check if the social icons were created with the help of the shortcode.

In order to do that, please check the desired page under pages – all pages and in text mode find the following shortcode [social facebook_url=”#” twitter_url=”#” google_plus_url=”#”]:

In order to add a new social icon to the social shortcode, you should perform the following:

1. Find the file with the shortcode on your server.

   It will be in custom-function.php file located in wp-content/themes/themeXXXX/includes folder.

2. Open the file to edit with any code editor like Adobe Dreamweaver 8+, Notepad++ or any other editor.

3. Locate the following code in the file:

   function social_shortcode($atts, $content = null) {
     extract(shortcode_atts(array(
     'facebook_url'    => '',
     'twitter_url'     => '',
     'google_plus_url' => '',
     'custom_class'    => '',
     ), $atts));

4. Copy the line of code with the one of social icons and paste it under the existing social icons code to the new line below.

5. Correct the values in the code:

    'linked_in_url' => '',

6. Locate the following code in the file:

    
     $output = '<div class="social-wrapper '.$custom_class.'">';
     $output .= '<a href="'.$facebook_url.'"><i class="icon-facebook"></i></a>';
     $output .= '<a href="'.$twitter_url.'"><i class="icon-twitter"></i></a>';
     $output .= '<a href="'.$google_plus_url.'"><i class="icon-google-plus"></i></a>';
     $output .= '</div>';
     

7. Copy the line of code with the one of social icons and paste it under the existing social icons code to the new line.

8. Correct the values in the code:

    $output .= '<a href="'.$linked_in_url.'"><i class="icon-linkedin"></i></a>';

   

9. The icons are set with the help of iconic font- Font Awesome. To find the desired icon you will need to follow this link.

10. Locate the desired icon.

11. Copy its class:

    

12. Paste the class into the following part of the social icon code:

    class="icon-google-plus"

13. Save changes in the file.

14. Now you should add the created icon to the shortcode to make it display on the site.

15. In order to do that, please check the desired page under Pages->All pages and in text mode find the following shortcode [social facebook_url=”#” twitter_url=”#” google_plus_url=”#”] :

16. Copy the code of the existing social icon.

17. Paste it next to the last icon, right before the end of the shortcode.

18. Correct values in the copied code:

    linked_in_url="#"

    

19. Save changes.

Feel free to check the detailed video tutorial below:

WordPress. How to add a new social icon to the social shortcode (based on Cherry Framework)