Social Networks Widget

Last Updated on

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

In this article


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:

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

social networks - widget menu

2
On 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

3
Fill 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
x
Note: The widget is ready. Now you’ll need to add the Page widget area/sidebar to a page so you can see the widget. If you are not familiar with adding a widget area/sidebar to a page, read the Adding a sidebar article.

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.

 


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
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket