E4. How do I add another social icon in Mantra?

Extra social icons can be added or existing social icons images can be changed using a child theme.

For the purpose of the examples, lets assume you will be creating a “NewSocial” icon (Note: capitalization matters. Keep the same capitalization in all the occurrences).

1. Download the sample extra socials child theme: for Mantra 3.0.2 and newer, for Mantra v2.0.3 to 2.6.1.1 or for Mantra up to v2.0.2.

2. Find an image for you new social that fits in with the existing icons you will be using. Create a 26×26 pixels transparent PNG for it. Place that image as mantra-extrasocials/resources/images/socials/NewSocial.png

3. Edit the code provided by the functions.php file to define/rename your new social icon(s). Your new social icon(s) will then appear in Mantra’s administration page (Appearance > Mantra Settings) and once enabled also on the frontend.

4. Install the child theme via WordPress or manually upload the mantra-extrasocials folder to your wp-content/themes site’s folder. Using a child theme makes sure you will not lose your changes on theme updates. Use it as the basis for all your future customization or merge the contents of the functions.php file (and the images folder) with your existing child theme.

PS: If you want to add more than one custom social icon, edit the new socials array to include the extra socials array('NewSocial','NewSocial2') and so on.

PS2: You can use this child theme to only customize the social icons images, by adding all your custom images in the mantra-extrasocials/resources/images/socials/ folder (using exactly the same name as the originals) and leaving the new socials array empty: array().

PS3: In Mantra versions up to 2.6.1.1, the social images have a size of 37×37 pixels and are located under theme-folder/images/socials/ (the resources folder isn’t present).