Close

Creating New Social Links

This tutorial will explain how to add new social links to your team grids. It will also take you deeper into exploring the powerful customization options available in MTS. Part one covers adding the social link information to your team members. Part two covers customising your showcase grid so that it displays this link information for your team members. And part three covers modifying MTS Forms so that your form asks your team members to enter their social link information, which will automatically update your team grids with the entered information.

 

Add Information in Custom fields

1. We begin by adding the social link information for each of the members. In this case let us assume the social network site for which we are creating links is GitHub. As you can see in the image below, we want the GitHub icon to appear on all the member cells in our team showcase. Let’s start by adding the GitHub link for any one of our team members. For this, open the editor page of any member. WP Admin > Team Showcase > All Members > Open team member editor page.

2. Enable the Custom Fields section of the page. This is enabled by opening the Screen Options tab located at the top right of the member editor page and checking the Custom Fields tick box.

3. Now scroll down the page till you locate the Custom Fields section. At the bottom of this section there is section where you can add a new custom field. Create a field with any name such as MTS Github or MTS Flickr, etc and give it a value, which is the social media link for the member. What name you give the custom field is not important but please ensure the name is not the same as any other existing custom field for this member.

4. Now click on Update to save the custom field information for this member. You may wish to repeat this process for a few team members.

 


 

Customise Member Cell Template

1. Now we will edit our team showcase settings to enable it to show this social link for the members.

2. Open your showcase editor page and in the Load New Preset section ensure that in the Cell Components section Links has been checked. If your current showcase does not include the Links component, you must reload the preset and include the Links.

3. Once the showcase comes up with the links section open the Advanced Editor for it. This opens when you click on the green settings icon at the top left of your team grid.

4. Then open its Member Template tab. This panel visually shows you the structure of the member cell template for the current showcase, and let’s you edit, re-arrange, duplicate or delete various elements in it, as well as create brand new elements. It is a powerful tool for easily taking control of your member cell templates.

5. Double click the template to open it, then double click the Text Container to open it as well. Inside it you should find the Links container if you enabled it earlier in the preset settings. Here you will find several link elements already added as part of the template. We will duplicate any one of these elements. Please note that if you have enabled the LightBox in the Cell Components, and Links within the Lightbox components then you will first need to open the LightBox container and then open the Text Container within it.

6. Locate the Facebook link. We will duplicate this element and then convert the duplicate into our own new link element. You can duplicate any template element by using the Duplicate button, which is the first button among its top right button set.

7. Open the duplicate Facebook link element by double clicking it, now open its Content tab. Here you will find three input fields to fill out. The first is Icon. Clicking it will reveal hundreds of icons to choose from for the link. If you want to see the full list of icons, you can check here: http://fontawesome.io/icons/

8. Either select an icon from the list or if you want to use an icon that is not available in this list but is available in the Font Awesome library then you must enter its name in this format: fa fa-icon-name. So if you want to use the icon google-plus-square you can enter fa fa-google-plus-square.

9. You may want to use a custom image icon that is not available in the Font Awesome Library. The procedure for this is explained in step 16 of this section. But you still need to follow the remaining steps till 16. Just use any Font Awesome icon for now like fa-twitter. Later it will be explained how to replace this icon with your image.

10. Now let’s move to the next option. Leave the Text field blank unless you want some text to appear next to the icon. Whether and how the text will appear also depends on the preset that you are using. Also, if you just want to link text to appear and no icon, fill out the text field and leave the icon field blank.

11. Next, you need to fill the URL field. Here you must recall the name of the custom field we set for this social link earlier in this tutorial. For example MTS Github. Enter this name with double curly braces around it. So the format would be {{MTS Github}}. Whenever you enter a custom field name with double braces around it anywhere in the Member Template editor, while printing the showcase the plugin automatically replaces it with the actual custom field values for the member.

12. So far we have been working in the Content tab of our link element, now open its Logic tab to complete the final step. In the logic tab you can describe to the template under which circumstances this field needs to appear. To keep things simple you can simply disable the logic abilities for this element by settings the Enable Logic option to No. This will print the social media icon for all the members regardless of whether they have the relevant custom field set for them or not. But a cleaner approach would be to keep logic enabled and change the Meta key value to the name of the custom field. In our example MTS Github.

13. For the sake of keeping things organised and for future reference, we may want to change the name of this link element from Facebook to GitHub in our example. This way we will not be confused the next time we open this preset. You can change the name of any template element through its Name tab.

14. Now you can press Save Settings at the bottom of the Advanced Editor to apply these changes to your current team grid.

15. Please note that any changes you make to the Member Template will be overwritten by the default preset settings if you again load a preset for your showcase using the Load New Preset section.

16. If you wish to use a custom image instead of a font awesome icon, you can do this by first using any font awesome icon to setup your link and then adding a bit of JavaScript code to the footer of your page using any free WordPress JavaScript plugin such as this one. Following is the code that you will need to add:

jQuery('.wmts_container').on('wmts_init_complete', function(){ jQuery('.wmts_element .fa-twitter').replaceWith('< img src="link-to-the-image.png" style="width: 15px;" />'); })

In the above code you need to replace fa-twitter with the Font Awesome icon code for the icon you wish to replace. And replace link-to-the-image.png with the URL of the image that you wish to use as an icon. Adjust 15px to change the size of the icon. Preferably use a PNG image with a transparent background which will look better.

 


Edit MTS Form

1. You may be using an MTS Form to collect information from team members. This section will explain how to add the new social link to your MTS Form.

2. Let’s locate the MTS Form that you need to edit. Go to WP Admin > Team Showcase (in the left hand main menu) > All Forms. If you are not using a custom form that you have created, you can edit the Basic Information form that already comes preinstalled with the plugin. Open the editor page for this form.

3. Locate the button to open the form editor at the top right of the form, and click it.

4. In this editor press the mouse down on the Link element and drag it to the form’s Social Media links section. You can change the position of the new form element simply by pressing your mouse down on it and dragging it around.

5. You will notice that a new panel will have automatically opened up in the Form Editor called Edit Form Element. Here you can edit the settings of the currently selected form element. Ensure that you have selected our new form element for editing. There will be a blue outline around the form element that is currently selected for editing. To switch the focus of the editor to any form element, simply click on the form element. A blue outline should appear around it

6. Change the label to the name of the social link such as GitHub (in our example). Now recall the name of the Custom Field associated with this link. In our example it is MTS Github. Enter this name in the Unique Meta key field. This tells MTS that when a user saves this form, the value for this link element should be saved in the associated Custom Field. This is how the form gets connected to the member template.

7. You can make other changes to the form element, and once you are done click the Save Form Settings button at the bottom of the form editor. This will change the form on all the member editor pages.