How to add social media icons to the WordPress theme ‘Gridspace’

Posted: January 28, 2015 in graffiti living
Tags: , , , ,

gridspace-1000x750

I use the WordPress theme Gridspace by Graph Paper Press on my professional website: jamesgarside.net

By default Gridspace provides support for putting Facebook, Twitter, Vimeo and RSS social media icons in the top menu.

There’s a useful tutorial on this on the Graph Paper Press support page for Gridspace: graphpaperpress.com/support/instructions/?theme=gridspace

You create a menu item for each social media icon and use the CSS Classes option to specify which icon will display, by entering the corresponding class name in the CSS Classes box. The class names are case sensitive: facebook, twitter, vimeo and rss.

But what do you do if you want to add other social media icons such as for linkedin?

Well, you’re screwed.

Just kidding.

After lots of scratching around on the internet I found two ways of doing it — 1) quick and dirty, and 2) officially supported.

Quick and Dirty

The quick and dirty method that I found was to use the Menu Social Icons plugin. It took A LOT of farting around with the CSS to make the icons look right with the ones I was already using. But this is the go to method if you just want social media icons fast and aren’t too fussed about which ones you use.

As I only really needed linkedin, and got it working using this method, this is the current solution used on my site. By which time Graph Paper Press support had responded with the proper way to do it:

Officially Supported

You first need to upload the icons to your WP site. You can find icons online. I recommend this site: http://iconmonstr.com/
You can upload the files through the Media page (Media -> Add new).
Once you have the images create new menu links following the same procedure for adding the social community name as the link CSS class. Finally, paste the CSS for the icon in the Custom CSS panel found in Appearance -> Theme Options following this format (using LinkedIn as an example):
.menu-top-menu li.linkedin a {
background-image: url(‘absolute path to image here);
background-size: cover;
width: 20px;
height: 20px;
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
float: left;
}

Do the same for other icons.

When I’ve time, I’ll switch over to this method.

It took ages to figure out, so I’ve posted the information here in case it’s helpful to anyone using the same theme.

Hope that helps.

Advertisements

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s