BACK TO TOP

How to Add Social Media Icons to Your WordPress Sidebar

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
Bridge New Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

Why Do I Want Social Media Icons in My WordPress Sidebar?

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.

How to Add Social Icons to the Sidebar Using the Bridge WordPress Theme

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.

Sidebar Layout

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.

Sidebar Social Icon

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.

Sidebar Layout

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.

Qode Icon With Text 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.

Qode Icon With Text Widget Settings

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.

Qode Icon With Text Widget Settings

And this is how your social icon will appear at the top of our sidebar.

Qode Icon With Text Preview

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.

How to Add Social Media Icons to Your WordPress Sidebar Using a Plugin

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.

Social Icons WPZOOM

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.

Socail Icons by WPZOOM Setings

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.

WPZOOM Add Social Icon

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.

WPZOOM Add Pinterest Icon

And just like that, your social media will be advertised for your website visitors.

WPZOOM Icons Preview

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.

Post your comment

Comments0