Web Font Social Icons WP

Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here or submit ticket on purethemes.ticksy.com . Thanks so much!

Author: Purethemes
Created: 29 October 13
Modified: --
Current Version: 1.0
Documentation Version 1.0

This documentation in latest version is always available on docs.purethemes.net/wfsi


For using this plugin you must be using WordPress version 3.6 or higher. I assume you have your own WordPress installation, so let's get started!

Plugin Installation

The .zip file you downloaded from Theme Forest contains a file named web-font-social-icons.zip, which you need to extract. Installation can be done in two ways:

  1. FTP Upload:
    • Unzip the “web-font-social-icons.zip”
    • Open up your FTP manager and connect to your hosting
    • Browse to wp-content/plugins
    • Upload the web-font-social-icons theme folder.
    • Log Into WordPress and go to Appearance - Plugins
    • Find the Web Font Social Icons and click activate
  2. WordPress Upload:
    • Navigate to Appearance Plugins Add new Upload
    • Follow the instructions on the screen, select the “web-font-social-icons.zip”.
    • Hit Install Now and the plugin will be uploaded and installed.

Activating the plugin

After you have completed the install process, in either of the two ways, you need to activate it.

Log in to the WordPress Dashboard, go to Plugins Installed Plugins and select Web Font Social Icons. Click the Activate button and you can start using the plugin


Shortcodes can be added just by hand, or using the shortcode generator.
You'll find the shortcode generator here:
Here's the shortcode structure for single icon

[pt_social_icon iconsize="small" type="single" service="wordpress" url="http://wordpress.org" ]

If you want to put multiple icons as a list, you need to wrap them in wrapper shortcode

[pt_social_icon] [/pt_social_icon]]
this will render it as a HTML UL list. Example:
[pt_social_icons][pt_social_icon iconsize="standard" service="twitter" url="" ][pt_social_icon iconsize="standard" service="wordpress" url="" ][pt_social_icon iconsize="standard" service="facebook" url="" ][pt_social_icon iconsize="standard" service="linkedin" url="" ][pt_social_icon iconsize="standard" service="steam" url="" ][pt_social_icon iconsize="standard" service="tumblr" url="" ][pt_social_icon iconsize="standard" service="github" url="" ][/pt_social_icons]
But of course you don't have to do it by hand, there's a nifty TinyMCE shortcode button for easy selection of icons :)

Shortcode window

To set colors for icons used in shortcode go to Appearance -> Web Fonts Social Icons, and choose your color scheme using color picker

Go to the Appearance Widgets

, you'll see a list of widgets, you can drag and drop the 'Webfonts Social Icons Widget' to the sidebar you want.

Widget settings:
Each widget can have different color scheme! Check the video! Widget
There are two actions in widget for which you can use to customize the widget output: Snippet you can use to add some text before the icons in widget:
function ModifyWfsiWidget() {
    echo 'We can add some text here!';
add_action( 'before-wfsi-widget', 'ModifyWfsiWidget', 10, 0 );

Once again, thank you so much for purchasing this plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.