Social Media Links in Staff Profiles

This tutorial assumes you already have a staff directory with all of your staff profiles already setup. If you don’t have a staff directory, please click here to learn how to create one. The above image depicts how you can incorporate social media links and icons in your staff directory. You can also see it in action on the main Top of Mind website here. Below are the steps to implement this on your own website:

  1. Do a search online for social media icons. There will be tons of results. There are many online libraries where you can download the icons for all of the popular social media outlets in many different styles and formats. So find the ones you like best and download them to your computer.
  2. Next, upload all of these icons to your website. Do this by clicking Media -> Add New.
  3. Once you have all of these social media icons in your image library, create a new page or post called WorkPad (you may already have one created – remember DON’T PUBLISH this page or post, only save as a DRAFT). If you aren’t familiar with this strategy, using a WorkPad page or post is an easy way to create your own HTML code if you don’t know HTML. Please click here to see a full tutorial on using the visual editor to create your own HTML code. You can use the visual editor here to add the images and hyperlink them to the appropriate social media profiles. So for instance, you would insert the Twitter icon, then select the image and click the hyperlink button and insert that person’s Twitter link. Once all of the applicable icons and links are inserted, switch to the HTML editor and copy the HTML code.
  4. Now go to your Staff Profiles and click the name of the person you are adding these links to.
  5. You can add them in Contact Block 1 if you like, but for our example we have added them to Contact Block 2. In the text editor for Contact Block 2, click the HTML button. This opens a popup window where you can add HTML code. Just paste the code you copied from the step above and click Update. Then click the main Update button for the staff profile in the top right.
  6. Go check out your staff directory page to make sure everything is in order. You may need to do a hard refresh by pressing Control and F5 on your keyboard at the same time. This will clear your cache for that page and completely reload it.
  7. Repeat steps 2 – 5 above for all of staff profiles you need to add these social media profile links to.