Search

How to Add Dynamic Links for Author’s Social Media Icons in Elementor

Implementing dynamic links for social media icons in Elementor provides a time-saving and efficient solution. Instead of manually adding individual links to each post, dynamic links streamline the process, allowing authors to manage their social media presence centrally. This not only saves time but also ensures consistency across all posts.

In this tutorial, you will be guided through the process of implementing dynamic links for social media icons in the Elementor Pro’s theme builder. It starts by incorporating social media fields into the WordPress user’s Contact Info to input the necessary links.

The tutorial further illustrates how to establish dynamic links, enabling the retrieval of contact info links, and effortlessly integrating them into the Author’s social icon within a single post template. Notably, the entire procedure is executed without the requirement of installing any additional plugins.

Adding Dynamic Links for Author’s Social Media Icons in Elementor

Step 1: Add Social Media Fields in the User Contact Info Settings

By default, WordPress user profile settings offer only two contact info options: a mandatory email address and a website field for user input.

Activating an SEO plugin like Yoast expands these settings by incorporating numerous social media fields into the Contact Info section.

However, if you prefer to avoid additional plugins, we provide a custom code below that enables you to add extra social media links to the contact info settings without the need for any additional installations.

function wpp_add_sosmed_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;
}
add_filter('user_contactmethods', 'wpp_add_sosmed_fields', 10, 1);

The provided code will include various social media options in your Contact Info settings, including the following:

TwitterFacebookInstagramLinkedIn
YouTubePinterestTumblrFlickr
RedditTikTokTelegramQuora
TwitchGithubSpotifyMastodon

The fastest way to apply the code is by inserting it at the bottom of your theme’s functions.php file. Access the file through your WordPress dashboard by navigating to Appearance → Theme File Editor. Once the code is added, click the Update File button to implement the changes.

For block themes, locate the Theme File Editor in the Tools menu. If your theme, such as “Twenty Twenty Three,” lacks the functions.php file, create it initially through SFTP or your site’s file manager.

It’s advisable to create a backup of your WordPress files, either through backup plugins or your built-in backup feature of your hosting service. Alternatively, you can opt for a safer method to add custom code to your website.

After successfully implementing the code, you can seamlessly integrate the author’s social media links into the Contact Info settings.

Step 2: Creating the Dynamic Link

The subsequent step involves establishing dynamic links for the social media icons, adapting to the current author of the post.

To accomplish this, we’ll create a shortcode designed to automatically retrieve the links from the contact info in the profile settings. Insert the following code after the contact info code from the initial step into your theme’s functions.php file or any other preferred code placement.

function wpp_author_links($atts = array()) {
    $author_id = get_the_author_meta('ID');

    // Check for positional attribute
    if (isset($atts[0])) {
        $link = $atts[0];
    } else {
        // Fallback to default attribute handling
        $atts = shortcode_atts(array(
            'link' => 0
        ), $atts);
        $link = $atts['link'];
    }

    $wpp_link = get_the_author_meta($link, $author_id);

    return $wpp_link;
}
add_shortcode('sosmed', 'wpp_author_links');

Be sure to click the Update File button to activate the code, allowing you to start using the shortcode.

Step 3: Adding the Shortcode

With the shortcode now prepared for use, the next step is to assign it to the social media icon as a dynamic link.

For example, to add a Twitter link to the Twitter icon within a single post template, simply input the shortcode with the attribute you’ve just created, into the Dynamic Tag → Shortcode settings. The shortcode for this purpose would look like:

  • [sosmed twitter]

Similarly, you can replicate this process for other social media icons. Just modify the attribute value, such as changing “twitter” to “facebook,” “youtube,” or any other social media platform that the user has entered in their contact info within profile settings.

To ensure accuracy in attribute values, refer to the $contactmethods variable from the initial step.

After completing all the necessary steps, publish the template and hover over the author’s social media icon in a post to verify the correctness of the links.

The Bottom Line

Streamline your social media presence across posts by implementing dynamic links in Elementor. This tutorial guided you through adding social media fields to WordPress user’s Contact Info for centralized link management.

Establish dynamic links to effortlessly integrate contact info links into the Author’s social icon within a post template, all without the need for extra plugins. This efficient process saves time and ensures consistency throughout your content.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Hendri Risman

Hendri Risman

Hendri is a WordPress expert and a writer staff at WPPagebuilders. He writes solutions on how to get things fixed in WordPress a lot. Mostly without involving a plugin.
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?