Tips & Hacks

More than once have we received support requests from users trying to add a new social network to the Social Icons area present in Nayma and Binder PRO. This article will try to address that need and show you how to add a new social network to the list of available social networks in Theme Options.

Whether is a recently-went-popular network that you’re using, or that you want to give your client the option to add more contact methods, this tutorial is for you.

For this post’s purpose we will assume you are already working with a child theme on your theme customizations. If you’re not, head over to this post to learn the basics of working with a child theme in WordPress.

Step 1 – Adding the option field

We’ll begin by adding a field (or more) to the list of available social networks in Theme Options >> Social tab.

For that, we need first to open the /inc/options-definition.php file we’ll find in the root folder of the theme, which is the file that defines all the settings we will later on see on the Theme Options page. Copy the first function, named ‘quadro_get_option_parameters’ and paste it at the end of the child theme’s functions.php file. Note: (1) the function is pretty long, don’t miss anything of it, and (2) You only need to copy from after the

if ( ! function_exists( 'quadro_get_option_parameters' ) ) :

and till before the

endif; // quadro_get_option_parameters

Leaving those two out will re-define the function and that is what lets our parent theme know we are re-declaring it.

Inside your child theme’s functions.php file, make a quick search for “Social Tab Options” to get to the social icons area of the file, and add this after the last comma of the last icon array:

'mysocial_profile' => array(
	'name' => 'mysocial_profile',
	'title' => __( 'My Social Profile', 'quadro' ),
	'type' => 'text',
	'sanitize' => 'nohtml',
	'description' => __( 'My Social Username', 'quadro' ),
	'section' => 'profiles',
	'tab' => 'social',
	'default' => ''
),

Of course, you should replace all the “mysocial” and “My Social” for a proper name, both for the variable (for internal use) and for the on-screen option.

If we navigate now to Theme Options >> Social, we should clearly see our new setting added and the bottom of the list.

Step 2 – Defining what to do with our new setting

For our next step, we will copy the entire function that handles the output of the social icons both on the header and on the footer of the themes, and we will modify it to contain an icon for our new added social network.

Open the /inc/qi-framework/extras.php file, and search for the “quadro_social_icons” function. You’ll see that the function is wrapped in a

if ( ! function_exists( 'quadro_social_icons' ) ) :

call, which actually will let us define that function all over again in our child theme’s functions.php file (and once we have declared it, the theme will no longer call that one from its files, but directly from our child theme.

Grab those lines from the “function quadro_social_icons…” line all the way down to the closing “}”, something like 35 lines below it, and just before the “endif; // if !function_exists”, and copy them into your child theme’s functions.php file.

Then, we should add our new social network to the $profiles array. Add it just as you see the others declared in there, defining a “slug” like name, and then a proper name to show in the alt attribute of the link, like this:

'mysocial' => 'My Social',

*Note: notice the comma at the end of that line? Don’t forget it, or you may break a thing or two. 🙂

Our themes use the great Font Awesome to automatically assign an icon to each of the social networks we present in there. We’ll cover first a simple method for adding an icon with an already present icon in Font Awesome, and then a more flexible method to allow you to use a custom image for it. But note this: if you are going for a Font Awesome icon, the “slug” for our icon (the left side of our added variable pair) should correspond the last part of the icon name in the Font Awesome icons definition (just as our YouTube definition is “youtube” for the “fa fa-youtube” icon). Whatever you use in there should match what Font Awesome declares for calling the icon, after the usual “fa fa-” that all its icons use.

If you’ve found your icon in the Font Awesome list, and you properly defined it inside the $profiles array, then that’s all you need to do for it to appear on the frontend.

Do you want it to appear before, or after another icon on that list? Simply move it across the list till you match your desired order, and that should be it.

What about a custom icon image?

If the icon you are looking for doesn’t exists in the Font Awesome library you’ll have to use a custom image for it, and we’ll also need to modify the previous function to allow for that. Let’s go for it.

Let’s assume you have already uploaded your image to the /images folder on your child theme. Then we’ll replace this part of the function:

foreach ( $profiles as $profile => $name ) {

 if ( !isset( $quadro_options[$profile . '_profile'] ) || $quadro_options[$profile . '_profile'] == '' ) continue;

 echo '<li><a href="' . esc_url( $quadro_options[$profile . '_profile'] ) . '" target="' . esc_attr( $quadro_options['social_target'] ) . '" title="' . $name . '"><i class="fa fa-' . $profile . '"></i></a></li>';
}

for this:

foreach ( $profiles as $profile => $name ) {
     if ( !isset( $quadro_options[$profile . '_profile'] ) || $quadro_options[$profile . '_profile'] == '' ) continue;
     if ( $profile == 'mysocial' ) {
            echo '<li><a title="' . $name . '" href="' . esc_url( $quadro_options[$profile . '_profile'] ) . '" target="' . esc_attr( $quadro_options['social_target'] ) . '"><img title="' . $name . '" src="' . get_stylesheet_directory_uri() . 'https://artisanthemes.b-cdn.net/images/my-social.jpg" /></a></li>';
       } else {
            echo '<li><a href="' . esc_url( $quadro_options[$profile . '_profile'] ) . '" target="' . esc_attr( $quadro_options['social_target'] ) . '" title="' . $name . '"><i class="fa fa-' . $profile . '"></i></a></li>';
       }
 }

See what we did there? We are checking to see if the current social profile is the one we declared. If it is, instead of throwing a Font Awesome icon, we insert our custom image inside that link. If it isn’t, we proceed as before, calling the icon by its class name.

That’s all. By now you should be seeing your custom icon appearing on the frontend of your site.

Which other areas of the themes do you find you need to modify more frequently? Let us know and we’ll go for them too. 🙂