Skip to content

Snippet: Add New Options to the Top Bar Social & Social Links Element

The Total theme has various functions for displaying social links on the site and in Total 4.4 we've aded a global filter named "wpex_social_profile_options_list' which can be used to add/remove items from the social profile options as well as modify the label or icon.

In Total 5.5 we updated the theme's CSS to add a new CSS variable for social colors so after you add your new social option in order to provide styling for it with the various theme elements simply add some css that looks like this:

.wpex-[Your_Social_Item_Key] { --wpex-branding-color: Your_Custom_COLOR; }

Custom SVG Icon: If the social profile you are registering doesn't have an icon in the theme instead of adding a "ticon ticon-{type} value for the icon_class you can simply enter a custom name then in your child theme add a new directory at assets/svgs and inside it add an svg with the same name. For example if you use 'icon_class' => 'my-svg', then you would add a new icon in your child theme under total-child-theme/assets/svgs/my-svg.svg.

/**
 * Add New Options to the Top Bar Social & Social Links Element.
 *
 * @link https://total.wpexplorer.com/docs/snippets/add-new-social-options/
 */
add_filter( 'wpex_social_profile_options_list', function( $list ) {
	$list['spotify'] = [
		'label' => 'Spotify',
		'icon'  => 'spotify',
	];
	return $list;
} );
All PHP snippets should be added via child theme's functions.php file or via a plugin. We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top