How To Build a Social Media Profile Widget in WordPress

One of the core feature of WordPress is widget areas, which are used to add content to theme sidebars or other widgetized areas. Activating a widget in your theme sidebar is as easy as dragging and dropping the widget in the desired widgetized area. (Recommended reading – Understanding and Using Widgets in WordPress.)

Many of today’s websites contain social network icons that link to profiles. This can accomplished in WordPress using widgets. In this tutorial, we will build a WordPress widget that links to the profile of social networks. To keep things simple, the widget will support Facebook, Twitter, LinkedIn and Google+ profiles using Font Awesome social network icons.

Coding a Social Network Profile Widget

Let’s get started with widget development. First, we need to include the plugin header. Without the header, WordPress won’t recognize the widget.

When values are entered into the form field, they need to be saved to the database. The update() method sanitizes form values by stripping out malicious data and saves the sanitized values to the database.

Here’s what the code does. The Facebook, Twitter, Google+ and LinkedIn profile links saved to the database via the widget settings form are retrieved and saved to their respective PHP variables. The HTML link to social network profiles with their respective font awesome icons as anchor images are then saved to a variable for reuse.

Finally, links to the social network profiles are displayed only if the profile is set in the widget settings. This is done so that a social network without a saved profile link won’t be display at the front-end.

The widget class Designmodo_Social_Profile is then registered using the widgets_init hook so it is recognizable by WordPress.

If the widget is activated and filled with the respective social network profile links, you should see it display like the image below.

Here is the link to the plugin file so that you use in your WordPress site and also sturdy the code to learn how it works.

Summary

One of the ways of adding new features to a WordPress powered site is through use of widget. In this article, I showed you how to build a profile widget that links to a number of various social networks, thus explaining how widgets and plugins are built in WordPress. If you have any questions, let me know in the comments below.