How to Add Social Media Icons to Your WordPress Sidebar
If you have a social media presence (and who doesn’t, these days), you want to use it to full effect. Whatever line of work you’re in, there may be content that’s simply more effective when shared on social media, or content that is not yours and cannot be hosted on your website but which you find relevant and interesting for your visitors. Social media can bring more visitors to your website, and there is a multitude of techniques you can use to promote your website on social networks. But this is a two-way street: your website could help build your social community. Placing your social icons in your sidebar will bring them into focus for your visitors.
But should you do it? This, and how to do it, is what we will be discussing in this article.
Qode Themes: Top Picks
View Collection
A sidebar is a common type of WordPress widget-ready area. It appears, as the name suggests, on the side of the page, separate from the main body of the page. A sidebar is normally used to house widgets which contain information relevant to your website visitors no matter what specific content they are currently viewing, such as contact information, special offers, search bars, highlights, and so on.
Adding social icons to your sidebar will keep them in your visitors’ focus and right at their fingertips at all times, encouraging traffic to your social media channels. Don’t want to host large video files in your website’s media library? Direct your visitors to your YouTube or Vimeo channel. Want to give your visitors a curated feed of industry news? Put a link to your Twitter feed on your sidebar. Want to engage your users in a direct discussion without their having to log in? Try showing them the way to your Facebook Group directly from your sidebar.
Not to mention that internet users have come to expect icons in sidebars. They will know where to find them without your making them extra conspicuous. Furthermore, the icons will not clash with your website style visually, whatever they may look like, and will not get lost in the main body of your page’s content.
For this demonstration, we will be using our Bridge theme. While themes can differ among each other, most of them will have a sidebar widget area, and the procedure for getting your social media icons into your WordPress sidebar works much the same: by dragging the correct widget to the sidebar widget area and then configuring it to your liking.
If you are using our flexible Bridge theme, you should have no trouble adding social icons to your sidebar. Bridge even has a dedicated widget for that. We will be showing how to do it using a post. We have randomly generated some content to populate the main body of the post. But first, you need to enable the sidebar on your theme. To do that, you need to be editing a post or page in Gutenberg. If you are using Elementor, you still need to switch to Gutenberg or the Classic editor briefly in order to change the layout of the page to enable the sidebar.
Scroll all the way down and find the Qode Sidebar menu and select a layout which shows the sidebar. The Default layout does not, but you can select the width of the sidebar in relation to the main body of text and the orientation. We went with Sidebar 1/4 right, meaning that the sidebar will take up a quarter of space on the right-hand side, but you can select a left-hand side sidebar, and a third-page width instead of a fourth.
Next, you want to make sure the social icon appears in the sidebar. To configure your sidebar, navigate to Appearance/Widgets using the left-hand side menu on your WordPress dashboard.
After that, you need to drag an instance of the Qode Social Icon widget to the Sidebar and place it where you want it. The widgets placed there will appear in order from top to bottom. We want our social widget at the top, so that’s where we will drag it to.
You now need to configure this widget. For this demonstration, we will select the Circle icon type, but you can choose a different one, depending on your website’s design, the Font Elegant icon pack (you can also use Font Awesome if you prefer it), and the Twitter icon from the Font Elegant Icon dropdown menu. You need to enter the Custom Size and Custom Shape Size you like (10 and 13 pixels for us, respectively). We will also enter our Twitter feed‘s hyperlink into the Link field and change the Target to New Window, which will open the link in a new window. You can, of course, select any social network and icon you like. The Qode Social Icon widget also contains a slew of design options which go beyond the scope of this demonstration, but the multitude of size, colour and border settings makes the widget very versatile and adaptable to any style. You then need to Save your Qode Social Icon settings and so update the Sidebar.
And our Twitter feed icon is right there, at the top of our sidebar!
But what if you want to add social icons with accompanying text as items in your sidebar? For that effect, you can use the Qode Icon With Text widget. Again, in order for the theme to show the sidebar, you need to enable it. Open a post or page in Gutenberg, scroll all the way down. Find the Qode Sidebar menu and select a layout, such as Sidebar 1/4 right, for instance, which shows the sidebar.
Navigate to Appearance/Widgets using your WordPress dashboard right-hand side menu. Next, find the Qode Icon With Text widget, and drag it to the top of the Sidebar widget.
This widget now needs to be configured. We will use this widget to link to our Instagram profile, but it can be used for virtually any social network. For Box type, we will select Normal, for Icon Pack we will select Font Elegant, and for the Font Elegant Icon social_instagram. For Icon Type we will select Normal, for Icon Position Left, and for Content Alignment right. You can, of course, set it up however you like, with Font Awesome icons, or different icon types, and so on.
For Title, we will type Visit us on Instagram, and change the Title Tag to p. The title can be anything you like, but we find any title tag apart from p too large for this particular application. In order to make the link work, you need to input your profile URL in the Link field (we will go with our Instagram profile) and Our Instagram for Link Text.
We will leave the other options as they are, but you can make the sidebar into whatever fits your website’s layout and style.
And this is how your social icon will appear at the top of our sidebar.
Of course, you can create this type of link for however many social networks you like. This widget also supports icon upload, so you can make it work for your website‘s style.
As always, we suggest you use a theme‘s in-built functionality for anything you want your website to do. But if the theme you are using does not support the effect you want, you can nearly always make do (or more than make do) with a plugin. The plugin we will be using is Social Icons Widget & Block. You need to install and activate this plugin.
This plugin will give you widgets and blocks which you can use to display your social icons throughout your site, but we will show you how to display them on your sidebar. To do that, you will need to navigate to Appearance/Widgets.
On the left-hand side, in the Available Widgets section, find the Social Icons by WPZOOM and drag it to where you want it. We want our social icons at the top of the sidebar, so that‘s where we‘ll place it, but you can choose whichever position you want.
Next, you need to configure the widget. For the Title, we will put down Follow us on social media!, but you can choose any snappy title you want. We will not touch any of the other settings. Suffice it to say that the plugin offers several size and colour options which you can use to make your social icons fit your website‘s layout.
Scrolling down, you can choose which icons to display and in which order. The default values are Facebook, Twitter, and Instagram. To add another one, click Add more.
You will get another widget section with the WordPress icon. Say we want to add our Pinterest profile. We will add our URL next to the icon, and it will automatically change to a Pinterest one instead. Finally, you need to Save all your changes, of course.
And just like that, your social media will be advertised for your website visitors.
In Conclusion
As you have seen, adding social media icons to your WordPress sidebar takes no time at all. You may choose to use your theme‘s built in options, as is always our first suggestion, or opt for a plugin, but in any case it takes little more than a drag, a drop and a few clicks of the mouse. So why don‘t you try it? Your social media-using visitors will appreciate it.
