Social Icons in WordPress: the menu as the best choice

There must be a real statistic about the use of WordPress with external social icons link to social profiles. I have never seen it, but it must be very high. Some themes include the icons on the header, others on the sidebar or the footer (like our website), but the truth is that it is a recurring element.

The main question about this is that there is no concrete way to add them. The choices are many:

- Plugins: there are many, better and worse, lighter and heavier. Personally I am not very fond of plugins for a specific functionality like this one. They seem a little invasive and usually do not fit well with the template design. However, if I had to meet with one, simple-social-icons has many options to customize the design

- Theme options: This is the most used choice in premium WordPress themes, and in most cases works quite well. It includes a template design by default, and although its position is usually defined (header or footer) there are also options for modification. A couple of examples are: MusicHall (footer) or Dessert (header.)

This simply involves filling out the field with the URL of such social network, and saving it. Then, icons will appear on the site located. It is simple if you are already familiar with the template or framework you are using.

- Menús: This is the third way, and I will tell you why it is the best one. Its use is managed through the WordPress custom menus themselves (in the Dashboard> Appearance> Menus) and it normally brings a location (on the header or footer,) but if you prefer, you can add it to the sidebar as a widget as well.

menu-wordpress-icons

Why a social icons menu is the best choice?

For several reasons. Consider the user…:

They do not need to become familiar with the custom theme options panel. When they are in the WordPress custom menus, they will be in a known environment and can use their knowledge. The same happens with the plugin option.

The design of these buttons is predefined by the template, so we are sure that they follow the same colour scheme and palettes. With the option of using plugins it does not happen, so the design can be altered by some other style element.

By changing the theme or template, information is not lost (if the end theme has recorded this menu). It is the most important. We can make template changes without worrying about re-entering the social links on each theme options. We save time and effort to the user. This is the best news; +1 for the UX.

menu-social-icons-wordpress

In these fight three rounds, the option menu has three points, while the theme options and the option to use plugins only get one each. Let’s see how to do it.

Integrating a social icons menu on our WordPress

We learned of this option thanks to Fränk Klein, who showed us fantastic articles of Konstantin Kovshenin and Justin Tadlock. Congratulations to you both.

The running is very simple; we record a new menu in our functions.php so that users can use it in the admin panel. These users add items to this menu, as custom link (URL), where they can add their social networks (facebook.com/name, twitter.com/name …)

Perfect, once we have added all the social networks, it’s time to style, to distinguish one from the other (now we have an HTML with several links in a list). And that’s where the magic of the new CSS selectors appears, specifically in [attribute * = value] that select us any item that contains a particular value for a required attribute. It is basically:

#menu-social li a[href*="twitter.com"] {color: #33ccff; }

I mean, we select any item that contains in its href attribute the twitter.com URL. Fantastic!

So now it’s time to style! To do so, we will use the Font Awesome web font , which is what we usually use in our themes. Thus, we will include each of the eligible social networks. If you work with CSS in WordPress, take a look at the options that you have to add it to your theme. I share the snippet that we have created:

#menu-social li a::before {
	content: "\f135";
	display: inline-block;
	padding: 0 5px;
	font-family: FontAwesome;
	font-size: 20px;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#menu-social li a[href*="facebook.com"]::before {
	content: "\f09a";
}
#menu-social li a[href*="twitter.com"]::before {
	content: "\f099";
}
#menu-social li a[href*="dribbble.com"]::before {
	content: "\f17d";
}
#menu-social li a[href*="plus.google.com"]::before {
	content: "\f0d5";
}

And here the plot thickens, because if you notice, we add content through the pseudo-elements :after and :before to define the social icon of each link. The great thing about this method is that it is further supported by older browsers (even Internet Explorer 7), which is another point in its favour.

One last question. If a link does not coincide with the predefined in our CSS, it is a good idea to use a default icon like a star, a smiley face … something that at least has support for future services.

Thinking about the UX of our WordPress theme before, during and after

A reflection on why I think this method is the most optimal for the user.

All WordPress theme authors have an important responsibility not only with the final design and the UX of future visitors, but also the user experience of theme administrators. This responsibility is not only present while the user uses our theme; it continues during the Theme Switching.

That is something already discussed; the end is to define the boundaries between theme and plugins features. A specific example: what happens in a theme that includes a custom post type “Portfolio” when we change the theme? Well, the content of this CPT or custom post type is lost, unless the end template has enabled this feature (CPT with the same key.)

It rarely happens. The best in these cases is to work with plugins that are independent of the themes, so we can change the visual part of our WordPress without worrying about whether the content stays or gets lost. In this aspect, Ghost is doing very well to delineate the line themes and templates cannot cross.

A good idea would be to have some predefined CPT within plugins, supported or not by the themes. A clear example of this is what makes Automattic with wordpress.com, where it has been enabled a custom post for “portfolio” that is independent of the theme; therefore the authors of the templates decide whether they support and design those items or not.

Therefore, I personally think that using a social menu in our template, as explained above, will make life easier for our users, and will save time and make our templates and themes more robust and compatible, what do you think?

I hope you find these tips useful. Leave a reply! I would like to know your opinion about these social menu options as WordPress user. Thanks in advance!


About 

Hi! My name is Ricardo Prieto and I work (and write) about web design, layout and user experience at SiloCreativo, where we help people to develop their projects with tutorials, tips and resources.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>