Social Media Field

A pre-built set of social network URL inputs for collecting all social profile links in one field.

Last updated: March 11, 2026

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' => [
        'facebook'  => '',
        'twitter'   => '',
        'instagram' => '',
        'linkedin'  => '',
        'youtube'   => '',
        'pinterest' => '',
        'tiktok'    => '',
        'github'    => '',
    ],
]

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

Return Value

Type: array

Returns an associative array of network keys and URL strings. Networks left empty by the user return an empty string for that key.

php

$social = themeplus_get_option( 'social_links', [] );
// Returns:
// [
//     'facebook'  => 'https://facebook.com/yourpage',
//     'twitter'   => 'https://twitter.com/yourhandle',
//     'instagram' => '',
//     'linkedin'  => '',
//     ...
// ]

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',
];

if ( ! empty( $social ) ) {
    echo '<ul class="social-icons">';
    foreach ( $icons as $network => $icon_class ) {
        $url = $social[ $network ] ?? '';
        if ( ! $url ) 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( $network ) . '" aria-label="' . esc_attr( ucfirst( $network ) ) . '">';
        echo '<i class="' . esc_attr( $icon_class ) . '"></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( $url ) => ! empty( $url ) );

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

Checking for a specific network

php

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

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 ) );

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

Always use esc_url() when outputting social URLs in HTML — never output raw URL strings directly.
Use array_filter( $social ) to get only the networks that have a non-empty URL before looping.
The array keys are lowercase network names — use them to map to icon classes, CSS modifiers, or aria-label values consistently.
For collecting a single custom social URL alongside an icon picker, use a Text field paired with an Icon field instead.

Quick Links