Simple Socials for WordPress

Custom Styling & Icons

By default, Simple Socials uses Font Awesome 5 to draw its icons, but you can change this and override colours, size and layout too.

ImportantBecause most websites already have Font Awesome installed, Simple Socials dos not ship with any icons. If your site doesn’t already use Font Awesome, you’ll either need to add it, or supply your own icons.

Styling the Layout

Example CSS snippets.

/*
 * Change the colour of the email button
 */
.smps-network-email {
    background-color: blue;
}

/*
 * For the Socials widget in the site footer, put a gap of 1em
 * between each button and make the buttons round.
 */
footer .smps-socials ul {
    gap: 1em;
}

footer .smps-social-btn {
    border-radius: 50%;
}

/*
 * Change the large size so the icons aren't not quite-so-big.
 */
.smps-socials.large .smps-social-btn {
    font-size: 14pt;
}

Changing the Icons

Font Awesome 4 & 5

By default, Simple Socials outputs icon HTML snippets for Font Awesome 5. Use the smps_font_awesome_major_version filter to change which version of Font Awesome to use.

// Tell Simple Socials to output icon HTML form FA 4.7
add_filter('smps_font_awesome_major_version', function () {
    return 4;
});

Custom Icons

You can change individual social button icons like this:

// Set a custom icon for the Email button.
function custom_social_icon_email($url) {
    // Get the base URL of our custom child theme.
    $base_uri = get_stylesheet_directory_uri();

    $icon_url = sprintf('<img src="%s" />', esc_url($base_uri . '/email.png'));

    return $icon_url;
}
add_filter('social_icon_email', 'custom_social_icon_email');

…or you could set all the icons in a single filter, like this:

// Override some social icons.
function custom_all_socials(array $socials) {
    // Get the base URL of our custom child theme.
    $base_uri = get_stylesheet_directory_uri();

    $socials['phone']['icon'] =
        sprintf('<img src="%s" />', esc_url($base_uri . '/phone.png'));

    $socials['email']['icon'] =
        sprintf('<img src="%s" />', esc_url($base_uri . '/email.png'));

    $socials['facebook']['icon'] =
        sprintf('<img src="%s" />', esc_url($base_uri . '/facebook.png'));

    return $socials;
}
add_filter('all_socials', 'custom_all_socials');