The Redux Social Profiles extension easily allows one to create and display links to their social media through code and/or an included widget.
Getting Started
To understand how to use extensions, you should read this article on Loading Extensions. To shortcut the process, you should use the Redux Generator. Please be aware that a working knowledge of PHP and CSS is required to properly use this field. Should you not be familiar with one or the other (or both), please refer to the basic guides to get you started: Getting Started with PHP, CSS Introduction.
Arguments
| Name | Type | Default | Description |
| type | string | ‘social_profiles’ | Value identifying the field type. |
| id | string | Unique ID identifying the field. Must be different from all other field IDs. | |
| title | string | Displays title of the field. | |
| subtitle | string | Subtitle display of the field, situated beneath the title. | |
| desc | string | Description of the field, appearing beneath the field control. | |
| class | string | Appends any number of classes to the field’s class attribute. | |
| compiler | bool | false | Flag to run the compiler hook. More info |
| widget_msg | string | Go to the <a href=”%s”>Widgets</a> page to add the Redux Social Widget to any active widget area. | Message to display at the top of the field to inform the user of the extensions widget option. Use the %s variable to include a link to the widgets area. |
| show_widget_msg | bool | true | Flag to determine if the widget message is to displayed, or not. |
| include | array | Optional. Array of default icons to show, instead of the entire default array. See “The Include Argument” below. | |
| icons | array | Optional. Array of arrays specifying custom profiles not included in the default set, or to edit existing profiles. See “Adding/Editing Additional Icons” below. | |
| hint | array | Array containing the content and optional title arguments for the hint tooltip. More info |
The Include Argument
The Social Profile extension includes 82 default social profile icons. The icons and their IDs are as follows.
| Icon | ID |
| ADN | adn |
| Android | android |
| Apple | apple |
| behance | behance |
| behance (square icon) | behance-square |
| Bitbucket | bitbucket |
| Bitbucket (square icon) | bitbucket-square |
| Bitcoin | bitcoin |
| Codepen | codepen |
| CSS3 | css3 |
| Delicious | delicious |
| Deviantart | deviantart |
| Digg | digg |
| Dribbble | dribbble |
| Dropbox | dropbox |
| Drupal | drupal |
| Empire | empire |
| Facebook (square icon) | facebook-square |
| Flickr | flickr |
| FourSquare | foursquare |
| git | git |
| git (square icon) | git-square |
| github | github |
| github alt | github-alt |
| github (square icon) | github-square |
| git tip | gittip |
| Google Plus | google-plus |
| Google Plus (square icon) | google-plus-square |
| Hacker News | hacker-news |
| HTML5 | html5 |
| Joomla | joomla |
| JS Fiddle | jsfiddle |
| LinkedIn (square icon) | linkedin-square |
| Linux | linux |
| MaxCDN | maxcdn |
| OpenID | openid |
| Page Lines | pagelines |
| Pied Piper | pied-piper |
| Pied Piper alt | pied-piper-alt |
| Pinterest (square icon) | pinterest-square |
| Rebel | rebel |
| Reddit (square icon) | reddit-square |
| Ren Ren | renren |
| Share alt | share-alt |
| Share (square icon) | share-alt-square |
| Skype | skype |
| Slack | slack |
| Sound Cloud | soundcloud |
| Spotify | spotify |
| Stack Exchange | stack-exchange |
| Stack Overflow | stack-overflow |
| Steam | steam |
| Steam (square icon) | steam-square |
| Stumble Upon | stumbleupon |
| Stumble Upon (circle icon) | stumbleupon-circle |
| Tencent Weibo | tencent-weibo |
| Trello | trello |
| Tumblr | tumblr |
| Tumblr (square icon) | tumblr-square |
| Twitter (square icon) | twitter-square |
| Vimeo (square icon) | vimeo-square |
| Vine | vine |
| VK | vk |
| Weixin | weixin |
| Windows | windows |
| WordPress | wordpress |
| Xing (square icon) | xing-square |
| Yahoo | yahoo |
| Yelp | yelp |
| YouTube | youtube |
| YouTube (play icon) | youtube-play |
| YouTube (square icon) | youtube-square |
By default, the extension offers all 82 to the user. This doesn’t mean you must offer each and every one. Using the include argument, you may specify which profile icons you’d prefer to offer by assigning an array of existing icons IDs. For example, let’s say you’d like to offer only Facebook, Twitter, LinkedIn, and Google Plus. The include argument would look as follows:
include = array('facebook', 'twitter', 'linkedin', 'google-plus')
Adding/Editing Additional Icons
It’s easy to add additional (or edit existing) social profile icons. Each profile contains the following arguments:
| Name | Type | Default | Description |
| id | string | Unique id of the profile. | |
| icon | string | Font Awesome icon class (cheatsheet) of the icon to display. Icon classes from other sets may be used, provided the icon set is properly installed and enqueued. | |
| enabled | bool | false | Flag to set the default state of the social profile. |
| name | string | Display name of the social profile | |
| color | string | Hex or RGBA string of the icons color. | |
| background | string | Hex or RGBA string of the icons backcolor. | |
| label | string | Link URL | Optional. Text to appear over the URL input box. This is useful should you want to specify a user name instead of a full URL. |
| url | string | Optional. URL of the social profile. |
The following example would add a PayPal profile to the social profile icon set:
'icons' => array(
array (
'id' => 'paypal',
'icon' => 'fa-paypal',
'enabled' => false,
'name' => __ ( 'PayPal', 'redux-framework-demo' ),
'background' => '',
'color' => '#1769ff',
'url' => '',
)
)
The icons argument may also be used to edit profiles from the default set. In this instance, you’d need only specify the argument you’d like to alter. The following example would alter the Apple profile by changing the name (with apologies in advance to Mac fan boys), label, and default state.
'icons' => array(
array (
'id' => 'apple',
'enabled' => true,
'name' => __ ( 'CrApple', 'redux-framework-demo' ),
'label' => 'Enter username:',
)
)
Example Declaration
The following sets up the basic social profile field without the additions or alterations specified above.
array(
'id' => 'opt-social-profiles',
'type' => 'social_profiles',
'title' => 'Social Profiles',
'subtitle' => 'Click an icon to activate it, drag and drop to change the icon order.',
),
Example Usage
The Widget
Using the social profiles widget redefines easy. In the widget area of WordPress, add the Redux Social Profiles widget to the sidebar of your choice, and set the desired title. The only icons that will appear in the widget’s frontend will be the enabled social profiles.
Code
The extension’s return value is an array of key/pair values. The key contains the profile’s index key, while the value contains the array of the profiles arguments. It will be necessary to use a for/each loop to extract the values (Please remember to replace redux_demo with your own opt_name argument). The following code returns only the saved values. For this example to have any real value, you’ll need to write the appropriate HTML, or use one of the helper functions below.
global $redux_demo;
foreach ($redux_demo['opt-social-profiles'] as $idx => &arr) {
echo 'Profile ID: ' . $arr['id'];
echo 'Enabled: ' . $arr['enabled'];
echo 'Icon: ' . $arr['icon'];
echo 'Name: ' . $arr['name'];
echo 'URL: ' . $arr['url'];
echo 'Color: ' . $arr['color'];
echo 'Background: ' . $arr['background'];
}
// Or do the following for full icon rendering
foreach ($redux_demo['opt-social-profiles'] as $idx => &arr) {
if ($arr['enabled']) {
$id = $arr['id'];
$url = $arr['url'];
$icons .= '';
$icons .= '</pre><ul><li class="' . $id . '"><a href="' . $url . '" target="_blank"><i class="' . $arr['icon'] . '"></i></a></li></ul><pre>';
}
$output = '</pre><ul class="icons">';
$output .= $icons;
$output .= '</ul><pre>';
}
Helper Functions
The Social Profiles extension includes two helper functions.
redux_render_icon_from_id ($opt_name, $id, $echo, $a_class)
This function, based on the echo parameter will either echo a fully rendered icon, or return the HTML for use with your own rendering purposes.
The first parameter, $opt_name is required and needs to be the opt_name specified in your Redux Framework arguments.
The second parameter, $id is also required, and is the ID of the social profile whose information is to be rendered. This is best used in conjunction for a for/each loop, as shown above.
The third parameter, $echo is optional and defaults to true. When set to true, the function automatically echos the rendered HTML. When set to false, the HTML is returned.
The forth parameter, $a_class is optional. it will add the passed class name to the a tag of the rendered icon HTML.
NOTE: The rendered icon will be it’s normal small size. It’s up to you, the developer, to style the icon via CSS as desired.
Usage
// Please remember to replace 'redux_demo' with your project's unique opt_name.
// Example assumes Facebook social profile is enabled and URL properly filled out.
$html = redux_render_icon_from_id('redux_demo', 'facebook', false);
echo $html;
// Result:
// <a class="" href="http://www.facebook.com/my_facebook_name">
// <i class="fa fa-facebook" style="color: #3b5998; background-color: transparent;" title=""></i>
// </a>
redux_social_profile_value_from_id ($opt_name, $id, $value)
This function returns the specified value data of the specified social profile ID.
The first parameter, $opt_name is required and needs to be the opt_name specified in your Redux Framework arguments.
The second parameter, $id is also required, and is the ID of the social profile whose information is to be rendered. This is best used in conjunction for a for/each loop, as shown above.
The third parameter, $value is required, and is the value of the social profile for which whose data you would like returned. Value options include id, icon, enabled, name, color, background, label, or url.
Usage
// Please remember to replace 'redux_demo' with your project's unique opt_name.
// Example assumes Facebook social profile is enabled and URL properly filled out.
$url = redux_social_profile_value_from_id('redux_demo', 'facebook', 'url');
echo 'Facebook URL: ' $url;
// Result:
// Facebook URL: http://www.facebook.com/my_facebook_name