Dynamic Social Medias for Elementor free version will allow you to display social media icons on a blog post, page or sidebar with author’s or user’s social media links.
Add the necessaries fields in the user profile
Display dynamiquely social icons on a blog post, with author’s or media links.
If you do not have the fields in the user profile, you have to create it.
Use plugin for add extra user fields or simply add the bellow code in your ‘functions.php‘ theme or in a child theme.
After that you have to fill some or all fields for each user profile.
Pay attention to the spelling of the social network’s names.
function eac_add_hide_profile_fields($contactmethods) {
//unset($contactmethods['yim']);
$contactmethods['twitter'] = 'URL Twitter';
$contactmethods['facebook'] = 'URL Facebook';
$contactmethods['instagram'] = 'URL Instagram';
$contactmethods['linkedin'] = 'URL LinkedIn';
$contactmethods['youtube'] = 'URL YouTube';
$contactmethods['pinterest'] = 'URL Pinterest';
$contactmethods['tumblr'] = 'URL Tumblr';
$contactmethods['flickr'] = 'URL Flickr';
return $contactmethods;
}
/** Contact User Social Networks filter */
add_filter('user_contactmethods', 'eac_add_hide_profile_fields', 10, 1);Source code to add user profile fields with Syntax highlighter
Add dynamic content for social media icons
- Select the Text Editor widget and the dynamic icon in the upper right corner of the field.
- Select entry “Author/Author’s social networks“
- Select the Social Medias in the list and oberve the result
customize the social media icons
To customize media icons, you need to apply specific CSS code.
- To do this, select the corresponding Text Editor
- Click Advanced tab
- Open the section ‘EAC custom CSS’
Change font-size, icon color…
/* Container class Flex */
selector .dynamic-tags_author-social-network {
font-size: 20px;
border: none;
text-align: center;
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
padding: 8px;
}
/* Icon class */
selector .dynamic-tags_author-social-icon {
width: 40px;
height: 40px;
line-height: 38px;
border: 2px solid blue;
border-radius: 8px;
}
/* Font awesome */
selector .dynamic-tags_author-social-icon i {
color: red;
}