If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

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=”#”]:

how-to-add-a-new-social-icon-to-the-social-shortcode-based-on-Cherry-Framewor1

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>';

    how-to-add-a-new-social-icon-to-the-social-shortcode-based-on-Cherry-Framework-2

  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:

    how-to-add-a-new-social-icon-to-the-social-shortcode-based-on-Cherry-Framework3

  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="#"

    how-to-add-a-new-social-icon-to-the-social-shortcode-based-on-Cherry-Framework4

  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)