How to Add and Customize Social Icons in WordPress?

WordPress has a boundary for plugin and theme developers. This helps not to mix up the theme functions with plugin functions. It helps a lot when changing a theme that it only affects the appearance and not the functions. However, many popular themes use social follow and sharing icons as part of theme templates. It also makes sense not to install additional social plugin to improve speed and privacy. Finally, WordPress included a social icons widget as part of Gutenberg editor from version 5.4. in this article, let us explore how to insert social icons in WordPress site.

Related: How to insert and customize social icons in Weebly?

Social Sharing and Follow Icons

Social icons have two functions – one is allowing users to share the page and other is allowing users to follow your social profiles. Social follow icons are simple and contain a static profile URL. However, sharing icons need some script to include the current page URL when user clicks on it for sharing. It also needs to pick up the featured image and description to create a widget for sharing (like open graph in Facebook or Twitter cards).

Now, you know the difference between sharing and follow social icons. From the usability perspective sharing icons should be on the same place on the site layout while follow icons need to be a widget user can insert wherever they want.

Related:  Simple Social Sharing Icons Widget for Weebly

Insert Social Icons in WordPress

WordPress introduced a Social Icons widget in version 5.4. However, the name “Social Icons” may confuse you. It is a simple block of social follow icons you can insert anywhere on your post or page and add your social profile URLs..

  • First, make sure to update your WordPress version to 5.4 or later and use Gutenberg editor or plugin.
  • When you are in Gutenberg editor, click on “Add Block” + icon.
  • Type “social” and find “Social Icons” block under “Widgets” section.
  • Click on “Social Icons” block to insert on your content.
Insert Social Icons in WordPress
Insert Social Icons in WordPress

Customizing Social Icons Widgets in Gutenberg

By default, the “Social Icons” block will show few icons with WordPress icon as first.

Social Icons Block in Gutenberg
Social Icons Block in Gutenberg

You can customize the icons similar to any other Gutenberg blocks.

Customizing Social Icons Block in WordPress
Customizing Social Icons Block in WordPress
  • Click on the icon to add your social profile link for that icon.
  • You can change the label on the “Block” settings sidebar. Label is useful for visually challenged people to use in the screen reader.
  • You can add custom CSS class under the “Advanced” option.
  • Move the arrow in the block to move the selected icon left or right. This way you can adjust the position of the icons as you like.

When you click outside the block, only the icons with the URL will be visible. You can add additional icons by clicking on the + button within in the social icons blocks. It works like a block inside a block (like columns block). It also allows you to search the social icon among the available icons.

Search Social Blocks
Search Social Blocks

In addition, you can also insert custom links using “Link” block. Since each icon is a block, you can remove the unused social icons from the widget. We recommend you to remove unused icons to keep the backend code clean.  

Related:  3 Ways to Customize Right Click Menu in Windows 10

Changing Display

When you are done with adding profile links, you have an option to align the icons left, right or center. In addition, you can change the icons style by choosing one of the available options.

Change Social Icons Style
Change Social Icons Style

Current social icons widget has three styles:

  • Default – icon inside a filled circled
  • Logos Only – shows only brand logo without filling
  • Pill Shape – change the style to oval pill share with icons and fill

We hope in future there would be more options coming to style your icons.

Reusing Social Icons

The best part is that you can click on the three dots settings and include the social icons to include in “Reusable Blocks”.

Add to Reusable Blocks
Add to Reusable Blocks

You can insert the reusable social icons block anywhere on your site, without the need of recreating every time.

Bug in Viewing HTML Code

At this moment, you can’t get the HTML code of the social widget and it shows an unresolvable error.

  • Click on the three dots settings icon on the social icons block and select “Edit as HTML”.
  • Again, click on the three dots button and select “Edit Visually” to put the icons back visually.

Unfortunately, the block has some bug and will show you invalid content error when toggle HTML and visual modes.

Social Icons Block Error

We also don’t see any possibility of resolving the error and bring the block back.

Error When Toggling HTML and Visual Code
Error When Toggling HTML and Visual Code

We hope this bug will be resolved in future versions. Because, you can use the HTML in sidebar or footer widget if that works.

Inserting Social Sharing Icons

WordPress has no default options for inserting social sharing icons on your site. If your theme does not have in-built sharing icons, the only way is to looks for third-party plugins and you have plenty available for free as well as premium. One of our favorites is the premium easy social sharing buttons which you can purchase $22. If you want to install a free plugin, check out this list of free social plugins to find suitable one for you.

Related:  All You Should Know About WordPress Plugins?

As mentioned, it does not make sense to have social sharing block in Gutenberg as it is not convenient to insert the icons on every post.

Recommended Articles:

Leave a Comment