1. Home
  2. Docs
  3. Theme Settings
  4. Add Social Buttons

Add Social Buttons

This section is located in your WordPress Dashboard under “Appearance-> Customize-> Attesa Theme Options-> Social Buttons”. In this section it is possible to activate the social buttons that we prefer to show and the possibility to choose whether to open the links on the same window or on a new one.

To activate a social button (for example Facebook) it will be sufficient to write the link of your Facebook page and the button will be automatically active.

Where to show social buttons

It is possible to show social buttons in various places on the website:

  • Top bar
  • Header
  • Float
  • Footer
  • Attesa Social Buttons (widget)

To activate the display of social buttons in the various zones, just go to the appropriate section of the customizer (for example if you want to show the social buttons in the footer just go to “Attesa Theme Options-> Footer Settings”) and activate the “Show social network“.

How to add new Social Buttons using the child theme

If you plan to use a social button that is not currently on the list, you can do it easily using the child theme.

Here is an example of how to add a new custom social button:

add_filter('attesa_social_network_register', 'attesa_child_add_additional_social_network');
function attesa_child_add_additional_social_network($social) {
	$newSocial = array (
		'home' => array (
			'slug' => '_homeurl', //slug
			'default' => '', //default value
			'label' => __('Home URL', 'attesa-child'), //label in the customizer
			'name' => __('Home', 'attesa-child'), //Name
			'icon' => 'fa fa-home' //fontAwesome icon
		)
	);
	return array_merge($social,$newSocial);
}

Add this filter in the “functions.php” file of the child theme and the new Social Button will appear in the list of the social buttons available in the customizer.

NB: you can consult the list of icons available on the FontAwesome page. When you have found the icon you need, click on it and copy the name of the icon (example: fa-address-book-o ) then use it inside the code to define the icon with the “fa” prefix.

'icon' => 'fa fa-address-book-o',