Social Networks Widget

Updated on October 12, 2017

The social networks widget allows you to display your social network links as icons in a widget area/sidebar. It displays a clickable icon for each social network link.

In this article, we’ll explain how to display social network links through the social network widget in the Jupiter WordPress theme.

Social networks widget - front end


Displaying Social Network Links

In order to display social network links in a widget area/sidebar, you’ll need to add the JP – Social Networks widget to a widget area/sidebar, and then configure its settings.

To add the widget:

1From the WordPress left menu, go to the Appearance > Widgets page.

social networks - widget menu

2On the Widgets page, locate the JP – Social Networks widget in the Available Widgets column, and drag and drop it into a widget area. In this example, we chose the Page Widget Area.

social networks - widget page

3Fill out the settings form with the necessary information and click on the Save button. More settings are explained in the next sections.
Settings Description

Title Displays a title at the top of the widget. If left empty, it won’t show anything at the top of the social network links.
Icon Alt Title Sets the title attribute of the icons. When you hover over them, it will be displayed.
Choose Sites Select the social network links you need to display.
URL Sets the URL of the each selected social network link. The full URL with http(s):// needs to be set. For example, https://twitter.com/artbees_design

Configuring the Styling

The Size, Align, Style, Color, and Icons Margin settings allow you to configure social icons styling and layout.

Settings Description

Size Defines the icons’ size (Large, Medium, Small)
Align Defines the icons’ position (Left, Center, Right)
Style Defines the icons’ background and border styles (Circle, Rounded, Simple, Simple Outline, Square Pointed, Square Rounded)
Color Defines the icons’ color (Light, Dark, Custom). If you select Custom, you can choose the color for the icon, hover, border, background, and hover background.
Icons Margin (px) Defines the margin between the icons, for example, 20. There is no need to add px to the margin value.

 


Adding Custom Social Network Links

Beside existing social network links that you can select in the Choose Sites dropdown list, you can also add custom social networks by specifying a number in the “How many custom icons to add?” setting. For each number you set, three setting fields will be added.

[image]

Setting Description

Custom 1 Name Defines name of a custom social network link.
Custom 1 URL Defines the full URL of a custom social network link.
Custom 1 Icon Defines an image source for the icon. You’ll need to add a URL to the image on your server. For example: http://yoursite.com/wp-content/uploads/2017/01/custom-social-icon.jpg
Did this answer your question?