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:
add_filter('tc_default_socials', 'add_new_socials', 20); function add_new_socials($socials){ $new_socials = array( //tc_yoursocial => array 'tc_tumblr' => array( 'link_title' => __( 'Follow me on Tumblr'), //title displayed on mouse hover 'option_label' => __('Tumblr profile url'), 'default' => "http://www.tumblr.com" //your social link here ), 'tc_delicious' => array( 'link_title' => __( 'Find me on Delicious'), 'option_label' => __( 'Delicious profile url' ), 'default' => "http://delicious.com/" ), ); return array_merge( $socials, $new_socials ); }
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.
/* Thumblr */ .icon-tumblr:before { content: "\f214"; /* we can use a genericon for tumblr */ } /* Delicious */ .icon-delicious:before { content: ""; width: 18px; height: 18px; display: inline-block; background: url("https://upload.wikimedia.org/wikipedia/commons/1/11/Delicious.svg") no-repeat; background-size: 18px 18px } /* change delicious icon size in sidebars*/ .social-block.widget_social .icon-delicious:before { width: 14px; height: 14px; background-size: 14px 14px; } /* change delicious icon size in footer */ #footer.footer .colophon .icon-delicious:before { width: 16px; height: 16px; background-size: 16px 16px; }
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!
55 thoughts on “Add new custom socials icons”
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.
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!
Glad that it worked 🙂
Hi,
It is not too tricky. Just substitute the social link with the mailto link. It should work.
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
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
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
Hi ,
The developer team handles support for Customizr at https://wordpress.org/support/theme/customizr and for Customizr-Pro at http://presscustomizr.com/support/. Please post your query there with a link to your site.
Hi, i can’t change those social icons and move them down in the same line as menu.. just look: http://monosnap.com/image/qC9tI0sdKwdXtsZKxNoDiWSt5HooLi
Hot to do it?
Hi Czejzee,
to move elements on the page you need specific css rules.
You might want to take a look at some developers resources:
http://doc.presscustomizr.com/customizr/browsers-dev-tools/
http://doc.presscustomizr.com/customizr/guide-css-html-customizr-wordpress-theme/
http://doc.presscustomizr.com/guides-tutorials/resources-wordpress-developers/
Cheers
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.
Hi Fred thanks. 😉
You can use this filter -> https://github.com/Nikeo/customizr/blob/master/inc/parts/class-footer-footer_main.php#L133 and add some html before the icons with this code:
https://gist.github.com/eri-trabiccolo/5d87ab50616aa8d11b97
did this help?
Brilliant! Works perfectly. I cross-posted this same question in the Wordpress forum. Sorry.
Thanks again!
fred
No problem Fred 😉
If you want update that topic with the solution and your improvements on it 😉
PERFECT Rocco! How do I buy you a coffee?
…… Rick
Hi Rick,
glad you solved.
This is very kind of you, if you want you can donate through my plug-in page (under Author). Thanks! 🙂
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
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 😛
You’re the BEST, works perfectly. Thank you Rocco.
…… Rick
Hi Rick,
thanks 😛
Glad it works!
Cheers
Hi Rocco,
Is it possible to modify your solution to remove the target=”_blank” option from the link?
Thanx ….. Rick
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:
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!
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
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
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!
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
Thank you very much Rocco, now I understand.
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 !
Hi Laureline, try
a.icon-xxx:hover:before.
Cheers!
Wow, such a fast answer !!
Thank you very much, we tried it within the elements inspector of google chrome and it didn’t work so we gave up, waiting for your reply (which we didn’t expect that fast 😉 ).
–> Modified directly in the css file, it works !
Thank you very much 🙂 .
You’re welcome Laureline.
And yes, sometimes google-chrome element inspector fails with pseudo-elements “:before” and “:after”.
Cheers
🙂 feels good to read you !
🙂 Hope I can back soon. Sorry for my disappearance.
No problems.:) you’ll always be welcome here
Hi. I used this snippet, and works fine on PC screen, but in a mobile screen, the icon looks too big.
What should be the size of the custom icon? (i.e. http://upload.wikimedia.org/wikipedia/commons/1/11/Delicious.svg)
What about change the color when the cursor is over the icon (css hover)? How can I do it with custom icons?
Hi Alf,
This snippet might help : http://www.presscustomizr.com/snippet/change-size-social-icons/
There are no standard size, it’s really up to you. I prefer small icons with 16×16 pixels dimensions.
I would recommend to use a png or jpg format icon instead of svg,
Hope this helps!
do you have a demo please?
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?
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
Hi Mia, do you use that css in the custom css box?
So use
content:"\\f214";
Hope this helps.
Ah “lightbulb moment” now I understand!!! Works perfectly! Thank you!
Mia
🙂
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” 😀
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
🙂
You’re welcome Mia.
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
That’s ’cause I made a copy&paste error. 🙂
Sorry for this.
Thanks for the feedback.
Snippet updated.
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
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.
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 ?
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 😉
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
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.
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 :))) )
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.