Using Minimum Pro with Simple Social Icons

Quick Tip for Using Simple Social Icons with Minimum Pro


Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 27 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 29 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 30 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

This Genesis tutorial is so quick, I’ve got time to tell you a joke first. Well, it’s not really a joke, but it’s one of my favorite movie quotes. It’s from Raising Arizona – the part where one of the kidnappers goes into the convenience store and tries to buy something a baby might like. The scene goes like this:

Evelle: These balloons blow up into funny shapes and all?

Grocer: Well no… unless round is funny.

Round is Funny, but setting up Simple Social Icons for Minimum Pro is Tedious

The Minimum Pro theme shows off four beautiful, round social media icons. To set those up, you need to drag four separate instances of the Simple Social Icons widget. And then you need to configure those four separate instances.

Minimum ProAll told, it takes less than five minutes to repeat that action, but I’d rather have my five minutes. Below is a quick snippet of code you can drop into your theme that will pre-configure each instance of the Simple Social Icons widget.

Filter the Default Styles in Simple Social Icons

About a week ago, StudioPress updated the Simple Social Icons plugin to v 1.0.6. The update has some massive improvements under the hood that give users better control over the plugin, such as the ability to substitute your own glyphs, add a social service (i.e. MySpace!), and change the order of the icons. Sridhar Katakam wrote up a great tutorial showing how to use some of those features.

For this tutorial, I’m focusing on a new filter called simple_social_default_styles. We can use it to set styles in advance. When I say “styles,” I mean every editable field in the Simple Social Icons widget.

Simple Social Icons Widget

In the code sample I’m about to share, I’m only going to discuss the icon size, border radius, alignment, and colors since those will be the styles I don’t want to repeat over and over when I’m setting up the Minimum theme.

Take the following snippet (editing the values to match what you want, of course) and drop it into your functions.php file (or the Functions box, if you’re using the Genesis Extender plugin).

As always, use caution when editing your site and be ready to jump in via FTP if you get the ole white screen of death.

// Default Simple Social Icon Styles
add_filter( 'simple_social_default_styles', 'minmimum_default_style' );
function minmimum_default_style( $defaults ) {
$defaults['size'] = '100';
$defaults['border_radius'] = '100';
$defaults['icon_color'] = '#fff';
$defaults['icon_color_hover'] = '#fff';
$defaults['background_color'] = '#404435';
$defaults['background_color_hover'] = '#3c4556';
$defaults['alignment'] = 'aligncenter';
return $defaults;
}

Save it. You’re done.

Try it Out

Once you’ve saved your code, the next time you drag an instance of the Simple Social Icons widget into a widget area, the widget will pre-populate with the values from your code. Cool, eh?

Big props to Andrew Norcross for letting me know about the new capabilities of Simple Social Icons. Get out there and have some fun experimenting!

14 thoughts on “Quick Tip for Using Simple Social Icons with Minimum Pro”

  1. The existence of a filter like simple_social_default_styles makes me think that there should be an options panel added to the Genesis menu when the plugin is installed?

    I always look forward to your tuts btw! Short or long, all good stuff.

    1. I don’t think so… there are tons of filters in Genesis, for instance, that are there to take advantage of, but shouldn’t be cluttering an options panel. Developers don’t need no stinking options panel. 😉

  2. Jay Vandenberg

    Great tutorial, but I just don’t find that having large social icons on the landing page to be the best call to action for new visitors (yes, I know you can change this!).

    1. But, but… CIRCLES, Jay! Yeah, I think replacing the social icons with services or some other CTA is likely a better use of that space. But Minimum was designed to be a “portfolio” theme, so if you’re using it in that way, social connections are probably more important.

  3. This is a nice update from StudioPress that everyone can use. Your defaults setup would be a great thing for theme authors to use to reduce ‘how-to’ support questions. (Not that SSI is that tough to setup.) Thanks for the tut!

  4. Something I’ve been getting into is putting the social media icons in the navigation menu. I love it. I have been using the Menu Social Icons plugin. I got the idea from Sridhar Katakam (http://sridharkatakam.com/adding-social-icons-navigation-using-menu-social-icons-plugin/). So far, very pleased. I like how the icons scale and move with some css tweaking. You can make some changes in the functions file too.

    It is definitely something to consider and a pretty good place to put icons. I still like Simple Social though! Great as always Carrie!

    Todd

    1. Hey Todd,
      I just used that link of Sridhar’s on another project. Wasn’t familiar with that plugin, but it worked like a charm. You might also like this article from Jesse Petersen on tricking out the navigation menu. 🙂

      Cheers,
      Carrie

  5. I am using simple social icons with the minimum pro theme and have set the icons to display at 120px on the home page. My issues is that the icons are not resizing for mobile browsers, and make the page look unprofessional when viewed in a small browser setting.

Leave a Comment

Your email address will not be published. Required fields are marked *

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.