2 Staff members per row

Hi @owaisk757 –
If you can share a link to your website, I might be able to help.

Thanks!

What was the solution? I am interested in this.

@dechtman – The answer is likely going to be specific to your website. If you can share a link to your website, I might be able to help.

Thanks!

Thanks Brett- HEre is the URL:https://www.creedek12.net/staff-new/

I recently ran into the same issue and I found a fix. Write your own custom post type query then you can format it however you like. I am using bootstrap, so I just check for if the staff post is even or odd and either start a row or end it. I wrote it in a code snippet plugin so I can include it anywhere. The variables for name, bio, etc can be found in the plugin’s folder public / partials. See my code here:

<?php

$args = array( 'post_type' => 'staff-member', 'posts_per_page' => -1, 'orderby' => 'menu_order', 'post_status' => 'publish' );

$order = 'ASC';
//The group is set through content passed into the snippet shortcode [snippet name="snippetname"]groupname[/snippet]
//The group name can be found under "Staff Members" in the admin menu. Must be entered exactly as shown there.
$group = $content;

$args['order'] = $order;
$args['staff-member-group'] = $group;

$staff = new WP_Query( $args );

$i = 0;

if( $staff->have_posts() ) :

  $output .= '<div class="staff-member-listing '.$group.'">';

  while( $staff->have_posts() ) : $staff->the_post();

    //global $post;

    $custom 	= get_post_custom();
    $name 		= get_the_title();
    $name_slug	= basename(get_permalink());
    $title 		= isset( $custom["_staff_member_title"][0] ) ? $custom["_staff_member_title"][0] : '';
    $email 		= isset( $custom["_staff_member_email"][0] ) ? $custom["_staff_member_email"][0] : '';
    $phone 		= isset( $custom["_staff_member_phone"][0] ) ? $custom["_staff_member_phone"][0] : '';
    $email_mailto = '' !== $email ? '<a class="staff-member-email" href="mailto:'.antispambot( $email ).'" title="Email '.$name.'">'.antispambot( $email ).'</a>' : '';

    if ( has_post_thumbnail() ) {

      $image_size = apply_filters( 'sslp_set_staff_image_size', $atts['image_size'], $post->ID );

      $image_obj = wp_get_attachment_image_src(get_post_thumbnail_id(), $image_size, false);
            $src = $image_obj[0];

            $photo_url = $src;
            $photo = '<img class="staff-member-photo" src="'.$photo_url.'" alt = "'.$title.'">';

    } else {

      $photo_url = '';
      $photo = '';

    }

    //Based on a two column Bootstrap layout
    //Check if the staff is first or second in the row. If it is first we output the starting row div tag.
    if ($i % 2) { }
    else {
      $output.= '<div class="row"><!-- Start new row -->';
    }
    $output.= '
    <div class="col-md-6 gallery-row"><div class="row">
                    <div class="col-xs-3"><img class="img-responsive staff-photo" src="'.$photo_url.'" alt="'.$name.'"/></div>
                    <div class="col-xs-9">
                    <h5 style="margin:0" >'.$name.'</h5>
                    <h6 style="margin-top:5px">'.$title.'</h6>
                    <span class="red-text">'.$email.'</span><br>
                    '.$phone.'
                    </div>

                    </div></div>
                    <!-- End staff member -->';

    //End row after second column
    if ($i % 2) {
      $output.= '</div>';
    }

    $i += 1;

  endwhile;

  $output .= "</div> <!-- Close staff-member-listing -->";

  wp_reset_postdata();

endif;

echo $output;

?>