Show Employee Position on Individual Employee Pages


#1

Hello,
I am generating individual Staff/Employee pages s hyperlinks from the main Staff Page on my site.

Right now, as it appears, I’ve hard coded in the each Person’s Employee Position - is there a way to have it appear under the Feature Image on it’s own?

http://usm84.siteground.biz/~sbengine/staff/paul-bandlow/

Thank you.

Andy


#2

Hello Andy,

Firstly, add the below PHP snippet into your child theme’s functions or use a plugin that allows the same purpose like Functionality.

    add_action( 'wp_enqueue_scripts', 'talon_pro_child_add_script', 999 );
    function talon_pro_child_add_script() {

      if( !is_singular('employees') ) {
        return;
      }

      $meta = array();
      $meta['position'] = get_post_meta( get_the_ID(), 'wpcf-position', true );

      wp_localize_script( 'talon-main', 'employeeMeta', $meta );

    }

Then do the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    ;(function($) {

      if( $('.hentry.type-employees').length ) {

        var position = employeeMeta.position;

        if( '' != position ) {

          var positionHTML = '<p class="employee-position">Position: '+position+'</p>';
          $(positionHTML).insertAfter( '.single-thumb' );

        }

      }

    })(jQuery);
  1. Update

Lastly flush any applied cache as it usually prevents new code addition to take effect in the front end. https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis


#3

Thanks Kharis,
Worked like a charm.

2 questions:

  1. any way to make the text bold and italic
  2. any way to eliminate most of the space between the bottom of the picture and the employee title?

Andy


#4

Hello Andy,

Glad to hear that code worked for you. To achieve those two, try adding the below simple CSS code to Appearance > Customize > Additional CSS from dashboard.

    .single-employees .single-thumb {
      margin-bottom: 0;  
    }

    .single-employees .employee-position {
      font-style: italic;
    }

Regards,
Kharis


#5

Perfect. I also needed the text to be bold, so I used the following CSS:

.single-employees .single-thumb {
  margin-bottom: 0;  
}

.single-employees .employee-position {
  font-weight: bold;
  font-style: italic; 
}