<?php
//Team Post Type;
add_action('init', 'our_team_post_type_init');
function our_team_post_type_init()
{

    $labels = array(

        'name' => __('Team', 'post type general name', ''),
        'singular_name' => __('Our Team', 'post type singular name', ''),
        'add_new' => __('Add New', 'Our Team', ''),
        'add_new_item' => __('Add New Our Team', ''),
        'edit_item' => __('Edit Our Team', ''),
        'new_item' => __('New Our Team', ''),
        'view_item' => __('View Our Team', ''),
        'search_items' => __('Search Our Team', ''),
        'not_found' =>  __('No Our Team found', ''),
        'not_found_in_trash' => __('No Our Team found in Trash', ''),
        'parent_item_colon' => ''
    );
    $args = array(
        'labels' => $labels,
        'public' => true,
        'publicly_queryable' => true,
        'show_ui' => true,
        'rewrite' => true,
        'query_var' => true,
        'capability_type' => 'post',
        'hierarchical' => true,
        'public' => true,
        'has_archive' => true,
        'show_in_nav_menus' => true,
        'menu_position' => null,
        'rewrite' => array(
            'slug' => 'teams',
            'with_front' => true
        ),
        'supports' => array(
            'title',
            'editor',
            'thumbnail'
        )
    );

    register_post_type('team', $args);
}

// Add Shortcode [our_team];
add_shortcode('our_team', 'codex_our_team');
function codex_our_team()
{
    ob_start();
    wp_reset_postdata();
    ?>
    <div class="section__body">
  <div class="team-members">
    <ul>
			<?php
			$arg = array(
				'post_type' => 'team',
				'posts_per_page' => -1,
				'order' => 'ASC',
			);
			$po = new WP_Query($arg);
			?>
			<?php if ($po->have_posts()) : ?>
				<?php while ($po->have_posts()) : ?>
					<?php $po->the_post(); ?>
            <li>
              <div class="team-member">
                <a href="<?php the_permalink(); ?>">
                  <div class="team__image image-fit js-image-fit">
                      <?php echo get_the_post_thumbnail( get_the_ID(), 'full' );?>
                  </div>
                  <!-- /.team__image -->
                  <div class="team__content">
                    <h5><?php the_title(); ?>   </h5>
                    <!-- <p>Principal</p> -->
                  </div>
                  <!-- /.team__content -->
                </a>
              </div>
              <!-- /.team-member -->
            </li>
					
				<?php endwhile; ?>
			<?php endif; ?>
				</ul>
  </div>
  <!-- /.team-members -->
</div>
<?php
    wp_reset_postdata();
    return '' . ob_get_clean();
}



/*********************** SINGLE PAGE TEAM SECTION ***********************/
<?php get_header(); ?>

<div class="section-blog-member">
  <div class="shell">
    <div class="section__inner">
      <div class="section__head">
        <figure class="section__image">
          <img src="<?php the_field('featured_member_banner'); ?>" alt="<?php the_permalink(); ?>">                 
        </figure>
        <!-- /.section__image -->
        <div class="section__content">
          <div class="section__name">
            <h1><?php the_title(); ?></h1>
          </div>
          <!-- /.section__name -->
          <div class="section__job">
            <!-- <h2 class="h1">Principal</h2> -->
          </div>
          <!-- /.section__job -->
        </div>
        <!-- /.section__content -->
      </div>
      <!-- /.section__head -->
      <div class="section__body">
        <div class="section__entry">
          <?php the_content(); ?>
        </div>
        <!-- /.section__entry -->
      </div>
      <!-- /.section__body -->
    </div>
    <!-- /.section__inner -->
  </div>
  <!-- /.shell -->
</div>
<!-- /.section-blog-member -->
<?php get_footer(); ?>



/*********************** CSS FOR TEAM SECTION ***********************/
/*OUR TEAM*/
.team-members > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0; list-style: none; padding: 0; }
.team-members > ul > li { width: 50%; padding: 0; }
.team-member { text-align: center; text-transform: uppercase; }
.team-member > a { display: block; text-decoration: none; }
.team-member .team__image { margin-bottom: 44px; }
.team-member .team__image { -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; }
.image-fit { overflow: hidden; position: relative; background-size: cover; background-position: 50%; }
.team-member > a:hover .team__image { opacity: .3; -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; }
.team-member .team__image img { height: 600px; object-fit: cover; }
.team-member h5 { font-size: 24px; line-height: 30px; font-family: 'Questrial', sans-serif; }

/*TEAM SINGLE*/
.section-blog-member { font-size: 20px; line-height: 30px; color: #000; font-weight: 400; font-family: "Questrial", sans-serif; }
.section-blog-member .section__image { margin: 0; position: relative; margin-left: calc(-50vw + 50%); width: 100vw }
.section-blog-member .section__image img { width: 100%; display: block }
.section-blog-member .section__content { position: absolute; left: 51.6%; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 1 }
.section-blog-member .section__job { font-style: italic }
.section-blog-member .section__head { position: relative }
.section-blog-member .section__head:not(:last-child) { margin-bottom: 80px; }
.section-blog-member .section__body { max-width: 750px; margin-inline: auto }
.section-blog-member .section__name h1 { font-size: 64px; font-family: 'Questrial', sans-serif; line-height: 40px; }
.section-blog-member .section__entry p { margin-bottom: 1.5em; }