Healing Arts Web Design

Freebies, Tutorial, WordPress

WordPress Custom Share Using Icomoon Fonts

This is a short tutorial on how to implement a custom share bar using icon fonts from icmoon.io and lightweight code placed in functions.php. This is really for WordPress developers who want a framework they can customize themselves. If you’re not a developer, it works well out of the box if you are brave enough to implement it yourself.

Benefits

  • Icon fonts can be easily customized for each project with CSS
  • No images to mess with
  • Responsive layout
  • Icons show up crisp and clear on retina devices
  • Super lightweight – no messy javascript, php or tons of markup in your code
  • If you use this on custom post type single templates, it will automagically grab the name of the post type – “Share this Recipe” for example
  • Supports Facebook, Twitter, Google Plus, Email, and Linked In (you need to remove comments in the functions code for Linked In share)

There are 4 steps outlined below, 5 steps if you want to take the customization of the icons further (recommended!). I haven’t gotten around to making this a plugin yet, but that may happen soon. Until then, follow these steps.

1. Download fonts and add to correct folder

Download icmoon-font.zip

Unzip and place the contents into a folder that the CSS below will reference. In my example it is a folder name “fonts” which shares the same directory as the CSS file.

 

2. Add code to functions.php

3. Add your own CSS, or use the following for base styles

4. To display on front end: Add this template tag to single.php or page.php

That’s it!

Check out the bottom of this post below my author profile for a preview of what it should look like (roughly). Go wild and customize to your heart’s content. A quick side note – Facebook and Twitter et al have been known to deprecate APIs in the past, so there’s no telling when support for the sharing features that this function uses will stop. Just a heads up!

Get More Helpful Content

Sign up for our Inspired Newsletter to get helpful content created just for our subscribers.

Sending

♥ We don't spam or share email addresses, ever.

About the Author:

David is an experienced web designer and WordPress developer who runs Healing Arts Web, offering quality custom websites to small businesses and teachers. He is also a musician, avid disc golfer and espresso enthusiast.

2 comments

  1. Amit says:

    What if i want to do this in the Genesis Framework ? Where to add the code at “4. To display on front end: Add this template tag to single.php or page.php”

    • David Ryan says:

      Amit, you should be able to drop the code into your template after the_content(); is called in your single.php file.

Leave a Comment

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