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.
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.
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.
Customizing Social Icons Widgets in Gutenberg
By default, the “Social Icons” block will show few icons with WordPress icon as first.
You can customize the icons similar to any other Gutenberg blocks.
- 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.
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.
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.
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”.
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.
We also don’t see any possibility of resolving the error and bring the block back.
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.
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.