Puro themes turn menu links to social networks into icons. Create a menu of links and assign it to your theme’s social menu location. In a block theme, use the core Social Icons block.
Classic Admin Screens
Social menu locations differ by theme.
- The Puro theme: Social Network Icon Menu. It shows in the footer. Top-level items only.
- Ultra: Top Bar Social Menu and Bottom Bar Social Menu. Top-level items only. Ultra also shows icons for top-level items without sub-items in its other menus.
- Polestar: Footer Menu. Top-level items only.
- Go to AppearanceMenus and click create a new menu.
- Enter a name in Menu Name and click Create Menu.
- Open Custom Links in the left column.
- Enter the address of your profile page in URL, for example
https://twitter.com/purothemes. - Enter any text in Link Text. Polestar shows the text for links it has no icon for. The Puro theme and Ultra hide the text of icon links.
- Click Add to Menu. Repeat for each network.
- Under Menu Settings, check your theme’s social menu location under Menu location.
- Click Save Menu.
Customizer
- Go to AppearanceCustomizeMenus and click Create New Menu.
- Enter a Menu Name and click Create Menu.
- Click Add Items and open Custom Links.
- Enter the profile address in URL and any text in Link Text. Click Add to Menu.
- Under Menu Locations, check your theme’s social menu location.
- Click Publish.
Block Themes
A block theme has no social menu location. Use the Social Icons block instead. It has its own icons, so the theme lists below do not apply.
- Go to AppearanceEditor and open a template, such as the footer.
- Click the block inserter and add Social Icons.
- Click the add button in the block and choose a service.
- Select the icon and enter the address in Enter social link.
- Click Save.
How Classic Themes Pick the Icon
The theme picks the icon from the domain in the URL. The link must contain that domain, such as facebook.com. In Ultra and the Puro theme, an RSS link must contain /feed/, for example https://example.com/feed/. A link with no matching domain shows a generic link icon in the Puro theme, and its plain text in Polestar and Ultra.
Polestar
behance.net codepen.io delicious.com deviantart.com digg.com dribbble.com facebook.com flickr.com foursquare.com github.com instagram.com linkedin.com mastodon.social pinterest.com reddit.com soundcloud.com stackexchange.com stackoverflow.com tumblr.com twitter.com vimeo.com vine.co vk.com weibo.com wordpress.com xing.com yelp.com youtube.com
Ultra
/feed/ (RSS) behance.net codepen.io delicious.com deviantart.com digg.com dribbble.com facebook.com flickr.com foursquare.com github.com instagram.com linkedin.com pinterest.com reddit.com snapchat.com soundcloud.com stackexchange.com stackoverflow.com tumblr.com twitter.com vimeo.com vine.co vk.com weibo.com wordpress.com xing.com yelp.com youtube.com
The Puro Theme
/feed/ (RSS) 500px angel.co (AngelList) behance.net bitbucket.org codepen.io delicious.com deviantart.com digg.com dribbble.com facebook.com flickr.com foursquare.com github.com instagram.com linkedin.com pinterest.com reddit.com skype: (Skype) callto: (Skype) slack.com soundcloud.com stackexchange.com stackoverflow.com stumbleupon.com trello.com tumblr.com twitch.tv twitter.com vimeo.com vine.co vk.com weibo.com wordpress.com xing.com yelp.com youtube.com
The Twitter icon matches twitter.com links. A link to x.com gets no icon.
To place social icons inside page content, use the Social Media Buttons Widget from the SiteOrigin Widgets Bundle.