Add links automatically to WordPress social icons block

Learn in this tutorial how to include social media links in the user profile and have them added to the WordPress social icons block.

Can you imagine filling in the social networks field once and when you use the social icons block, get the URL automatically filled in?

It sounds pretty cool, doesn’t it? Let’s see how you can achieve it.

Instructions to automatically add links to the social icons block

1. Add social networks fields in the user profile

The first thing you need to do is to add the fields in the user profile in order to add the necessary data.

Add the following code at the end of functions.php or in your functionality plugin:

The code above uses the user_contactmethods filter to add 4 social networks and/or platforms:

• WordPress
• Github
• Twitter
• Mastodon

This is just an example that you can adjust to your or your client’s needs.

2. Fill in the social networks fields

Go to the WordPress user profile page and fill in the new fields:

3. Add the social icons block

Go to the page or post (or template part) where you want to display them and add a new social icons block from the block editor.

Then add the social networks icons you want to display and modify the design to your liking (and according to the theme design).

You don’t need to fill in the URL field as you will get that done automatically. 😉

4. Add links to the block programmatically

Once you have reached this point, the only thing missing is the “logic” that will make the social network blocks take the values of the user’s profile.

In order to do that, add the following code snippet to your functionality plugin:

In this code you use the render_block_data filter to detect the social network blocks which you have added to the user profile and, when rendered, adds the link.

The advantage of the above code structure is that in addition to being able to adjust it to the social networks that interest you, if you do not want to use the user profile data, but add them manually, you can also do it. You just have to modify the variable value, instead of: $wordpress = get_the_author_meta( 'wordpress' ); you can use $wordpress = user-you-want.

And if you use Advanced Custom Fields for this type of fields you can also adapt the code without problems. 😉

Conclusions

Now you know how to create some extra fields in the user profile to add the links to the social networks and that these are automatically used when you add the social icons block to the editor.

Any questions? Let me know in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉