[Video] How to show custom fields in Easy Posts Template PHP

Earlier today I had a Zoom session with a user from the Oxygen community where I shared my screen and showed how to

• register a team Custom Post Type using CPT UI plugin
• add a fields group having a few custom fields attached to the team post type using Advanced Custom Fields plugin
• create a Template for the CPT archive
• modify Easy Posts’ Template PHP to show the value of the custom fields

Here’s a recording of it:

Template PHP:

<?php

$position = get_field( 'position' );
$phone_number = get_field( 'phone_number' );
$email_address = get_field( 'email_address' );

?>

<div class='oxy-post'>
  
    <a class='oxy-post-image' href='<?php the_permalink(); ?>'>
      <div class='oxy-post-image-fixed-ratio' style='background-image: url(<?php echo get_the_post_thumbnail_url(); ?>);'>
      </div>
      
      <div class='oxy-post-image-date-overlay'>
		<?php the_time(get_option('date_format')); ?>
	  </div>
      
	</a>
  
	<a class='oxy-post-title' href='<?php the_permalink(); ?>'><?php the_title(); ?></a>

	<div class="team-meta">
		<p><strong>Position:</strong> <?php echo $position; ?></p>
		<?php
		printf( '<p><strong>Phone number: </strong><a href="tel:%s">%s</a></p>',
			$phone_number,
			$phone_number
		);
		?>
	</div>

	<div class='oxy-post-content'>
		<?php the_excerpt(); ?>
	</div>

	<div class="team-meta">
		<?php
		printf( '<p><strong>Email: </strong><a href="mailto:%s">%s</a></p>',
			$email_address,
			$email_address
		);
		?>
	</div>

	<a href='<?php the_permalink(); ?>' class='oxy-read-more'>Read More</a>

</div>

Template CSS:

%%EPID%% .oxy-posts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

%%EPID%% .oxy-post {
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
  margin-bottom: 3em;
  width: 33.33%;
  padding: 1em;
}

%%EPID%% .oxy-post-image {
  margin-bottom: 1em;
  position: relative;
  background-color: grey;
  background-image: repeating-linear-gradient(
  45deg,
  #eee,
  #eee 10px,
  #ddd 10px,
  #ddd 20px);
  width: 100%;
}

%%EPID%% .oxy-post-image-fixed-ratio {
  padding-bottom: 100%;
  background-size: cover;
  background-position: center center;
}

%%EPID%% .oxy-post-image-date-overlay {
  position: absolute;
  top: 1em;
  right: 1em;
  font-size: .7em;
  color: white;
  background-color: rgba(0,0,0,0.5);
  padding: .7em 1em;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}

%%EPID%% .oxy-post-title {
  font-size: 1.5em;
  line-height: 1.2em;
}


%%EPID%% .oxy-post-content {
  margin-top: 1em;
  margin-bottom: 1em;
}

%%EPID%% .oxy-post-content p {
  margin: 0;
}



@media (max-width: 1120px) {
  %%EPID%% .oxy-post-meta {
    display: none;
  }
}


.team-meta {
	background: #ccc;
  padding: 20px;
  border-radius: 4px;
  margin: 20px 0;
}