How to make employees clickable

Hello.

How do I make my employees clickable so it directs to the employees page?

URL: http://clockworkbjj.com/instructors/

Hello there,

Could you please try to do the following?

  1. Edit your employee
  2. In the “Employee Info” metabox, put its employee page URL in the field that says “Custom link”
  3. Update

It will make the employees name underneath the avatar clickable. I’m afraid that the entire employee item area can’t be clickable as it isn’t supported by the theme’s code at the moment. If it’s an urgent, I’d recommend you to do modification in the widgets/fp-employees.php file. But you should take it at your own risk as you would editing the core theme’s file.

Warmest regards,
Kharis

Tank you!

Hello there,

You are welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

I’m happy to have an opportunity to assist you.

Warmest regards,
Kharis

I would like to make the entire photo clickable as well. I don’t mind editing the PHP file. Would you mind offering some instructions on how to do this?

Dear Tera,

Could you please try to do the following?

  1. Edit widgets/fp-employees.php file
  2. Find this code block
  3. Then replace it with this one

Let me know how it works. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Hi Kharis,

I used your code, but because I wanted to keep hover effect on the photos, I put it under pop-overlay as such:

<div class="pop-overlay">
   <a href="<?php echo esc_url($link); ?>">

This did allow me to simply edit the Custom Link field in the employee editor, and now the entire box links to whatever page I want.

I personally use the employee widget to highlight and direct visitors to other internal pages on the website. So I don’t use it for employee profiles at all and don’t need social media links.

Anyway, as far as I can tell this worked perfectly for me and was an easy edit in order to get the photos to link where I want. I’ll have to test it on mobile, but I think it should work.

Hopefully this will help others looking to do the same on their page. Thanks you so much!!

Dear Tera,

Thank you for sharing. We really appreciate it. It will be very useful for others.

Regards,
Kharis

Hi!
Great solution, I would also like to thank Tera Pryon. However I have to small issues:

  1. would it be possible to add code so that the browser opens (in my case) the linkedin profile in another window?
  2. When I drag the mouse over the image and get the hover effect, an empty circle appears OVER the facebook icon. It´s fair to assume that it should have been a LinkedIn icon inside the circle and that the circle should have been beside the facebook icon and not on top. I took a screenshot of it, but unfortunately I don´t know how to add a link to an image. If you gave me any possibility to share it I will.

Steffen.

You could of course just look here: http://www.innsiktogutsikt.no/ scroll a little bit down, to “Manager-for-hire” and hover over the image.

Dear Steffen,

I would like to apologize in advance for the delay.

> 1

Please try to do the following steps to achieve that objective:

  1. Install and activate the Header and Footer Scripts plugin
  2. Go To Settings > Header and Footer Scripts panel
  3. Paste the following code into the provided “Scripts in footer:” box

<script type="text/javascript">
(function($){
      
    var LinkedInLink = $('a[href*="linkedin.com"]');

    if( LinkedInLink.length ){

      LinkedInLink.attr('target', '_blank');
      
    }

})(jQuery);
</script>

  1. Save settings

> 2

How did you insert the LinkedIn circle link? Did you add some code? If so, please share it here. Maybe there is something I can improve to display the icon.

Regards,
Kharis

Hi, thanks for the reply.
However, there might be some misundertanding somwhere. I tried your solution, but the problem didn´t change. I took a new screenshot and left the mouse-“hand” exactly at the problem area (but dont know how to make it accessible for you as I dont know how to easily establish and give you an image link…). The white circle should be a linkedin link beside the facebook link.

I inserted the linkedin link by following the suggestion from Tera Pyron above.

Dear Steffen,

Thank you for the followup!

I visited your site, the code I suggested to make the LinkedIn link to open in a new window works fine here. Some desktop browsers like Firefox and Chrome will open it in a new tab. Please read the link target attribute documentation at w3schools.

You may need to clear your web browser’s cache to see the code takes affect.

In order to display LinkedIn icon, could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.team-social li a[href*="linkedin.com"]:after{
  font-family: Fontawesome;
  display: block;
  content: '\f0e1';
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Hello I am needing assistance with making my employee photos clickable keeping the hovering box. Can you please assist?

Thanks.

Can I please get some urgent help!

Hello there,

Please try this jQuery code solution.

Regards,
Kharis