Add a social link (Linkedin) under employee photo

Hello,

I would like to add a social link (Linkedin) under employee photo. Basically it should be under the employee description before having to hover over the team member. I am aware that by hovering there is an icon, but I would like one to be under the image. For some reason all links are totally ignored under the image, apart from the name.

Is it possible?

thank you!

I added the following code into fp-employees.php of the parent theme, and it worked. However, by adding this to the child theme inside the widgets folder doesn’t work.

<?php if ($google != '') : ?>
<a class="google" href="<?php echo esc_url($google); ?>" target="_blank"><i class="fa fa-linkedin"></i></a>
									<?php endif; ?>

I followed a method in this post and it totally crashed my website. So I undid and the website is back.

Please could you help to add the code into the child theme? Thank you so much!

Hello there,

Thank you for reaching out to us here.

The link to a thread you shared is for Perth theme which has different code. That’s why it broke your site. For Sydney theme, you should do the following steps:

  1. Create a new folder inside child theme and name it as “widgets” (without quotes). You’ll need a copy of fp-employees.php file in it.

  2. Edit this new fp-employees.php file on your code editor program. Add the following code block after this line: <div class="pos"><?php echo esc_html($position); ?></div>.


<ul class="team-social">
  <?php if ($facebook != '') : ?>
    <li><a class="facebook" href="<?php echo esc_url($facebook); ?>" target="_blank"><i class="fa fa-facebook"></i></a></li>
  <?php endif; ?>
  <?php if ($twitter != '') : ?>
    <li><a class="twitter" href="<?php echo esc_url($twitter); ?>" target="_blank"><i class="fa fa-twitter"></i></a></li>
  <?php endif; ?>
  <?php if ($google != '') : ?>
    <li><a class="google" href="<?php echo esc_url($google); ?>" target="_blank"><i class="fa fa-google-plus"></i></a></li>
  <?php endif; ?>
</ul>

  1. Add the following PHP code into your child theme’s functions.php.

/*
 * Requiring employee widget file from childtheme
 */
require get_stylesheet_directory() . "/widgets/fp-employees.php";

/*
 * Unregistering default employee widget
 */
function sydney_child_remove_employees_widget() {
	unregister_widget('Sydney_Employees');
}
add_action( 'widgets_init', 'sydney_child_remove_employees_widget', 999 );

/*
 * Registering new widget
 */
function sydney_child_register_new_widget(){
  register_widget( 'Sydney_Child_Employees' ); // Widget class name
}
add_action( 'widgets_init', 'sydney_child_register_new_widget' );

  1. Add this CSS code into your child theme’s style.css

/* Hide the default social icon */
.team-pop .team-social {
  display: none;  
}

/* Style the new social icons */
.team-content .team-social li a {
  border-color: #d65050;
  background-color: #d65050;
}  

.team-content .team-social li a:hover {
  color: #d65050;  
} 

  1. Install and activate the child theme

  2. Edit the page where you put the employee widget, remove the existing widget, and then reinsert it.

Regards,
Kharis

Thank you very much, however the code that I inserted into the child’s functions.php crashed my site too… :frowning: Is there any way to avoid altering child’s functions.php?

Hello there,

Please temporarily enable the WP debug mode by editing the wp-config.php file and change define(‘WP_DEBUG’, false); to define(‘WP_DEBUG’, true);. Then reload your site, then share the PHP error message being displayed on your screen. To help fix the error, please share all of the code in your child theme’s functions.php to Github gist and share its link here.

Regards,
Kharis

Thank you!
PHP error:

Fatal error: Cannot redeclare class Sydney_Employees in /home/alpheon/domains/alpheon-energy.com/public_html/wp-content/themes/sydney/widgets/fp-employees.php on line 201

The contents of my functions.php in child theme before I add your code:

<?php
/**
 * Sydney child functions
 *
 */

/**
 * Enqueues the parent stylesheet. Do not remove this function.
 *
 */
add_action( 'wp_enqueue_scripts', 'sydney_child_enqueue' );
function sydney_child_enqueue() {
    
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

/* ADD YOUR CUSTOM FUNCTIONS BELOW */


Just to remind you, I added these lines as a temporary fix in the fp-employees in parent theme (and currently in child theme too, however only works when present in parent theme).

<?php if ($google != '') : ?>
<a class="google" href="<?php echo esc_url($google); ?>" target="_blank"><i class="fa fa-linkedin"></i></a>
									<?php endif; ?>

So my fp-employees.php looks like this:

<?php

class Sydney_Employees extends WP_Widget {

	public function __construct() {
		$widget_ops = array('classname' => 'sydney_employees_widget', 'description' => __( 'Display your team members in a stylish way.', 'sydney') );
        parent::__construct(false, $name = __('Sydney FP: Employees', 'sydney'), $widget_ops);
		$this->alt_option_name = 'sydney_employees_widget';

    }

	function form($instance) {
		$title     = isset( $instance['title'] ) ? esc_attr( $instance['title'] ) : '';
		$number    = isset( $instance['number'] ) ? intval( $instance['number'] ) : -1;
		$category  = isset( $instance['category'] ) ? esc_attr( $instance['category'] ) : '';
		$see_all   = isset( $instance['see_all'] ) ? esc_url_raw( $instance['see_all'] ) : '';	
		$see_all_text  	= isset( $instance['see_all_text'] ) ? esc_html( $instance['see_all_text'] ) : '';		
		$center_content	= isset( $instance['center_content'] ) ? (bool) $instance['center_content'] : false;	
	?>

	<p><?php _e('In order to display this widget, you must first add some employees from the dashboard. Add as many as you want and the theme will automatically display them all.', 'sydney'); ?></p>
	<p>
	<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title', 'sydney'); ?></label>
	<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
	</p>
	<p><label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php _e( 'Number of employees to show (-1 shows all of them):', 'sydney' ); ?></label>
	<input id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="text" value="<?php echo $number; ?>" size="3" /></p>
    <p><label for="<?php echo $this->get_field_id('see_all'); ?>"><?php _e('Enter an URL here if you want to section to link somewhere.', 'sydney'); ?></label>
	<input class="widefat custom_media_url" id="<?php echo $this->get_field_id( 'see_all' ); ?>" name="<?php echo $this->get_field_name( 'see_all' ); ?>" type="text" value="<?php echo $see_all; ?>" size="3" /></p>	
    <p><label for="<?php echo $this->get_field_id('see_all_text'); ?>"><?php _e('The text for the button [Defaults to <em>See all our employees</em> if left empty]', 'sydney'); ?></label>
	<input class="widefat custom_media_url" id="<?php echo $this->get_field_id( 'see_all_text' ); ?>" name="<?php echo $this->get_field_name( 'see_all_text' ); ?>" type="text" value="<?php echo $see_all_text; ?>" size="3" /></p>			
	<p><label for="<?php echo $this->get_field_id( 'category' ); ?>"><?php _e( 'Enter the slug for your category or leave empty to show all employees.', 'sydney' ); ?></label>
	<input class="widefat" id="<?php echo $this->get_field_id( 'category' ); ?>" name="<?php echo $this->get_field_name( 'category' ); ?>" type="text" value="<?php echo $category; ?>" size="3" /></p>
	<p><input class="checkbox" type="checkbox" <?php checked( $center_content ); ?> id="<?php echo $this->get_field_id( 'center_content' ); ?>" name="<?php echo $this->get_field_name( 'center_content' ); ?>" />
	<label for="<?php echo $this->get_field_id( 'center_content' ); ?>"><?php _e( 'Center the employees? (use only if you have 1 or 2 employees)', 'sydney' ); ?></label></p>
	
	<?php
	}

	function update($new_instance, $old_instance) {
		$instance = $old_instance;
		$instance['title'] 			= strip_tags($new_instance['title']);
		$instance['number'] 		= strip_tags($new_instance['number']);		
		$instance['see_all'] 		= esc_url_raw( $new_instance['see_all'] );
		$instance['see_all_text'] 	= strip_tags($new_instance['see_all_text']);			
		$instance['category'] 		= strip_tags($new_instance['category']);
		$instance['center_content'] = isset( $new_instance['center_content'] ) ? (bool) $new_instance['center_content'] : false;		

		$alloptions = wp_cache_get( 'alloptions', 'options' );
		if ( isset($alloptions['sydney_employees']) )
			delete_option('sydney_employees');		  
		  
		return $instance;
	}

	function widget($args, $instance) {
		$cache = array();
		if ( ! $this->is_preview() ) {
			$cache = wp_cache_get( 'sydney_employees', 'widget' );
		}

		if ( ! is_array( $cache ) ) {
			$cache = array();
		}

		if ( ! isset( $args['widget_id'] ) ) {
			$args['widget_id'] = $this->id;
		}

		if ( isset( $cache[ $args['widget_id'] ] ) ) {
			echo $cache[ $args['widget_id'] ];
			return;
		}

		ob_start();
		extract($args);

		$title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : '';

		$title 			= apply_filters( 'widget_title', $title, $instance, $this->id_base );
		$see_all 		= isset( $instance['see_all'] ) ? esc_url($instance['see_all']) : '';
		$see_all_text 	= isset( $instance['see_all_text'] ) ? esc_html($instance['see_all_text']) : '';		
		$number 		= ( ! empty( $instance['number'] ) ) ? intval( $instance['number'] ) : -1;
		if ( ! $number )
			$number = -1;			
		$category 		= isset( $instance['category'] ) ? esc_attr($instance['category']) : '';
		$center_content	= isset( $instance['center_content'] ) ? $instance['center_content'] : false;

		$r = new WP_Query(array(
			'no_found_rows'       => true,
			'post_status'         => 'publish',
			'post_type' 		  => 'employees',
			'posts_per_page'	  => $number,
			'category_name'		  => $category			
		) );

		echo $args['before_widget'];

		if ($r->have_posts()) :
?>

		<?php if ( $title ) echo $before_title . $title . $after_title; ?>

		<div class="roll-team carousel owl-carousel" data-widgetid="employees-<?php echo $args['widget_id']; ?>">
			<?php while ( $r->have_posts() ) : $r->the_post(); ?>
				<?php //Get the custom field values
					$position = get_post_meta( get_the_ID(), 'wpcf-position', true );
					$facebook = get_post_meta( get_the_ID(), 'wpcf-facebook', true );
					$twitter  = get_post_meta( get_the_ID(), 'wpcf-twitter', true );
					$google   = get_post_meta( get_the_ID(), 'wpcf-google-plus', true );
					$link     = get_post_meta( get_the_ID(), 'wpcf-custom-link', true );
				?>
			<div class="team-item">
			    <div class="team-inner">
			        <div class="pop-overlay">
			            <div class="team-pop">
			                <div class="team-info">
								<div class="name"><?php the_title(); ?></div>
								<div class="pos"><?php echo esc_html($position); ?></div>
								<ul class="team-social">
									<?php if ($facebook != '') : ?>
										<li><a class="facebook" href="<?php echo esc_url($facebook); ?>" target="_blank"><i class="fa fa-facebook"></i></a></li>
									<?php endif; ?>
									<?php if ($twitter != '') : ?>
										<li><a class="twitter" href="<?php echo esc_url($twitter); ?>" target="_blank"><i class="fa fa-twitter"></i></a></li>
									<?php endif; ?>
									<?php if ($google != '') : ?>
										<li><a class="google" href="<?php echo esc_url($google); ?>" target="_blank"><i class="fa fa-linkedin"></i></a></li>
									<?php endif; ?>
								</ul>
			                </div>
			            </div>
			        </div>
					<?php if ( has_post_thumbnail() ) : ?>
					<div class="avatar">
						<?php the_post_thumbnail('sydney-medium-thumb'); ?>
					</div>
					<?php endif; ?>
			    </div>
			    <div class="team-content">
			        <div class="name">
			        	<?php if ($link == '') : ?>
			        		<?php the_title(); ?>
			        	<?php else : ?>
			        		<a href="<?php echo esc_url($link); ?>"><?php the_title(); ?></a>
			        	<?php endif; ?>

			        </div>
			        <div class="pos"><?php echo esc_html($position); ?></div>
			    </div>
<?php if ($google != '') : ?>
<a class="google" href="<?php echo esc_url($google); ?>" target="_blank"><i class="fa fa-linkedin"></i></a>
									<?php endif; ?>
			</div><!-- /.team-item -->

			<?php endwhile; ?>
		</div>

		<?php if ($see_all != '') : ?>
			<a href="<?php echo esc_url($see_all); ?>" class="roll-button more-button">
				<?php if ($see_all_text) : ?>
					<?php echo $see_all_text; ?>
				<?php else : ?>
					<?php echo __('See all our employees', 'sydney'); ?>
				<?php endif; ?>
			</a>
		<?php endif; ?>	
	
	<?php
		wp_reset_postdata();

		if ($center_content) :

		echo '<style>';
			echo '@media only screen and (min-width: 971px) {';
				echo '[data-widgetid="employees-' . $args['widget_id'] . '"].roll-team .owl-wrapper { text-align: center; width: 100% !important; }';
				echo '[data-widgetid="employees-' . $args['widget_id'] . '"].roll-team.owl-carousel .owl-item { float: none; display: inline-block; }';
			echo '}';
		echo '</style>';
?>

<?php

		endif;
		
		endif;

		echo $args['after_widget'];

		if ( ! $this->is_preview() ) {
			$cache[ $args['widget_id'] ] = ob_get_flush();
			wp_cache_set( 'sydney_employees', $cache, 'widget' );
		} else {
			ob_end_flush();
		}
	}
	
}

Hello there,

I would like to apologize in advance for I forgot one thing. In your child theme’s fp-employees.php, replace the class name Sydney_Employees to Sydney_Child_Employees. So near the top line will look like this:


class Sydney_Child_Employees extends WP_Widget {

Regards,
Kharis

Thank you Kharis. It is getting better - no php mistakes now. However, the employees totally disappear - sorry cannot show you the website as it is under construction. But there is simply no employees as if I didn’t even put widget there. It only happens after I insert that code into the child’s functions.php. So I guess something small needs to be changed there. Many thanks!

/*
 * Requiring employee widget file from childtheme
 */
require get_stylesheet_directory() . "/widgets/fp-employees.php";

/*
 * Unregistering default employee widget
 */
function sydney_child_remove_employees_widget() {
	unregister_widget('Sydney_Employees');
}
add_action( 'widgets_init', 'sydney_child_remove_employees_widget', 999 );

/*
 * Registering new widget
 */
function sydney_child_register_new_widget(){
  register_widget( 'Sydney_Child_Employees' ); // Widget class name
}
add_action( 'widgets_init', 'sydney_child_register_new_widget' );

Right now my child’s functions.php looks like this:

<?php
/**
 * Sydney child functions
 *
 */

/**
 * Enqueues the parent stylesheet. Do not remove this function.
 *
 */
add_action( 'wp_enqueue_scripts', 'sydney_child_enqueue' );
function sydney_child_enqueue() {
    
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

/* ADD YOUR CUSTOM FUNCTIONS BELOW */

/*
 * Requiring employee widget file from childtheme
 */
require get_stylesheet_directory() . "/widgets/fp-employees.php";

/*
 * Unregistering default employee widget
 */
function sydney_child_remove_employees_widget() {
	unregister_widget('Sydney_Employees');
}
add_action( 'widgets_init', 'sydney_child_remove_employees_widget', 999 );

/*
 * Registering new widget
 */
function sydney_child_register_new_widget(){
  register_widget( 'Sydney_Child_Employees' ); // Widget class name
}
add_action( 'widgets_init', 'sydney_child_register_new_widget' );

Hello there,

Initially I suggested you to reinsert the Employee widget after you’ve done working on child theme coding. It is missing because it is still associated with the old widget class name that no longer present.

Regards,
Kharis

Totally amazing! I give you ten stars for your work. All working great. :slight_smile:

Excellent! I’m glad they are all working for you. If you don’t mind, please transfer your ten stars here to leave a review. We’ll be very happy to see it on there :slight_smile:

Regards,
Kharis