Redux

# Social Profiles field

The Redux Social Profiles extension easily allows one to create and display links to their social media through code and/or an included widget.

Table of Contents

# 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 Widgets 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 from FontAwesome 6x (opens new window). The icons and their IDs are as follows.

Name 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 facebook
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 google
Google Plus google-plus
Google Plus (square icon) google-plus-square
Hacker News hacker-news
HTML5 html5
Instagram instagram
Joomla joomla
JS Fiddle jsfiddle
LinkedIn linkedin
LinkedIn (square icon) linkedin-square
Linux linux
Max CDN maxcdn
OpenID openid
Page Lines pagelines
Pied Piper pied-piper
Pied Piper alt pied-piper-alt
Pinterest pinterest
Pinterest (square icon) pinterest-square
QQ qq
Rebel rebel
Reddit reddit
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 twitter
Twitter (square icon) twitter-square
Vimeo (square icon) vimeo-square
Vine vine
VK vk
Weibo weibo
Weixin weixin
Windows windows
WordPress wordpress
Xing xing
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 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:

array(
    '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
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', 'your-textdomain-here' ),
        '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 fanboys), label, and default state.

'icons' => array(
    array (
        'id'      => 'apple',
        'enabled' => true,
        'name'    => esc_html__( 'CrApple', 'your-textdomain-here' ),
        'label'   => 'Enter username:',
    )
)

# Example Config

The following sets up the basic social profile field without the additions or alterations specified above.

Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
    'id'        => 'opt-social-profiles',
    'type'      => 'social_profiles',
    'title'     => esc_html__( 'Social Profiles', 'your-textdomain-here' ),
    'subtitle'  => esc_html__( 'Click an icon to activate it, drag and drop to change the icon order.', 'your-textdomain-here' ),
) );

# Example Usage

# 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 ( isset( $arr['enabled'] ) && !empty( $arr['enabled'] ) ) {
        $id     = $arr['id'];
        $url    = $arr['url'];
        $icons .= '';
        $icons .= '</pre><ul><li class="' . $id . '"><a href="' . esc_attr( esc_url( $url ) ) . '" target="_blank"><i class="' . esc_attr( $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()

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.

Function Parameters in Order

Parameter Type Default Description
opt_name string Required. The opt_name specified in your arguments
id string Required. ID of the social profile field whose information is to be rendered.
echo bool true Optional. When set to true, the function automatically echos the rendered HTML. When set to false, the HTML is returned.
a_class bool Optional. Sets the passed class name to the tag of the rendered icon HTML.

TIP

The rendered icon will be its 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( 'OPT_NAME', 'facebook', false );

echo $html;

// Result:
// <a class="" href="https://www.facebook.com/my_facebook_name">
//     <i class="fa fa-2x fa-facebook" style="color: #3b5998; background-color: transparent;" title=""></i>
// </a>

# redux_social_profile_value_from_id( )

This function returns the specified value data of the specified social profile ID.

Function Parameters in Order

Parameter Description
opt_name Required. The opt_name specified in your arguments
id Required. ID of the social profile field whose information is to be rendered.
value Required. 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

// Example assumes Facebook social profile is enabled and URL properly filled out.
$url = redux_social_profile_value_from_id( 'OPT_NAME', 'facebook', 'url');

echo 'Facebook URL: ' $url;

// Result:  
// Facebook URL: https://www.facebook.com/my_facebook_name

← Tabbed →