web_social_icons Shortcode

The web_social_icons shortcode displays the current profiles from Settings → POM Theme → Design system → Brand → Social networks. Links, ordering, icons and optional visible names belong to those shared settings, not to shortcode content. It continues to render when the Legacy Page Builder editor is disabled.

The attributes below match the current Page Builder controls and public output. Use raw syntax only for reviewed content that cannot be maintained through the visual controls.

Usage

[web_social_icons]

[web_social_icons icons_style="1" icon_color="15" background_color="2" el_id="footer-profiles" el_class="mt-1 align-left"]

Attributes

Attribute Default Accepted values Purpose
icons_style 2 2 Default, 1 Rounded Selects the existing component appearance.
icon_color Empty Palette number 1–15, empty or 0 Adds text-main-N to each link; empty or 0 inherits.
background_color Empty Palette number 1–15, empty or 0 Adds bg-main-N to each link; empty or 0 leaves the component background unchanged.
el_id Empty Unique HTML ID Identifies the outer icons container.
el_class Empty Space-separated CSS classes Adds existing helpers to the outer container, including alignment or spacing.

There is no device_visibility parameter. Use existing visibility classes in el_class when needed. Theme default alignment is centered; align-left, align-center and align-right are available helper classes.

Shared settings and loading

Each usable profile needs a safe URL and an available theme library icon. Display network name enables the visible name. Network title supplies the accessible link name, falling back to Network name, the URL hostname or the icon name. Links open in a new tab with nofollow noopener noreferrer.

Invalid or incomplete profiles are omitted. When no valid profiles remain, the shortcode returns no wrapper and does not require its stylesheet. Otherwise it loads only the existing conditional Social icons stylesheet, including the selected component override, and no JavaScript. No inline presentation is added.

Changes to global profiles apply on the next uncached render without editing this shortcode. Clear page caches when verifying a settings change.

Verification

Preview both styles on mobile and desktop. Check palette colors, optional names, link destinations and helper classes. Remove an entry's URL temporarily only on a test site to confirm that incomplete profiles disappear.

For native editing, use Social Icons in Gutenberg; it uses the same live profiles and frontend structure.