Add new custom socials icons


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


Since Customizr v3.5+

Since Customizr v3.5, you can add a social link by adding this type of code to your functions.php :

Before Customizr v3.5+

1) Add them!

Note : Tumblr now already included in the default Customizr social links. In your child theme functions.php add this simple snippet:

Where to paste this code? => in your functions.php file. I strongly recommend to create a child theme. Download a start-up child theme here.

Everything you need to know about child theme with Customizr here.

Read How to customize the Customizr WordPress theme? if have never used a functions.php file in a child theme.

 

 2) – Let’s style them!

Note : Since Customizr 3.4.19 and Customizr-Pro 1.2.19 the theme moved to the Font Awesome icon set so to refer to its map to get the correct code to use in the ‘content’ attribute.
Add this in your child theme style.css. Note : In the code below, I use one backslash for the content property value. If you want to use this css in the Custom CSS in customizer you have to use two backslashes because you need to “escape” one. Since Customizr 3.3.1 (Customizr-Pro 1.0.12), because of new wp themes guidelines,  you cannot use single (double) quotes in the Custom CSS in customizer. You need a child-theme.
Note : When you use a custom image as icon you might need to resize it for different viewports. To achieve that you have to use  media queries.

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

Enjoy!


Related Snippets you may also like


55 thoughts on “Add new custom socials icons

  • Menaka S

    Hi,
    In the customiser panel, under social links, please give your email id against Email address.(eg. abc@xyz.com ). Then add the following to your child theme’s functions.php. Change the email address to yours.

    • BlackSmile

      Thank you so much for this. The above solution did the trick and I now have a ‘Share via email’ social icon with subject and body text 😀
      This is not adding a new icon, simply repurposing the one that is already there for ‘contact via email’.

      Cheers!

    • BlackSmile

      Thanks, but the result then is that the icon doesn’t show up.. for whatever reason.
      I see that it automaticly adds ‘https://’ whenever I just put a random character in the field.
      To me it looks like there has to be an email address put in this field, which is not what I’m looking to do.
      Perhaps I should be asking this: Is there a way to leave the email address blank, but subject and body prepopulated? Like if I use: ‘mailto:?subject=something something&body=additional somethings’, do I need to input something specifically for that after ‘mailto:’?

      Edit: Just one more hint here, I have tried with an email adress too but then it opens the email client prepopulated with the address AND the subject/body text, all in the recipient field

  • BlackSmile

    Hi,
    I feel I have to ask this question because I can’t seem to get this to work using custom social icons.
    I want to make a mailto using the mail icon with prepopulated subject and body text for the header.

    So far it has not worked using the proposed methods here. I guess this one is more tricky because of the url used for this(mailto:?subject=…ect)

    I’m sure it is a simple one to fix:P

    Cheers

  • Rémi Renouleau

    Hello,

    The code in functions.php doesn’t work anymore in the lastest version of Customizr 3.4.19
    I got an Internal Server Error. My site is down….

    Does anynome have the same thing?

    Do you have a fix?

    Thanks

  • Fred

    Great tip!

    So now I have a row of nice social share icons in my colophon class=”span4 social-block pull-left”

    Now I wish to add some text (“Follow Us”) above the row of icons.

    Suggestion? Thank you.

  • Rick Barron

    Rocco,

    GREAT tip, thank you. I used it to add a shopping cart icon. Any thoughts on how to extend your solution to disable the icon when there is nothing in the shopping cart? I’m using the eStore cart which has the function eStore_get_total_cart_item_qty() to determine if there is anything in the cart.

    Thank you …… Rick

    • Rocco Aliberti Post author

      Hi Rick,
      thanks for your appreciation!
      About your question..
      My idea would be to add a css class to the body if the cart is empty. So, in your child-theme, something like
      add_filter('body_class', 'estore_cart_items');
      function estore_cart_items($classes){
      if ( function_exists('eStore_get_total_cart_item_qty') && eStore_get_total_cart_item_qty() == 0 )
      $classes[] = 'es-empty-cart';
      return $classes;
      }

      Then in your css you can do this:

      body.es-empty-cart .social-block .icon-estore {
      display: none;
      }

      Hope this helps.

      p.s.
      I’ve not tested this code 😛

          • Rick Barron

            Hi Rocco,

            Is it possible to modify your solution to remove the target=”_blank” option from the link?

            Thanx ….. Rick

            • Rocco Aliberti Post author

              Hi Rick,
              well my solution doesn’t have the target blank 😀 It’s by default for social icons except for the rss.
              So you want to remove the target blank for the cart link?
              Adding this to your child-theme functions.php should work:

            • Hannah

              When I grow up, I want to be you. Your ability to solve issues so simply is beyond amazing to me. I don’t think I’ll ever understand coding 1/4 as well as you do. THANK YOU!

  • Ardeleanu

    I already add one costum icon on my site whit this code snippet but i want to add another one …when i try to add another one the site crash dosn\t work …..pls help

    • Rocco Aliberti Post author

      How do you add this additional icon?
      Could be possible you made some syntax errors. Do you have WP_DEBUG set to true in your wp-config.php, it lets you know the error.
      If you cannot fix it by yourself, please paste your child-theme functions.php in pastebin.com, open a new topic here and put the pastebin link there.
      Cheers

  • Pablo

    Hi, is this supposed to work only with Tumblr and delicious? I’m copying the first snippet adding houzz with my houzz details page and it doesn’t seem to be added to the exising icons I have…

    Besides, I dont understand how the css classes are created, ie .icon-tumblr and .icon-delicious?

    Thanks!

    • Rocco Aliberti Post author

      Hi Pablo. Nope, this is a general snippet, you can add whatever you want.
      So you made something like this:
      add_filter('tc_default_socials', 'add_new_socials', 20);
      function add_new_socials($socials){
      $new_socials = array(
      //tc_yoursocial => array
      'tc_houzz' => array(
      'link_title' => __( 'Find me on Houzz'),
      'option_label' => __( 'Houzz profile url' ),
      'default' => "http://www.houzz.com/"
      ),
      );

      return array_merge( $socials, $new_socials );
      }

      now what you need is write some css rules for the selector
      .icon-houzz:before
      The thing is, if you call the social “tc_houzz” customizr will create an “a” tag with the classes “social-icon icon-houzz”.
      Hope this helps

  • Laureline

    Hi !

    Many thanks for this snippet, it really helped me.
    One question remains though, as Nicolas asked : “what about change the color when the cursor is over the icon (css hover)? How can I do it with custom icons?”

    I tried to add a.icon-xxx:hover with another background image but it does not work. Any leads ?

    Thank you very much !

  • lada po

    I do not understand how to do this right?
    I tried to do did not work out!
    May make a video or tell us in order please?

  • Mia Sinclair

    Hi,

    I love this theme!

    I am wanting to add the tumblr icon to the header along with the usual social icons. I have copied and pasted the relevant coding above successfully, but, when copying the CSS part I find that the icon does not show but the numerical genericon reference appears instead. Any ideas?

    I have tried changing the ” for ‘ but this just disappears the icon altogether!

    I look forward to hearing from you.

    Mia

    • Rocco Aliberti Post author

      Hi Mia, do you use that css in the custom css box?

      Note : In the code below, I use one backslash for the content property value. If you want to use this css in the Custom CSS in customizer you have to use two backslashes because you need to “escape” one.

      So use

      content:"\\f214";

      Hope this helps.

        • Rocco Aliberti Post author

          🙂
          Mia, anyway since you have a child theme, I suggest to put these “sensitive” rules in its style.css.
          Anyway, glad you had that “lightbulb moment” 😀

          • Mia Sinclair

            I have done it via the child theme stylesheet.css. I also keep a full copy of all amendments on a separate document in case something goes horribly wrong!

            Thank you again!

            Mia

  • Dibyendu Paul

    Thanks for posting that.

    I am getting the following error when I modify function.php

    Warning: array_merge() [function.array-merge]: Argument #1 is not an array in /home/rdo69150/public_html/wp-content/themes/customizr-child/functions.php on line 115

    Warning: Invalid argument supplied for foreach() in /home/rdo69150/public_html/wp-content/themes/customizr/inc/admin/class-admin-customize.php on line 249

    Warning: Cannot modify header information – headers already sent by (output started at /home/rdo69150/public_html/wp-content/themes/customizr-child/functions.php:115) in /home/rdo69150/public_html/wp-includes/pluggable.php on line 896

    • Rocco Aliberti Post author

      That’s ’cause I made a copy&paste error. 🙂
      Sorry for this.
      Thanks for the feedback.
      Snippet updated.

      • bruno

        hi 🙂 i managed to add three different icons , when i hover the mouse on it shows me the link i wrote but i doesn’t shows the icon, so basically it is a blank space with a link under it :/ how can i solve this ? plz help me :(((
        my website is medinistanbul.al

        • Rocco Aliberti Post author

          Hello,
          you have this in your child-theme style.css:

          Why do you have that “\\” before url, remove it 😉
          Then you called your “social” English and not english
          So it should be:

          and so on..

          Hope this helps.

          • bruno

            Thank you so so much , but only one flag shows up , i have three flags setup but they are still hiden( two of them ) , have i done something wrong ?

            • Rocco Aliberti Post author

              I see this:
              content: url("http://medinistanbul.al/?lang=sq"><img src="http://medinistanbul.al/wp-content/uploads/2015/06/Albania2.png");

              which should be :
              content: url("http://medinistanbul.al/wp-content/uploads/2015/06/Albania2.png");

              same thing for the turkish flag 😉

          • bruno

            Now i am ashamed :/ i didn’t see it sorry 🙁 , now just one last thing , when i click on a flag it opens a new tab , is there a way to stop that ?because i want to load the page on the existing tab,
            Again thank you so so so much

            • Rocco Aliberti Post author

              Well, yeah it makes sense for your purpose 😀
              So try adding the following to your child-theme functions.php too:

              This way we say that for those “socials” which are inside that array (which are the ones you added) the link must be opened in the same window.
              Hope this helps.

            • bruno

              YOU ARE THE BOSS !! that works perfectly ! now one last thing i need and than please show me a way how can i donate some money to you because there is no other way how i would thank u 🙂 🙂 if you open my page now (medinistanbul.al) i added some real social links 😛 but i need those icon like facebook twitter etc…, to be on the other side of the header ,near the tag line where it is written Health Care,
              How can i do this ? ( i don’t know where you live but i want to buy you a beer my man :))) )

            • Rocco Aliberti Post author

              Hello Bruno,
              honestly I don’t think what you want to do is the perfect way to achieve that. Splitting the social links is tortuous but still possible. Following some code you have to use:
              1) change the current add_new_socials function you’re using so to make it look like this:
              https://gist.github.com/eri-trabiccolo/83cf159d9aae2d0483cb#file-split_socials_part_one-php

              it’s pretty simple understand what you have to keep of your current function, isn’t it?

              Then add this other one:
              https://gist.github.com/eri-trabiccolo/8ddad749bf2c3fc71193#file-split_socials_part_two-php

              Finally add some style to your child-theme style.css:
              https://gist.github.com/eri-trabiccolo/e6d1f4128fa1016ece77#file-split_socials_css-css

              Hope this helps.

Comments are closed.