Dynamic Social Medias for Elementor free version will allow you to display social media icons with their related link on a blog post, page or sidebar with author’s or user’s social media links.
This component use the power of WordPress with the standard Custom Fields and the features of Advanced Custom Fields knows as ACF.
Add the necessary 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 media’s names.
function eac_add_hide_profile_fields($contactmethods) {
$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';
$contactmethods['reddit'] = 'URL Reddit';
$contactmethods['tiktok'] = 'URL TikTok';
$contactmethods['telegram'] = 'URL Telegram';
$contactmethods['quora'] = 'URL Quora';
$contactmethods['twitch'] = 'URL Twitch';
$contactmethods['github'] = 'URL Github';
$contactmethods['spotify'] = 'URL Spotify';
$contactmethods['mastodon'] = 'URL Mastodon';
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
Modify the user profiles with the ACF fields to display social media icons
First you have to create a new group, ‘User social media’ in our case whose fields will be added to each user’s profile.
- The Field Label is the name of your field, which helps you organize your fields
- The Field name must be exactly the same as in the list below
- Choose Text as Field Type
- Scroll down to the Location area and make sure you select User Role
List of supported Social Medias
twitter facebook
instagram linkedin
youtube pinterest
tumblr flickr
reddit tiktok
telegram quora
twitch github
spotify mastodonAnd as for the standard Custom Fields, you will find the Social Medias fields in each user profile
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
Customize the social media icons
If you want to customize media icons, you need to apply specific CSS code.
- To do this, select the corresponding Text Editor
- Click Advanced tab and open the section ‘EAC custom CSS’
/* Container class Flex */
selector .dynamic-tags_social-container {
font-size: 25px;
border: none;
text-align: center;
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
padding: 8px;
}
/* Icon class */
selector .dynamic-tags_social-icon {
width: 40px;
height: 40px;
line-height: 38px;
border: 3px solid blue;
border-radius: 8px;
display: inline-block;
}
Does this still work?
Hi @Skyler
Yes the component ‘Dynamic Social Medias’ is still wordking
In progress, we are implementing the ACF features with which you will be able to add the fields in the user profile.
The next version (v1.7.6) will have it and will be published before the end of this week.
The documentation will naturally be updated.
Rgds EAC Team