Curious about how to incorporate social media badges into your WordPress site’s sidebar?
Look no further! Having social media badges on your website is an excellent approach to inform your audience about your presence on different social platforms, allowing them to easily find and connect with you.
Throughout this detailed guide, we’ll provide a step-by-step process on how to seamlessly add social media icons to your sidebar in WordPress.
A sidebar on WordPress serves as a secondary space to display content that may interest your readers, such as the latest articles or social media links.
By incorporating social links in your sidebar, you alert your visitors to your social networks, encouraging them to engage and help expand your social reach.
Showcasing your social media can also lend credibility to your brand and act as social evidence of your active engagement and reliability.
Take for instance popular WordPress blogs like WPBeginner, which features social media icons in its sidebar.
Note: It’s important to distinguish social media icons from social share buttons on posts. If you’re looking to implement share buttons, you’ll find our guide on adding social sharing icons to WordPress useful.
Without further ado, let’s dive into the methods to add social media follow icons to your WordPress sidebar. Depending on your WordPress theme and editor, the approach may differ. For quick navigation, use these links:
Method 1: Utilizing the Full Site Editor with Block Themes
If you’re using a block theme, you can easily add social media buttons to your sidebar through the Social Icons block. Note that your theme’s setup may vary—some come with sidebars, some with header patterns resembling sidebars, and others without sidebars at all.
In this example, we’ll use a default WordPress block theme to illustrate how to create and add the Social Icons block to a sidebar that appears across your pages or posts.
To start, navigate to Appearance » Editor in your WordPress admin area.
From here, opt for ‘Templates’. You’ll see a layout enabling template edits for pages and posts.
Select a specific template, let’s say ‘Pages’, and proceed by tapping on the pencil icon, which will bring you to the editor.
For Themes without a default sidebar, creating one is simple. Position your cursor where you want the sidebar and use the ‘+’ button to add a new ‘Columns’ block.
Choose the ’66 / 33′ layout to mimic a classic right sidebar appearance.
Next, distribute the content and columns accordingly, ensuring one column is left empty for the sidebar content.
Add the Social Icons block by clicking the ‘+’ sign within the right-hand column.
Simply add each of your social profiles one by one—the platform options are numerous.
Add links to your social profiles by clicking on the respective icon and inserting the URL.
Customize button sizes using the toolbar, and adjust settings like alignment, link behavior, and labels via the Block Settings panel. Top tip: enable link opening in a new tab to keep visitors on your site.
The Block Styles tab provides style and color customization to match your website’s aesthetics.
Utilize the Dimensions settings to adjust margins and spacings as required.
A call-to-action text above the Social Icons block can highlight the feature and prompt users to connect with you on social media.
Additional sidebar elements, like featured posts or recent comments, can be included as desired.
Save your changes, and voila, your sidebar with social links should now be live on your site.
Creating unique, social-media-equipped sidebars for different pages or posts is made easier with WordPress patterns or reusable blocks, covered in our comprehensive guides on block patterns and reusable blocks.
Method 2: Incorporating Social Media Icons through WordPress Widgets for Classic Themes
For those on classic themes, adding social icons to the sidebar involves widgets. Access widgets via Appearance » Widgets in your dashboard.
Select a widget-ready sidebar area, typically labeled ‘Sidebar’, and use the ‘+’ button to find and add the Social Icons widget.
Place social icons near the top to immediately capture attention. Add your preferred social buttons and insert profile links as shown before.
To customize further, access Block Settings and Styles in the settings menu. Pair with a Paragraph block featuring a call-to-action message. Grouping the Paragraph and Social Icons blocks is recommended for design unity.
When done, hit the ‘Update’ button to apply changes across all sidebars, and enjoy the improved sidebar with social media connections.
Method 3: Employing Custom Social Media Icons with SeedProd for Tailored Themes
SeedProd users can savor heightened customization for social buttons, including crafting buttons for networks not predefined in WordPress and tweaking icon spacing for mobile views.
For SeedProd newbies, installation and activation of the plugin—specifically the Pro version—is required, with the steps outlined in our plugin installation guide.
Once set, head to SeedProd » Theme Builder and edit the ‘Sidebar’ template design.
In the page builder interface, add the Social Profiles block if not already present, and integrate a Text block as your attention-drawing call-to-action.
Customizing the icon appearance is straightforward with the varied tabs: Content, Templates, and Advanced. Add any icon from the extensive library, including custom ones, and tweak the style, alignment, color, and size to your preference.
Experiment with Templates to reshape the icons, and use Advanced settings for style choices, spacing measurements, and animation, ensuring mobile responsiveness when needed.
Once pleased with your social profiles block, save your template, or preview first. Publish, and your customized sidebar adorned with social icons is ready.
If this guide was helpful, consider subscribing to our YouTube Channel for more WordPress tutorials. You can also follow us on Twitter and Facebook.
