Add new custom socials icons

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”

Comments are closed.