Show Employee Position on Individual Employee Pages

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

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

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

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

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; 
}