Social Media Field

Overview

The Social Media field renders a group of labeled URL inputs — one per social network — covering the most commonly used platforms. It returns an associative array of network keys and their URL values. Use it to collect all social profile links in one place rather than registering individual Text fields for each network.

---

Field Registration

php

[
    'id'      => 'social_links',
    'type'    => 'social_media',
    'title'   => __( 'Social Media Links', 'your-textdomain' ),
    'subtitle' => __( 'Enter your social profile URLs', 'your-textdomain' ),
    'default' => [
        [ 'platform' => 'github',   'url' => '' ],
        [ 'platform' => 'dribbble', 'url' => '' ],
    ],
]

---

Field Options

Option	Type	Required	Description
id	string	✅	Unique field identifier — used as the option key
type	string	✅	Must be social_media
title	string	✅	Label shown above the field
subtitle	string	—	Smaller descriptive text shown below the label
desc	string	—	Help text shown below the inputs
default	array	—	Default values — keyed by network name, values are URL strings
required	array	—	Conditional logic rules — see Conditional Logic

---

Supported platforms (20 total):

facebook, twitter, instagram, linkedin, youtube, pinterest, tiktok, github, dribbble, behance, reddit, snapchat, whatsapp, telegram, discord, vimeo, twitch, medium, spotify, soundcloud

Return Value

Type: array

Returns an array of row arrays, each with two keys: platform (the network key) and url. Returns an empty array [] when nothing has been saved.

php

$social = themeplus_get_option( 'social_links', [] );
// Returns:
// [
//     [ 'platform' => 'github',   'url' => 'https://github.com/yourhandle' ],
//     [ 'platform' => 'dribbble', 'url' => 'https://dribbble.com/yourhandle' ],
//     [ 'platform' => 'twitter',  'url' => 'https://twitter.com/yourhandle' ],
// ]
//
// Only rows the user has added appear — empty networks are not included.
// Returns [] when no links have been saved.

---

Usage Examples

Rendering social icons — skip empty links

php

$social = themeplus_get_option( 'social_links', [] );

$icons = [
    'facebook'  => 'fa-brands fa-facebook-f',
    'twitter'   => 'fa-brands fa-x-twitter',
    'instagram' => 'fa-brands fa-instagram',
    'linkedin'  => 'fa-brands fa-linkedin-in',
    'youtube'   => 'fa-brands fa-youtube',
    'pinterest' => 'fa-brands fa-pinterest-p',
    'tiktok'    => 'fa-brands fa-tiktok',
    'github'    => 'fa-brands fa-github',
    'dribbble'  => 'fa-brands fa-dribbble',
];

if ( ! empty( $social ) ) {
    echo '<ul class="social-icons">';
    foreach ( $social as $item ) {
        $platform = $item['platform'] ?? '';
        $url      = $item['url'] ?? '';

        if ( ! $url || ! isset( $icons[ $platform ] ) ) {
            continue;
        }

        echo '<li class="social-icons__item">';
        echo '<a href="' . esc_url( $url ) . '" target="_blank" rel="noopener noreferrer" class="social-icons__link social-icons__link--' . esc_attr( $platform ) . '" aria-label="' . esc_attr( ucfirst( $platform ) ) . '">';
        echo '<i class="' . esc_attr( $icons[ $platform ] ) . '"></i>';
        echo '</a>';
        echo '</li>';
    }
    echo '</ul>';
}

Passing social data to a JavaScript widget

php

$social = themeplus_get_option( 'social_links', [] );

$active = array_filter( $social, fn( $item ) => ! empty( $item['url'] ) );

wp_localize_script( 'your-theme-script', 'themeSocialLinks', array_values( $active ) );

Checking for a specific network

php

$social = themeplus_get_option( 'social_links', [] );
$github = '';

foreach ( $social as $item ) {
    if ( ( $item['platform'] ?? '' ) === 'github' && ! empty( $item['url'] ) ) {
        $github = $item['url'];
        break;
    }
}

if ( $github ) {
    echo '<a href="' . esc_url( $github ) . '" class="github-link" target="_blank" rel="noopener noreferrer">';
    echo '<i class="fa-brands fa-github"></i> ' . esc_html__( 'View on GitHub', 'your-textdomain' );
    echo '</a>';
}

Displaying a count of active networks

php

$social       = themeplus_get_option( 'social_links', [] );
$active_count = count( array_filter( $social, fn( $item ) => ! empty( $item['url'] ) ) );

echo '<p>' . sprintf(
    esc_html( _n( '%d social network linked', '%d social networks linked', $active_count, 'your-textdomain' ) ),
    $active_count
) . '</p>';

With a conditional field

php

[
    'id'      => 'show_social_icons',
    'type'    => 'toggle',
    'title'   => __('Show Social Icons', 'your-textdomain'),
    'default' => true,
],
[
    'id'       => 'social_links',
    'type'     => 'social_media',
    'title'    => __('Social Media Links', 'your-textdomain'),
    'required' => ['show_social_icons', '==', true],
],
[
    'id'       => 'social_icon_size',
    'type'     => 'slider',
    'title'    => __('Icon Size', 'your-textdomain'),
    'default'  => 18,
    'min'      => 12,
    'max'      => 36,
    'step'     => 1,
    'unit'     => 'px',
    'required' => ['show_social_icons', '==', true],
],

---

Notes

• Each row has two keys: platform (lowercase network key, e.g. 'github', 'dribbble') and url. Loop over rows directly — there is no associative key by network name.
• Only rows the user has added appear in the saved value — networks not added by the user are absent entirely, not present with empty strings.
• Always use esc_url() when outputting social URLs.
• Use the platform key to map to FontAwesome icon classes or CSS modifier classes consistently.
• For collecting a single custom social URL alongside an icon picker, use a Text field paired with an Icon field instead.